ranger/rangerhq-radio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(0.3.2): play-button glyph baseline — drop dashicon for Unicode ▶ / ‖

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-29 23:19:04 +01:00
parent 774e7f9958
commit a56fd7aff7
7 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+13
View File
@@ -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.