openvibers/openvibe.network Commits

Public profiles on phones: badge chips drop their month (still in their title), so two fit a row (19 rows → 10 on goosely's profile) (#275)

OP OpenVibers committed 27 days ago · 3c143d1e2b · 2 files, +2 −1

Changes

ddiff --git a/server/profile/public.js b/server/profile/public.js
iindex 041329d4..96a9ae45 100644
---- a/server/profile/public.js
++++ b/server/profile/public.js
@@@ -362,7 +362,7 @@ a{color:var(--accent)}
.pf-badge-ic{font-size:1.05rem}
.pf-empty{color:var(--text-secondary);padding:18px;border:1px dashed var(--border);border-radius:12px;margin:0}
.pf-note{color:var(--text-secondary);font-size:.85rem;margin:12px 0 0}
--@media (max-width:560px){.pf-head{padding:0 16px 16px;gap:14px}.pf-avatar{width:92px;height:92px}.pf-hat{font-size:32px;top:-18px}.pf-who{padding-top:0;min-width:100%}.pf-bio,.pf-stats,.pf-private{padding-left:16px;padding-right:16px}.pf-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}
++@media (max-width:560px){.pf-head{padding:0 16px 16px;gap:14px}.pf-avatar{width:92px;height:92px}.pf-hat{font-size:32px;top:-18px}.pf-who{padding-top:0;min-width:100%}.pf-bio,.pf-stats,.pf-private{padding-left:16px;padding-right:16px}.pf-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}.pf-badge small{display:none}.pf-badge{padding:6px 12px 6px 9px}}
</style>
</head>
<body>
ddiff --git a/test/public-profile.test.js b/test/public-profile.test.js
iindex 702b6552..56556720 100644
---- a/test/public-profile.test.js
++++ b/test/public-profile.test.js
@@@ -103,6 +103,7 @@ const INSTANCES = [
const css = (sel) => (r.text.match(new RegExp(`\\n${sel.replace('.', '\\.')}\\{([^}]*)\\}`)) || [])[1] || '';
assert.ok(/padding:7px 14px/.test(css('.pf-badge')) && !/width/.test(css('.pf-badge')), 'a badge chip sizes to its name');
assert.ok(/width:\.85em/.test(css('.pf-name-badge')), 'the badge image beside the name has its own rule');
++ assert.ok(/@media \(max-width:560px\)\{[^\n]*\.pf-badge small\{display:none\}/.test(r.text), 'on phones a chip drops its month (still in its title), so two fit a row');
assert.ok(/<span class="pf-stat-k">Badges<\/span><span class="pf-stat-v">2<\/span>/.test(r.text));
// Cached for a minute: a second view reads nothing.