openvibers/openvibe.tools Commits

Tools: the fold rules use their own class, not the site's own fold (#154)

OP OpenVibers committed 13 days ago · 3880b6fd48 · 3 files, +5 −3

* Tools: the parts a reader rarely needs fold on a phone

The home was 5 screens at 390 px. The tools opened most this week, what
shipped, the questions and the rest of OpenVibe are folds now: closed on a
phone, where the title row opens them, and open where there is room, where
they look like the sections they replace. A checkbox and a label, no script,
and every part stays in the page for the crawlers. The search, the good
places to start and the job chips stay where they were. 3.2 screens at
390 px.

* Tools: the fold rules name the title row, not the part's own heading

* Tools: the shipped list keeps one title, on a phone too

* Tools: the fold rules use their own class, not the site's own fold

The home already had a .fold (the <details> fold in the developer block), so the
new checkbox folds shared its rules. The block class is .fold-block now.

* Merge remote-tracking branch 'origin/main' into feat/tools-short-home

# Conflicts:
#	apps/gateway/server/pages/site.js
#	apps/gateway/server/short.js
#	apps/gateway/test/home-short.test.js

Changes

ddiff --git a/apps/gateway/server/pages/site.js b/apps/gateway/server/pages/site.js
iindex f66fde4..8218cbb 100644
---- a/apps/gateway/server/pages/site.js
++++ b/apps/gateway/server/pages/site.js
@@@ -108,7 +108,7 @@ details{border-bottom:1px solid var(--border,rgba(255,255,255,.08));padding:12px
  .fold-toggle:checked~.fold-h .fold-mark::after{content:'\\2212'}
  .fold-body{display:none}
  .fold-toggle:checked~.fold-body{display:block}
--.fold:not(.fold-bare) .fold-body .ov-shipped-home h3{display:none}
++.fold-block:not(.fold-bare) .fold-body .ov-shipped-home h3{display:none}
  @media (min-width:641px){
  .fold-block{margin-top:40px}
  .fold-toggle{display:none}
ddiff --git a/apps/gateway/server/short.js b/apps/gateway/server/short.js
iindex ec74c00..9c34c4e 100644
---- a/apps/gateway/server/short.js
++++ b/apps/gateway/server/short.js
@@@ -26,7 +26,9 @@ const str = (v) => (v && typeof v === 'object' && typeof v.s === 'string') ? v.s
   */
  function foldBlock({ id, head, html, bare = false }) {
      const key = `fold-${esc(id)}`;
--    return `<div class="fold${bare ? ' fold-bare' : ''}" id="${key}">`
++    // The class is `fold-block`, not `fold`: this site already has a `fold` of its own (the <details> fold in the
++    // developer block), and the two must not share their rules.
++    return `<div class="fold-block${bare ? ' fold-bare' : ''}" id="${key}">`
          + `<input class="fold-toggle" type="checkbox" id="${key}-open">`
          + `<label class="fold-h" for="${key}-open">${str(head)}<span class="fold-mark" aria-hidden="true"></span></label>`
          + `<div class="fold-body">${str(html)}</div></div>`;
ddiff --git a/apps/gateway/test/home-short.test.js b/apps/gateway/test/home-short.test.js
iindex 6f01698..5837223 100644
---- a/apps/gateway/test/home-short.test.js
++++ b/apps/gateway/test/home-short.test.js
@@@ -18,7 +18,7 @@ const site = require('../server/pages/site');
          const home = await (await fetch(`${base}/`)).text();
          // The folds that are on the home: the parts a reader rarely needs.
          for (const [id, title] of [['shipped', 'Recently shipped on OpenVibe.Tools'], ['faq', 'Questions'], ['net', 'The rest of OpenVibe']]) {
--            const re = new RegExp(`<div class="fold" id="fold-${id}"><input class="fold-toggle" type="checkbox" id="fold-${id}-open">`
++            const re = new RegExp(`<div class="fold-block" id="fold-${id}"><input class="fold-toggle" type="checkbox" id="fold-${id}-open">`
                  + `<label class="fold-h" for="fold-${id}-open"><h2[^>]*>[^<]*${title}[^<]*</h2>.*?<div class="fold-body">`);
              assert.ok(re.test(home), `the ${title} fold is on the home`);
          }