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() {