openvibers/openvibe.reviews Commits

Home on phones: the scores and ranked lists scroll sideways; one how-it-works fold (#142)

OP OpenVibers committed 15 days ago · 48743cd681 · 2 files, +6 −5

The scores board and the inspections, buildings and complaints lists were cut to
six and four on a phone; they are one row each that scrolls sideways, with every
card. What every page shows and the four steps are one fold, "How it works".

Changes

ddiff --git a/public/css/reviews.css b/public/css/reviews.css
iindex a45bcd4..9aebae5 100644
---- a/public/css/reviews.css
++++ b/public/css/reviews.css
@@@ -179,6 +179,8 @@ main .rv-h-panel-h { margin: 0 0 12px; padding: 0; border: 0; font-size: 1rem; }
  .rv-h-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; }
  .rv-h-fold .sc-sec { margin: 0; padding: 0 16px 14px; }
  @media (max-width: 599px) {
--  .rv-board > li:nth-child(n+7) { display: none; }
--  .rv-h-list > li:nth-child(n+5), .rv-h-rank > li:nth-child(n+5) { display: none; }
++  /* Second pass: the scores board and the ranked lists are one sideways row each, every card in them. */
++  .rv-board, .rv-h-list, .rv-h-rank { 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; }
++  .rv-board::-webkit-scrollbar, .rv-h-list::-webkit-scrollbar, .rv-h-rank::-webkit-scrollbar { display: none; }
++  .rv-board > li, .rv-h-list > li, .rv-h-rank > li { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; }
  }
ddiff --git a/server/render/views.js b/server/render/views.js
iindex 93f9319..819f341 100644
---- a/server/render/views.js
++++ b/server/render/views.js
@@@ -335,8 +335,7 @@ ${complaints.length ? html`<section class="sc-sec" aria-labelledby="rv-cfpb-h"><
  <p class="sc-lede">Complaints consumers sent the Consumer Financial Protection Bureau about financial products. They are not findings: the CFPB does not verify them, and a company with more customers gets more.</p>
  <ol class="rv-h-rank">${complaints.map((x) => html`<li><a href="/e/${e(x.slug)}"><b>${x.name}</b><span>${n(x.complaints)} complaints</span></a></li>`)}</ol>
  <p><a href="/k/organization">Every company (${n(kinds.organization || 0)})</a></p></section>` : ''}
--<details class="rv-h-fold"><summary>What every page shows<span>sources, checks, changes, corrections, feeds</span></summary>${raw(reviewsFeatures())}</details>
--${raw(showcase.steps({
++<details class="rv-h-fold"><summary>How it works<span>what every page shows, and where the numbers come from</span></summary>${raw(reviewsFeatures())}${raw(showcase.steps({
          title: 'How it works',
          items: [
              { title: 'Sources are read within their terms', text: 'OpenVibe.Sources collects public ratings and official records, each with its source, item and the time it was read.' },
@@@ -344,7 +343,7 @@ ${raw(showcase.steps({
              { title: 'Members add their own reviews', text: 'Signed-in members write reviews and save the ratings other sites show, kept apart from the sources\' numbers.', href: '/review' },
              { title: 'Every review site is one click away', text: 'Each page links the review sites that cover its kind (Google, Yelp, Glassdoor, the BBB, Trustpilot, Reddit and more), searched for that name.', href: '/everywhere' },
          ],
--    }))}
++    }))}</details>
  <section class="sc-sec rv-h-faq" aria-labelledby="rv-faq-h"><h2 id="rv-faq-h">Questions</h2>${HOME_FAQ.map((f) => html`<details><summary>${f.q}</summary><p>${f.a}</p></details>`)}</section>`;
  }