openvibers/openvibe.network Commits

Phones: /stats labels at 12 px, and the orbit's nodes are tappable again (#570)

OP OpenVibers committed 7 days ago · 72d01bf4fb · 3 files, +5 −5

Changes

ddiff --git a/public/index.html b/public/index.html
iindex faff927f..0035c0a9 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -133,11 +133,11 @@ a{color:inherit}
  /* The orbit (server/home/render.js orbit()): rings turning in opposite directions, every icon upright. */
  .orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
  .orb-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);filter:blur(6px);animation:orb-breathe 6s var(--ov-ease-in-out, ease-in-out) infinite}
--.orb-ring{position:absolute;inset:0;border-radius:50%}
++.orb-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none}
  .orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent);animation:orb-dash 7s var(--ov-ease-in-out, ease-in-out) infinite alternate}
  .orb-ring.r1{--R:31cqw}.orb-ring.r1::before{inset:19%}
  .orb-ring.r2{--R:45cqw}.orb-ring.r2::before{inset:5%;opacity:.55;animation-delay:-3.5s}
--.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary)}
++.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary);pointer-events:auto}
  .orb-node.is-big{width:58px;height:58px;margin:-29px}
  .orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%}
  .orb-face .ov-icon{display:grid;place-items:center;width:100%;height:100%;flex:none;border-radius:50%;background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-light) 30%,transparent),0 8px 22px rgba(0,0,0,.35);transition:transform var(--ov-dur-3, .3s) var(--ov-ease-spring, cubic-bezier(.2,1.4,.3,1)),box-shadow var(--ov-dur-3, .3s)}
ddiff --git a/server/home/render.js b/server/home/render.js
iindex 02c3376f..0d87d2cf 100644
---- a/server/home/render.js
++++ b/server/home/render.js
@@@ -311,7 +311,7 @@ ${icons.CSS}
    .home-chips>li>a { min-height: 44px; }
    /* .orb-node is already position: absolute (the orbit places it); making it relative turns the link inline and
       each icon fills the orbit. */
--  .orb-node::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
++  .orb-node::after { content: ''; position: absolute; left: -9px; right: -9px; top: -9px; bottom: -9px; }
    .now-more { position: relative; }
    .now-more::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
    .home-more a:only-child { position: relative; display: inline-block; }
ddiff --git a/server/stats/open.js b/server/stats/open.js
iindex 6e864102..0c65739e 100644
---- a/server/stats/open.js
++++ b/server/stats/open.js
@@@ -418,7 +418,7 @@ const CSS = `
  .os-site-own{font-size:.78rem;color:var(--text-muted);height:32px;display:flex;align-items:center}
  .os-site-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px;margin:0;padding-top:10px;border-top:1px solid var(--border)}
  .os-site-meta div{min-width:0}
--.os-site-meta dt{font-size:.7rem;color:var(--text-muted);white-space:nowrap}
++.os-site-meta dt{font-size:.75rem;color:var(--text-muted);white-space:normal}
  .os-site-meta dd{margin:2px 0 0;font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
  .os-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:14px}
  .os-mini{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border)}
@@@ -441,7 +441,7 @@ const CSS = `
  .os-how{padding-top:6px;border-top:1px solid var(--border)}
  @media (max-width:600px){.os{padding:20px 16px 44px}.os-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.os-tile{min-height:104px;padding:14px 12px 12px}.os-tile-v{font-size:1.5rem}.os-tile .os-spark{position:static;width:100%;margin-top:4px}
  /* Phones: two sites to a row, each its views, change, line and two facts (37 full cards made a 10,000 px page). */
--.os-sites{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.os-pre{display:none}.os-site{padding:10px;gap:6px;border-radius:14px}.os-site-name small,.os-site-l{display:none}.os-site-name b{font-size:.86rem}.os-site-n{font-size:1.15rem}.os-site-meta{grid-template-columns:1fr 1fr;padding-top:6px}.os-site-meta div:nth-child(n+3){display:none}.os-site-meta dt{font-size:.64rem}.os-site-meta dd{font-size:.8rem}.os-site-own{height:26px;font-size:.7rem}.os-site .os-spark{height:26px}.os-axis span:nth-child(2){display:none}}
++.os-sites{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.os-pre{display:none}.os-site{padding:10px;gap:6px;border-radius:14px}.os-site-name small,.os-site-l{display:none}.os-site-name b{font-size:.86rem}.os-site-n{font-size:1.15rem}.os-site-meta{grid-template-columns:1fr 1fr;padding-top:6px}.os-site-meta div:nth-child(n+3){display:none}.os-site-meta dt{font-size:.75rem}.os-site-meta dd{font-size:.8rem}.os-site-own{height:26px;font-size:.7rem}.os-site .os-spark{height:26px}.os-axis span:nth-child(2){display:none}}
  `;
  
  module.exports = { createOpenStats, render, sparkline, bars, windowOf };