From a56fd7aff7ab14547c72f0c678a646b440e495e7 Mon Sep 17 00:00:00 2001 From: David Keane Date: Fri, 29 May 2026 23:19:04 +0100 Subject: [PATCH] =?UTF-8?q?fix(0.3.2):=20play-button=20glyph=20baseline=20?= =?UTF-8?q?=E2=80=94=20drop=20dashicon=20for=20Unicode=20=E2=96=B6=20/=20?= =?UTF-8?q?=E2=80=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dashicon used for the play/pause icon was rendering visibly below the button text — dashicon font metrics sit the glyph low inside its own box, so even with `inline-flex` centering the symbol looked like it was on a separate row from the word "Play". Swap dashicons-controls-play / dashicons-controls-pause for plain Unicode glyphs (▶ / ‖) which render on the text baseline like any other character. Flex container changed to align-items: baseline. font-variant-emoji: text on the glyph span to keep platforms that might otherwise pick up an emoji variant of ▶ as monochrome text. Files: radio.php (version), inc/admin-page.php + inc/dashboard-widget.php (dashicon span → glyph span), assets/css/radio.css (drop dashicon-sizing rule, add .radio-player__play-glyph, baseline alignment), assets/js/radio.js (setPlayIcon swaps glyph textContent instead of dashicon className), inc/about.php (history entry). Co-Authored-By: Claude Opus 4.7 (1M context) --- CHANGELOG.md | 13 +++++++++++++ assets/css/radio.css | 18 ++++++++++++------ assets/js/radio.js | 8 +++++--- inc/about.php | 6 +++++- inc/admin-page.php | 2 +- inc/dashboard-widget.php | 2 +- radio.php | 4 ++-- 7 files changed, 39 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c6d735..06767dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,19 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi --- +## [0.3.2] — 2026-05-29 — Play-button glyph baseline fix + +The dashicon used for the play/pause icon was rendering visibly below the button text baseline — the dashicon font sits the glyph low inside its own box, and even with `inline-flex` centering the result looked like the symbol was on a separate row from the word "Play". + +### Fixed +- **Play/pause icon now sits on the text baseline.** Swapped the dashicon (`dashicons-controls-play` / `dashicons-controls-pause`) for a plain Unicode glyph (▶ / ‖) which renders on the text baseline like any other character. +- Flex container changed from `align-items: center` to `align-items: baseline` for the same reason. +- `font-variant-emoji: text` set so platforms that might otherwise pick up a colour-emoji variant for ▶ keep it as monochrome text. + +**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (dashicon span → glyph span), `assets/css/radio.css` (drop the dashicon-sizing rule, add `.radio-player__play-glyph` styling, change play-button flex alignment to baseline), `assets/js/radio.js` (`setPlayIcon` now swaps glyph `textContent` instead of dashicon `className`), `inc/about.php` (history entry). + +--- + ## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS. diff --git a/assets/css/radio.css b/assets/css/radio.css index c6a09d3..7bff6c5 100644 --- a/assets/css/radio.css +++ b/assets/css/radio.css @@ -80,17 +80,23 @@ } .radio-player__play { - /* native .button .button-primary styling; just ensure icon aligns */ + /* native .button .button-primary styling; just ensure glyph aligns */ display: inline-flex !important; - align-items: center; + align-items: baseline; gap: 6px; } -.radio-player__play .dashicons { - font-size: 14px; - width: 14px; - height: 14px; +/* Unicode play/pause glyph (not a dashicon — those sit low inside their + own font box and look like they're below the text baseline). A plain + ▶ / ‖ glyph renders on the text baseline like any other character. */ +.radio-player__play-glyph { + display: inline-block; + font-size: 11px; line-height: 1; + /* Coerce to text rendering rather than colour-emoji on systems that + might otherwise pick up an emoji variant for ▶ / ‖. */ + font-variant-emoji: text; + font-family: "Helvetica Neue", Arial, sans-serif; } .radio-player__volume { diff --git a/assets/js/radio.js b/assets/js/radio.js index d9103c5..ca7a9cc 100644 --- a/assets/js/radio.js +++ b/assets/js/radio.js @@ -68,11 +68,13 @@ }); } - /** Update play/pause button icon + label to reflect current audio state. */ + /** Update play/pause button glyph + label to reflect current audio state. + * v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits + * on the text baseline instead of below it. */ function setPlayIcon(btn, playing) { - var icon = btn.querySelector('.dashicons'); + var glyph = btn.querySelector('[data-radio-play-glyph]'); var label = btn.querySelector('[data-radio-play-label]'); - if (icon) { icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); } + if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶ if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); } btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play')); } diff --git a/inc/about.php b/inc/about.php index dbc8110..989447d 100644 --- a/inc/about.php +++ b/inc/about.php @@ -48,7 +48,11 @@ function radio_render_about_page() {