openvibers/openvibe.network Commits

/my: now-card titles take two lines, a quiet site is a small chip (#838)

OP OpenVibers committed 2 days ago · 99ddd9e277 · 2 files, +7 −4

* /my: now-card titles take two lines, a quiet site is a small chip

The On OpenVibe now cards cut titles to one line ("European Commission approves €2...."): they take two lines now,
and the card's line wraps. The quiet-days line was italic text at 75%; it is a small muted chip with a dot.

* Merge branch 'main' into design/my-now-cards

Changes

ddiff --git a/public/css/my.css b/public/css/my.css
iindex 297a83db..93d9cee7 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -619,8 +619,10 @@ button.td-stat:hover span { color: var(--accent-light); }
  .td-net-h { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
  .td-net-ht { display: grid; flex: 1; min-width: 0; }
  .td-net-ht b { font-size: 15px; font-weight: 800; }
--.td-net-ht small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
--.td-net-quiet { opacity: .75; font-style: italic; }
++.td-net-ht small { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
++/* A quiet site says so as a small muted chip, not in italics (Opus, 2026-11-11). */
++.td-net-quiet { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 0 8px; vertical-align: 1px; border-radius: 999px; font-style: normal; font-size: 11.5px; color: var(--text-muted); background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); }
++.td-net-quiet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
  .td-net-card[data-site="media-hub"] .td-site-ic { color: #f472b6; background: color-mix(in srgb, #ec4899 16%, transparent); }
  .td-net-card[data-site="games"] .td-site-ic { color: #4ade80; background: color-mix(in srgb, #22c55e 16%, transparent); }
  .td-net-card[data-site="live"] .td-site-ic { color: #f87171; background: color-mix(in srgb, #ef4444 16%, transparent); }
@@@ -633,7 +635,8 @@ button.td-stat:hover span { color: var(--accent-light); }
  .td-net-thumb { flex: none; width: 64px; height: 36px; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); }
  .td-net-list li:first-child .td-net-i { color: var(--accent-light); }
  .td-net-t { display: grid; min-width: 0; }
--.td-net-t b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
++/* Titles take two lines before they are cut (rule names-are-never-cut). */
++.td-net-t b { font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .td-net-t small { font-size: 12px; color: var(--text-muted); }
  .td-nums .td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
  .td-nums .td-stat { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent); text-align: left; }
ddiff --git a/public/js/my/today.js b/public/js/my/today.js
iindex 5cefb0e0..191d5463 100644
---- a/public/js/my/today.js
++++ b/public/js/my/today.js
@@@ -265,7 +265,7 @@ function renderNet(frame) {
              // The quiet line is muted: it explains why the card is short; it is not news.
              tdEl('div', 'td-net-h', [tdEl('span', 'td-site-ic', [tdIcon(site[1])]), tdEl('span', 'td-net-ht', [tdEl('b', '', [String(c.title || site[0])]),
                  tdEl('small', '', [site[0], meaning ? tdEl('span', 'td-net-when', [` · ${meaning}`]) : null,
--                    c.stale ? tdEl('span', 'td-net-quiet', [` · quiet for ${Math.floor(c.newest / 86400000)} days`]) : null])]), more]),
++                    c.stale ? tdEl('span', 'td-net-quiet', [`quiet for ${Math.floor(c.newest / 86400000)} days`]) : null])]), more]),
              list,
          ], { 'data-site': String(c.site || '') });
      }));