openvibers/openvibe.live Commits

Phones: 44 px tap targets on the element itself — the easter-egg keypad, the home's legal row, the feed and the Rundown (#640)

OP OpenVibers committed 6 days ago · fbb28c60e4 · 4 files, +51 −2

* Phones: 44 px tap targets on the element itself — the easter-egg keypad, the home's legal row, the feed and the Rundown

* Phone taps: only a linked face grows to 44 px; a face inside a link keeps its size

Changes

ddiff --git a/public/css/features/content.css b/public/css/features/content.css
iindex d7eb24f2..99adece3 100644
---- a/public/css/features/content.css
++++ b/public/css/features/content.css
@@@ -510,3 +510,18 @@ a.cf-recap-band:hover .cf-recap-sub { text-decoration: underline; text-underline
box-shadow: 0 0 0 3px color-mix(in srgb, #fff 22%, transparent), 0 8px 24px rgba(0, 0, 0, .45); }
.cf-who-letter { display: grid; place-items: center; width: 30%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; font-size: clamp(1.4rem, 7vw, 2.4rem); font-weight: 800;
color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 18%, transparent), 0 8px 24px rgba(0, 0, 0, .35); }
++/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────
++ Every control of the feed carries a 44 px hit area on the element itself: the crosslink in the header, the
++ filter chips, the sort segments and the three links inside a card (its title, the channel it came from and
++ the "read" links). Nothing is hidden to make room — the cards simply get taller. */
++@media (pointer: coarse) {
++ .cf-crosslink { min-height: 44px; }
++ .cf-chip { min-height: 44px; min-width: 44px; }
++ .cf-seg button { min-height: 44px; }
++ /* The title keeps its own two-line clamp; the padding centres the words in the 44 px box instead of
++ leaving the space under them. */
++ .cf-title { min-height: 44px; padding: 11px 0; }
++ .cf-chan { min-height: 44px; }
++ .cf-moment-link { min-height: 44px; }
++ .cf-recap-read { min-height: 44px; }
++}
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex e6f1bb6a..42c4d25a 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -1296,7 +1296,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
#page-home .hero-latest, #page-home .digest-hot-line { min-height: 44px; display: flex; align-items: center; }
#page-home .star-act.star-expand { min-width: 44px; }
#page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }
-- #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
++ #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
/* The rail below starts right under its header, and its cards reached into the link's last pixels and took the taps
under the old hit area (11-03 re-audit: "View all" measured 28 to 32px). The header sits above the rail, and the
link's hit area grows up into the header's own room, never down into the cards: 44px. */
@@@ -1305,7 +1305,16 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
#page-home .digest-recap::after { content: ''; position: absolute; inset: -8px; }
#page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }
/* Text links in a row: taller only, so neighbours never take each other's taps. */
-- #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
++ #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
++ /* Second phone pass (2026-11-06): the legal row's own words carry the 44 px, not an invisible overlay.
++ "Terms" and "DMCA" are shorter than a finger, so each link is at least 44 px wide and 44 px tall, with
++ the word in the middle of its own box. */
++ #page-home .hero-philosophy-btn { min-height: 44px; display: inline-flex; align-items: center; }
++ #page-home .hero-philosophy-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
++ /* The easter-egg keypad, open: every key is 44 px on the key itself. The letter grid reflows to as many
++ 44 px columns as the panel holds (seven on a 390 px phone), so no key is narrower than a fingertip. */
++ #page-home .hero-egg-pad-letters { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 3px; }
++ #page-home .hero-egg-reveal { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }
}
/* New here? (2026-10-30, the short-pages rule): on a phone the explainer at the foot of the home is a row of tabs and
ddiff --git a/public/css/features/rundown.css b/public/css/features/rundown.css
iindex 074403af..6c7a6309 100644
---- a/public/css/features/rundown.css
++++ b/public/css/features/rundown.css
@@@ -239,3 +239,22 @@ a.rd-use:hover b { color: var(--accent); }
.rd-more[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.rd-more > .rd-topic-grid { padding: 4px 12px 14px; }
@media (prefers-reduced-motion: reduce) { .rd-more > summary::before { transition: none; } }
++/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────
++ Every control of the Rundown carries a 44 px hit area on the element itself: the tabs, the avatars, the names,
++ the watch and read links, the topic chips, the reaction buttons and the speaker buttons. Nothing is hidden to
++ make room — the cards simply get taller. */
++@media (pointer: coarse) {
++ #rundown-root .rd-tab { min-height: 44px; display: inline-flex; align-items: center; }
++ /* A linked face only: a face inside another link (the rails) is not a target and keeps its size. */
++ #rundown-root a.rd-av { min-width: 44px; min-height: 44px; }
++ #rundown-root .rd-user { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
++ #rundown-root .rd-speak { width: 44px; height: 44px; }
++ #rundown-root .rd-react-btn { min-height: 44px; min-width: 44px; }
++ #rundown-root .rd-watch { min-height: 44px; }
++ #rundown-root .rd-h3 a { min-height: 44px; display: inline-flex; align-items: center; }
++ #rundown-root .rd-brief-play { min-height: 44px; }
++ #rundown-root .rd-chip { min-height: 44px; }
++ #rundown-root .rd-read { min-height: 44px; display: inline-flex; align-items: center; }
++ #rundown-root .rd-loadmore { min-height: 44px; }
++ #rundown-root .rd-more-link { min-height: 44px; display: inline-flex; align-items: center; }
++}
ddiff --git a/public/css/style.css b/public/css/style.css
iindex 2f6d1675..38772091 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -480,6 +480,12 @@ body.ov-nav-overlay .navbar.ovnav-top {
@keyframes eggShakeSlot { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.egg-key { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-weight: 800; cursor: pointer; transition: transform var(--ov-dur-1, .1s), background var(--ov-dur-2, .15s), border-color var(--ov-dur-2, .15s); }
.egg-key--letter { min-width: 0; height: 30px; padding: 0; font-size: 0.8rem; text-transform: uppercase; }
++/* Touch (2026-11-06 phone pass, round two): every key of the easter-egg keypad is a 44 px target on the key
++ itself — the four arrows, the two control keys and the 26 letter keys. A mouse keeps the small keys. */
++@media (pointer: coarse) {
++ .egg-key { min-width: 44px; height: 44px; }
++ .egg-key--letter { min-width: 44px; height: 44px; }
++}
/* Celebration effects */
.egg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; overflow: hidden; }