openvibers/openvibe.bot Commits

The footer folds on a phone, as it does on every other OpenVibe site (#237)

OP OpenVibers committed 14 days ago · bfe7511f3f · 2 files, +11 −3

* The footer folds on a phone, as it does on every other OpenVibe site

The shared footer is rendered on the server, but it only folds its link
columns on a phone once it is mounted in the browser. Bot's pages never
mounted it, so the footer stayed open on every phone: 906 px where the other
sites show 470, a quarter of the home page.

The front page's home test still passes.

* The fold keeps its title: only the section's own heading gives way

Changes

ddiff --git a/public/home.css b/public/home.css
iindex 75e3c70..c817672 100644
---- a/public/home.css
++++ b/public/home.css
@@@ -134,7 +134,7 @@
  .hm-fold-block > summary span { color: var(--text-secondary, #96a7c2); font-weight: 600; font-size: .86rem; text-align: right; }
  .hm-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
  .hm-fold-block .sc-sec { margin: 0; }
--.hm-fold-block .sc-sec > h2, .hm-fold-block .hm-h { display: none; }
++.hm-fold-block .sc-sec > h2, .hm-fold-block .sc-sec .hm-h { display: none; }
  @media (min-width: 641px) {
    .hm-fold-block { border: 0; background: none; margin-top: 40px; }
    .hm-fold-block > summary { display: block; min-height: 0; padding: 0; border: 0; background: none; }
ddiff --git a/server/web/home.js b/server/web/home.js
iindex 7e0a91c..75d318d 100644
---- a/server/web/home.js
++++ b/server/web/home.js
@@@ -261,6 +261,13 @@ function sections({ signedIn = false, config, models = [], robots = [], kit: k =
          });
  }
  
++/**
++ * The footer's own script: the shared footer (openvibe-shared/footer.js) is rendered on the server, but it only folds
++ * its link columns on a phone once it is mounted in the browser (openvibe-shared/footer.js, foldOnPhones). Without
++ * this call Bot's footer stayed open on every phone: 906 px where the other sites show 470.
++ */
++const footerBoot = (footer) => `<script>document.addEventListener('DOMContentLoaded', function () { try { if (window.OpenVibeFooter) OpenVibeFooter.init(${JSON.stringify(footer)}); } catch (e) { /* the Frame is optional */ } });</script>`;
++
  /** The OpenVibe Frame around one of Bot's public pages (the front page, the Build docs): navbar, footer, theme. */
  function framePage({ config, title, description, canonicalPath = '/', body, head = '' }) {
      const nav = {
@@@ -280,7 +287,7 @@ function framePage({ config, title, description, canonicalPath = '/', body, head
          navbar: nav, footer: { service: 'bot', variant: 'full', mount: '#ov-footer', brandName: SITE_NAME, updates: '/updates' }, home: '/',
          navLinks: [{ label: 'Robots', href: '/robots' }, { label: 'Build', href: '/docs' }],
          head: [appIcon.headTags({ site: 'bot' }), '<link rel="manifest" href="/manifest.webmanifest">', `<link rel="apple-touch-icon" href="${require('openvibe-shared/app-icons').url('bot', 192)}">`, head].filter(Boolean).join('\n'),
--        body: `<div id="navbar-mount"></div>\n${body}`,
++        body: `<div id="navbar-mount"></div>\n${body}\n${footerBoot({ service: 'bot', variant: 'full', mount: '#ov-footer', brandName: SITE_NAME, updates: '/updates' })}`,
      });
  }
  
@@@ -337,7 +344,8 @@ function renderHome({ config, signedIn = false, models = [], robots = [], kit =
          body: `<div id="navbar-mount"></div>
  <main id="main" class="page hm">
  ${body}
--</main>`,
++</main>
++${footerBoot(footer)}`,
      });
  }