openvibers/openvibe.host Commits

Home on phones, second pass: tables and card lists scroll sideways (#198)

OP OpenVibers committed 15 days ago · 46010db52c · 3 files, +24 −4

The plan and domain tables (cards on a phone), the sizes, the value picks and the
providers are one row each that scrolls sideways (every card is still there); the
figures are one strip at last (the first pass's rule was in host.css, and
catalog.css, which loads later, put the grid back); why this comparison is
different folds under its heading (#why kept). CSS raw budget 51 -> 52 (measured
51.3).

Changes

ddiff --git a/public/css/catalog.css b/public/css/catalog.css
iindex cdf8069..bb26936 100644
---- a/public/css/catalog.css
++++ b/public/css/catalog.css
@@@ -236,3 +236,24 @@
  .hh-faq details p { margin: 0; padding: 0 16px 14px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
  @media (prefers-reduced-motion: reduce) { .hh-cards a { transition: none; } .hh-cards a:hover { transform: none; } }
  .hd-front .hc-table-wrap + .hc-table-wrap { margin-top: 18px; }
++
++/* The home on phones (2026-10-29): a taste and a door. Each table (cards on a phone) and each card list is one row that
++   scrolls sideways, the figures are one strip, and the explainer folds under its heading. Every card stays in the HTML. */
++.hh-fold { border: 1px solid var(--hs-line); border-radius: 14px; background: var(--hs-card); }
++.hh-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; list-style: none; }
++.hh-fold > summary::-webkit-details-marker { display: none; }
++.hh-fold > summary h2 { margin: 0; }
++.hh-fold > summary span { color: var(--hs-muted); font-weight: 600; font-size: .86rem; text-align: right; }
++.hh-fold > summary:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: -2px; border-radius: 14px; }
++.hh-fold .sc-sec { max-width: none; margin: 0; padding: 0 18px 18px; }
++@media (max-width: 599px) {
++  .hh-stats-wrap .hh-stats { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
++  .hh-stats-wrap .hh-stats::-webkit-scrollbar { display: none; }
++  .hh-stats-wrap .hh-stats > li { flex: 0 0 auto; min-width: 132px; }
++  .sc-sec .hh-cards, .hh-short .hc-table tbody { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++  .sc-sec .hh-cards::-webkit-scrollbar, .hh-short .hc-table tbody::-webkit-scrollbar { display: none; }
++  .sc-sec .hh-cards > li { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; }
++  .hh-short .hc-table tbody tr { flex: 0 0 84%; min-width: 0; margin-bottom: 0; scroll-snap-align: start; }
++  .hh-short .hc-table-wrap { border: 0; background: none; overflow: visible; }
++  .hh-fold > summary span { display: none; }
++}
ddiff --git a/server/render/catalog.js b/server/render/catalog.js
iindex 76cbcba..f3e1398 100644
---- a/server/render/catalog.js
++++ b/server/render/catalog.js
@@@ -360,16 +360,15 @@ function front({ plans, providers, promos: live, stats, offers: recent = [], dom
  <p class="hc-more">${link('/catalog', 'Filter and sort every plan →', 'button')}</p></section>`
      + extra.sizes + extra.value + extra.providers
      + domainSection
++    + '<section class="sc-sec" id="why" aria-labelledby="hh-why"><details class="hh-fold"><summary><h2 id="hh-why">Why this comparison is different</h2><span>sourced, dated, ranked by you</span></summary>'
      + showcase.features({
--        id: 'why',
--        title: 'Why this comparison is different',
          items: [
              { icon: 'ov:check', title: 'Straight from the source', text: 'Every provider in one table, from their own APIs or from staff entries that name the page they came from. Nothing is estimated.' },
              { icon: 'ov:history', title: 'Dated prices', text: 'Every price shows when it was last checked, and price changes are kept as a history per plan.' },
              { icon: 'ov:search', title: 'Compare what matters', text: 'Sort by monthly price, or by price per vCPU, per GB of RAM or per GB of disk. Unknown stays unknown.' },
              { icon: 'ov:account', title: 'Ranked by you', text: 'No paid placement. Affiliate links are marked, disclosed beside the link, and never change the order.' },
          ],
--    }) + (recent.length ? `<section class="sc-sec"><h2>Latest hosting offers</h2><ol class="hc-offers">${recent.slice(0, 6).map((o) => offerItem(o, now)).join('')}</ol><p class="hc-more">${link('/catalog/offers', 'Every offer, by price or date →')}</p></section>` : '')
++    }) + '</details></section>' + (recent.length ? `<section class="sc-sec"><h2>Latest hosting offers</h2><ol class="hc-offers">${recent.slice(0, 6).map((o) => offerItem(o, now)).join('')}</ol><p class="hc-more">${link('/catalog/offers', 'Every offer, by price or date →')}</p></section>` : '')
      + (live.length ? `<section class="sc-sec"><h2>Promotions running now</h2>${promoCards(live.slice(0, 3))}<p class="hc-more">${link('/catalog/promos', 'All promotions →')}</p></section>` : '')
      + extra.faq
      + `<p class="hc-own">Want to host a site with OpenVibe? ${link('https://openvibe.space', 'Visit OpenVibe.Space')}.</p>`;
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex f129948..2eaada4 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -18,7 +18,7 @@ const BUDGETS = {
      jsRawKB: 308,   // 307.8 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 300.5 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 293 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 287.2 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 273.2 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 263.4 with shared 4.11.0's seasonal navbar; 254.1 with openvibe-shared 4.9.0 (status text twins in every theme, 2026-10-23); 239.1 (openvibe-shared 2.6.0 served scripts; was 212.2 on 2.2.0)
      jsBrotliKB: 77,   // 76.1 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 74.2 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 70.5 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 67.9 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 65.3 Shared 4.12.0: the light/dark switch, the seasonal mark and the theme pairs; 61.7 with shared 4.11.0's seasonal navbar; 56.3 (was 49.9)
      cssFiles: 3,   // 3 (host.css, openvibe-shared showcase.css, catalog.css: the front page is the hosting catalog since Host#69)
--    cssRawKB: 51,   // 46.2 openvibe-shared 4.26.1 (hero visual); 40.7 with Shared 4.13.0 (2026-10-26: account links); 34.8 on 2026-10-22 (the front page's cards and questions); 31.9 (2026-10-16 the domain comparison's and benchmarks' styles; 27.2 with showcase.css 4.1.5, 14.8 before catalog.css)
++    cssRawKB: 52,   // 51.3 the home's phone rows and fold (2026-10-29); 46.2 openvibe-shared 4.26.1 (hero visual); 40.7 with Shared 4.13.0 (2026-10-26: account links); 34.8 on 2026-10-22 (the front page's cards and questions); 31.9 (2026-10-16 the domain comparison's and benchmarks' styles; 27.2 with showcase.css 4.1.5, 14.8 before catalog.css)
      cssBrotliKB: 10.5,   // 10.1 with the phone rules that show four rows of each front-page list (2026-10-29); 8.3 with Shared 4.13.0 (2026-10-26: account links); 6.9 (5.7 before the domain and benchmark styles, 3.6 before catalog.css)
      externalFiles: 1,   // 0
  };