openvibers/openvibe.live Commits

Home on phones: the about section starts collapsed, the network is two sideways rows (#449)

OP OpenVibers committed 15 days ago · 69bd2c6a7c · 2 files, +14 −0

A first visit on a phone opened "See what makes it different" by itself: 2.7
screens of reading between the go-live button and the network. Phones now always
start collapsed (the toggle sits right under that button); wide screens keep the
first-visit rule. The fourteen services are two rows that scroll sideways on a
phone instead of a screen and a half of tiles; the footer lists them too.

Changes

ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex 100e055e..1bdb01dc 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -132,6 +132,17 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      .network-hub-grid { grid-template-columns: 1fr; gap: 8px; }
      .network-hub { padding: 16px 10px; }
  }
++/* Phones (2026-10-29): the fourteen services are two rows that scroll sideways, not a screen and a half of tiles;
++   every one is still a tap away, and the footer lists them too. */
++@media (max-width: 599px) {
++    .network-hub-grid {
++        grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 66%;
++        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none;
++        margin: 0 -12px; padding: 0 12px 4px;
++    }
++    .network-hub-grid::-webkit-scrollbar { display: none; }
++    .network-hub-grid > .network-card { scroll-snap-align: start; min-width: 0; }
++}
  .stream-card-nsfw-blur img,
  .stream-card-nsfw-blur .thumb-placeholder {
      filter: blur(16px);
ddiff --git a/public/js/app-home.js b/public/js/app-home.js
iindex 51198129..15118627 100644
---- a/public/js/app-home.js
++++ b/public/js/app-home.js
@@@ -905,6 +905,9 @@ function startSloganCountdown(nextAt) {
  // a first-time visitor (within 30 min of their first visit) so they're more likely to read it.
  function _homeAboutDefaultExpanded() {
      try {
++        // Phones always start collapsed (2026-10-29): opened, the section is 2.7 screens of reading between the
++        // go-live button and the network, and "See what makes it different" sits right under that button.
++        if (window.matchMedia('(max-width: 759px)').matches) return false;
          // Once they've scrolled past it (i.e. actually seen it), always collapse by default.
          if (localStorage.getItem('openvibe_about_seen') === '1') return false;
          const KEY = 'openvibe_first_visit';