openvibers/openvibe.design Commits

/brand/explore: a name beside the chosen logo in the phone menu bars (#66)

OP OpenVibers committed 12 days ago · bd96369f8b · 2 files, +15 −2

The phone mock showed only the logo, a gap and the button, which read as empty. It now shows the site's short name
(Chat), and the bar wears the font picked in step 3, so it previews all three picks together.

Changes

ddiff --git a/public/css/marks.css b/public/css/marks.css
iindex e3b75dd..e0accd2 100644
---- a/public/css/marks.css
++++ b/public/css/marks.css
@@@ -339,7 +339,9 @@ html[data-ov-motion=reduced] .mb-btn *{animation:none!important}
  .mx-step-2.is-later{opacity:.6}
  @media (max-width:640px){
    .mb-nav{justify-content:space-between;padding:6px 8px}
--  .mb-nav .mx-word{display:none}
++  .mb-nav .mx-word{flex:1;min-width:0;font-size:15px}
++  .mb-nav .mx-word b,.mb-nav .mx-word .mx-sep{display:none}
++  .mb-nav .mx-site{color:inherit;font-weight:800}
    .mb-nav>svg{width:26px;height:26px}
    .mb-nav .mb-btn{width:38px;height:38px}
    .mb-nav .mb-btn svg{width:24px;height:24px}
@@@ -402,3 +404,6 @@ html[data-ov-motion=reduced] .mb-btn *{animation:none!important}
  .mx-split svg{filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
  .mx-tops-k{width:56px}
  @media (max-width:640px){.mx-tops-k{width:44px}}
++
++/* The mock bars and the font step's word wear the font picked in step 3, if any (marks.js sets --mx-pick-font). */
++.mb-nav .mx-word{font-family:var(--mx-pick-font,var(--mx-face));font-weight:var(--mx-pick-weight,800)}
ddiff --git a/public/js/marks.js b/public/js/marks.js
iindex 379a5de..8b721a8 100644
---- a/public/js/marks.js
++++ b/public/js/marks.js
@@@ -71,8 +71,8 @@
          function syncMenuMark() {
              var marks = picks.filter(function (c) { return c[0] === 'L' || c[0] === 'P'; });
              var code = marks.length ? marks[marks.length - 1] : null;
--            var withEl = root.querySelector('[data-mb-with]');
              all('.mx-tab-side, .mx-step-2, .mx-step-3', root).forEach(function (el) { el.classList.toggle('is-later', !code); });
++            syncPickFont();
              if (code === shownMark) return;
              shownMark = code;
              var defs = root.querySelector('.mx-defs');
@@@ -91,6 +91,14 @@
              all('.mb-nav use, .fx-mark use', root).forEach(function (u) { u.setAttribute('href', '#' + ref); });
              all('[data-mb-with]', root).forEach(function (el) { el.textContent = code ? 'Next to your logo, ' + code + '.' : 'Next to today\u2019s logo. Pick a logo first to see yours here.'; });
          }
++        // The last font picked dresses the name in the menu bars too, so the bar shows all three picks together.
++        function syncPickFont() {
++            var fonts = picks.filter(function (c) { return c[0] === 'F'; });
++            var card = fonts.length && document.getElementById(fonts[fonts.length - 1]);
++            var w = card && card.querySelector('.fx-word');
++            if (w && w.style.fontFamily) { root.style.setProperty('--mx-pick-font', w.style.fontFamily); root.style.setProperty('--mx-pick-weight', w.style.fontWeight || '800'); }
++            else { root.style.removeProperty('--mx-pick-font'); root.style.removeProperty('--mx-pick-weight'); }
++        }
          var saveTimer = 0;
          function toggle(code) {
              var prev = picks.slice();