openvibers/openvibe.quest Commits

The catalog on a phone: tighter cards, the site said once (#256)

OP OpenVibers committed 3 days ago · a997fedd86 · 2 files, +19 −2

* The catalog on a phone: tighter cards, the site said once

22 cards, each a third of a screen, made a page of 9,179 px; it is 7,829 px with nothing removed. A smaller medal and
less padding, reward chips in one or two rows (their captions stay in the markup), and no site chip under the site's
own heading.

* Size budgets: the catalog's phone cards, measured

Changes

ddiff --git a/public/css/app.css b/public/css/app.css
iindex ebc1601..b9efcfb 100644
---- a/public/css/app.css
++++ b/public/css/app.css
@@@ -250,3 +250,20 @@ p.lede { font-size: 1.05rem; color: var(--text-secondary, #96a7c2); max-width: 7
      .page .sc-sec:has(> .hm-fold-block) > .hm-fold-block > summary { min-height: 56px; }
      .page .sc-sec:has(> .hm-fold-block[open]) { padding-bottom: 18px; }
  }
++
++/* The catalog on a phone: 22 cards, each a screen-third tall, made a page of 9,000 px. A smaller medal and less
++   padding give the words the width, and a reward chip says the reward (its caption, "on your profile", stays for a
++   screen reader and in the chip's title): the three chips sit in one or two rows, not three. */
++@media (max-width: 640px) {
++    .quest { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px; }
++    .quest .medal { width: 44px; height: 44px; }
++    .quest-why { margin-bottom: 8px; }
++    .quest-steps { margin-bottom: 8px; }
++    .reward { gap: 5px; }
++    .reward-badge, .reward-coins, .reward-item { padding: 3px 9px; }
++    .quest .reward-badge small, .quest .reward-item small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
++    .site-group { margin-top: 18px; }
++}
++/* Under a site's own heading a card does not repeat the site (say it once); the chip stays wherever a card stands
++   alone, on a quest's page and in the quest log. */
++.site-group .quest .q-site-chip { display: none; }
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 3de7f91..dd508ac 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -27,8 +27,8 @@ const BUDGETS = {
      jsRawKB: 376.7, // 376.7: measured 368.7 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0, 2026-11-09
      jsBrotliKB: 89.5, // 89.5: measured 87.5 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0, 2026-11-09
      cssFiles: 4,   // 4 (2026-10-29: + /shared/kit.css and /shared/room.css, the kit's numbers, filters, folds, cards and rails); 2 (app.css + the cached /shared/showcase.css)
--    cssRawKB: 126.2, // 125.9 with the daily card and the phone folds (2026-11-10); before: 122.2: measured 117.2 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0, 2026-11-09
--    cssBrotliKB: 27.3, // 27.1 with the daily card and the phone folds (2026-11-10); before: 26.6: measured 25.4 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0, 2026-11-09
++    cssRawKB: 127.3, // 127.0 with the catalog's phone cards (2026-11-10); before: 125.9 with the daily card and the phone folds (2026-11-10); before: 122.2: measured 117.2 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0,
++    cssBrotliKB: 27.6, // 27.4 with the catalog's phone cards (2026-11-10); before: 27.1 with the daily card and the phone folds (2026-11-10); before: 26.6: measured 25.4 with openvibe-shared 4.163.0, plus room for 4.162.0–4.163.0, 20
      externalFiles: 0,   // 0
  };