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

fix(0.6.1): About page restructure — balance the layout

Browse Source 
By v0.6.0 the About page had eight version-history entries, each a
full paragraph, dwarfing the other cards and pushing Credits + thanks
off the visible area.

- Three short cards on top (What / Who / Credits) — equal-height,
  balanced row. Credits gets equal billing instead of being a fourth
  card buried under a wall of version notes.
- Version history is its own full-width card below. Only the latest
  release is shown in full; earlier releases collapse to one line
  each. The card now stays compact however many versions ship —
  adding a future release adds one line, not a paragraph.
- Full prose for older versions lives in CHANGELOG.md on Gitea via
  the existing "View the full CHANGELOG.md →" link. Single source of
  truth.

Files: radio.php (version), inc/about.php (3-card top + new
.radio-about-versions block with __latest / __earlier sub-elements;
9 versions in the earlier-releases list incl. v0.1.0),
assets/css/radio.css (drop dead .radio-about-card--versions rules;
add .radio-about-versions + __latest + __earlier; dark-theme overrides).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-30 00:25:12 +01:00
parent 0dc3a220d9
commit 64fc7f5da2
4 changed files with 136 additions and 71 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.6.1] — 2026-05-30 — About page restructure
By v0.6.0 the About page had eight version-history entries, each a full paragraph, dwarfing the other cards and pushing Credits + thanks off the visible area. v0.6.1 rebalances the layout.
### Changed
- **Three short cards on top** (What / Who / **Credits**) — equal-height, balanced row. Credits is no longer a fourth card buried under the version history; it sits beside What and Who where it belongs.
- **Version history is its own full-width card below.** Only the **latest** release is shown in full; **earlier releases collapse to one line each** (version + date + headline). The card now stays compact however many versions ship — adding a future release adds one line, not a paragraph.
- **Full prose for older versions lives in `CHANGELOG.md` on Gitea** — the "View the full CHANGELOG.md →" link does the heavy lifting. Single source of truth, no duplication.
**Files changed:** `radio.php` (version), `inc/about.php` (3-card top + new `.radio-about-versions` block with `__latest` / `__earlier` sub-elements; 9 versions in the earlier-releases list incl. v0.1.0), `assets/css/radio.css` (removed dead `.radio-about-card--versions` rules; added `.radio-about-versions` + `__latest` + `__earlier` rules; dark-theme overrides for the new selectors).
---
## [0.6.0] — 2026-05-30 — Pop-out mini-player (continuous background play)
Until v0.5.0 the audio cut every time you navigated between WP admin pages — every navigation is a full page reload, which destroys the `<audio>` element. v0.6.0 fixes the background-music use case by letting you pop the player out into a separate browser window that persists across the parent tab's navigation.
assets/css/radio.css
+83 -23
View File
@@ -359,27 +359,50 @@
padding-top: 0;
}
.radio-about-card--versions ul {
list-style: none;
padding: 12px;
margin: 0;
.radio-about-changelog-link {
display: inline-block;
margin: 0 12px 12px;
font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
}
.radio-about-changelog-link:hover { text-decoration: underline; }
/* ──────────────────────────────────────────────────────────────────
* Version history — full-width card BELOW the top row of cards
* (v0.6.1). Latest release shown in full; earlier releases collapse
* to one line each so the card stays compact however many versions
* ship. Full prose for older versions lives in the CHANGELOG on Gitea.
* ─────────────────────────────────────────────────────────────── */
.radio-about-versions {
max-width: 1100px;
margin-top: 16px;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.radio-about-card--versions li {
margin-bottom: 10px;
.radio-about-versions h2 {
margin: 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
background: #f6f7f7;
border-bottom: 1px solid #c3c4c7;
}
.radio-about-versions__latest {
padding: 12px 12px 8px;
}
.radio-about-versions__latest .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
font-size: 13px;
}
.radio-about-card--versions li:last-child {
margin-bottom: 0;
}
.radio-about-card--versions .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-card--versions .latest {
.radio-about-versions__latest .latest {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
@@ -391,16 +414,47 @@
vertical-align: middle;
}
.radio-about-changelog-link {
display: inline-block;
margin: 0 12px 12px;
.radio-about-versions__latest p {
margin: 6px 0 0;
font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
color: #1d2327;
}
.radio-about-changelog-link:hover {
text-decoration: underline;
.radio-about-versions h3 {
margin: 4px 0 0;
padding: 8px 12px 4px;
font-size: 11px;
font-weight: 600;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.06em;
border-top: 1px solid #f0f0f1;
}
.radio-about-versions__earlier {
list-style: none;
margin: 0;
padding: 4px 12px 8px;
}
.radio-about-versions__earlier li {
padding: 4px 0;
font-size: 13px;
color: #50575e;
}
.radio-about-versions__earlier .ver {
display: inline-block;
min-width: 48px;
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-versions__earlier .ver-date {
display: inline-block;
min-width: 110px;
font-size: 11px;
color: #646970;
}
/* ──────────────────────────────────────────────────────────────────
@@ -450,6 +504,12 @@
color: #f0f0f1;
border-bottom-color: #3c434a;
}
.radio-theme-dark .radio-about-versions { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
.radio-theme-dark .radio-about-versions h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
.radio-theme-dark .radio-about-versions h3 { color: #a7aaad; border-top-color: #3c434a; }
.radio-theme-dark .radio-about-versions__latest p { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier li { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier .ver-date { color: #a7aaad; }
.radio-theme-dark #radio_dashboard_widget .radio-player__credit {
border-top-color: #3c434a;
}
inc/about.php
+38 -46
View File
@@ -2,9 +2,12 @@
/**
* Radio — About page (WP Admin → Radio → About).
*
* Plain-language explanation of what the plugin does + version
* history + link to the CHANGELOG.md on Gitea. Pattern mirrors
* a-buddy/inc/about.php.
* Top row: three short cards (What / Who / Credits) — equal-height,
* balanced layout. Below: a full-width Version history card with the
* latest release shown in full and earlier releases as a one-line
* summary list, capped by a link to the full CHANGELOG on Gitea.
*
* Pattern mirrors a-buddy/inc/about.php.
*/
if ( ! defined( 'ABSPATH' ) ) { exit; }
@@ -19,6 +22,7 @@ function radio_render_about_page() {
<div class="wrap radio-about-wrap">
<h1><?php esc_html_e( 'About Radio', 'radio' ); ?></h1>
<!-- ── Top row: three short cards (What / Who / Credits) ── -->
<div class="radio-about-grid">
<div class="radio-about-card">
@@ -44,49 +48,6 @@ function radio_render_about_page() {
</p>
</div>
<div class="radio-about-card radio-about-card--versions">
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
<ul>
<li>
<span class="ver">v0.6.0</span> &mdash; 30 May 2026 <span class="latest">latest</span><br>
<?php esc_html_e( 'Pop-out mini-player. A small "↗ Pop out" button next to Play opens the player in its own 380×560 window. The popup persists across the main tab\'s navigation, so the music keeps playing while you click around Plugins / Posts / Users. The popup auto-resumes where the main tab left off, pauses the main-tab audio so you don\'t double-stream, and uses the same state + history + favourites as everywhere else.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.5.0</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'Track history + favourites. Every track that scrolls past in the player is now quietly logged to your personal Radio → History page (capped at 500), with a star toggle to keep the good ones forever in a separate Favourites tab. Each row has four search links (Spotify / YouTube / Apple Music / Bandcamp) so you can find that track on whichever service you use. Filter by station, search by artist or title, clear history with a button. Per-user, nothing leaves your site.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.4.0</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'Now-playing visual indicator. Four tiny dancing bars next to "Now Playing" pulse while the audio is playing (pure CSS, always works). On top of that, a Web Audio frequency visualizer tries to draw live frequency bars on a small canvas — if the browser allows it and the stream is CORS-friendly it kicks in automatically; if not, the CSS bars stay and nothing breaks.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.3.2</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'Play-button glyph baseline fix. The dashicon used for play/pause was rendering below the button text. Swapped to a plain Unicode glyph (▶ / ‖) that sits on the text baseline like any other character.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.3.1</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'My Radio layout polish + dropped dark-auto. Player no longer stretches edge-to-edge (max-width 880px); volume slider fixed width so the % label sits next to it; station dropdown capped at 360px; play-button icon shrunk to match the button text baseline; intro paragraph now fits one line. Removed the prefers-color-scheme dark-auto behaviour that was unreadable against WordPress\'s still-white postbox; theme=dark is still available as an explicit choice and now gives the player its own dark surface so it actually reads.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.3.0</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'Dark theme wired through. Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.2.0</span> &mdash; 26 May 2026<br>
<?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.1.0</span> &mdash; 26 May 2026<br>
<?php esc_html_e( 'First release. 44 SomaFM stations grouped by 10 genres, dashboard widget + dedicated admin page, per-user state in user_meta, self-hosted update checker against Gitea. Direct HTML5 audio playback — no proxy, no build step, no tracking.', 'radio' ); ?>
</li>
</ul>
<a class="radio-about-changelog-link"
href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
target="_blank" rel="noopener">
<?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
</a>
</div>
<div class="radio-about-card">
<h2><?php esc_html_e( 'Credits + thanks', 'radio' ); ?></h2>
<p>
@@ -106,7 +67,38 @@ function radio_render_about_page() {
</p>
</div>
</div><!-- /.radio-about-grid -->
<!-- ── Version history: latest in full, earlier as one-liners ── -->
<div class="radio-about-versions">
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
<div class="radio-about-versions__latest">
<span class="ver">v0.6.1</span> &mdash; 30 May 2026 <span class="latest"><?php esc_html_e( 'latest', 'radio' ); ?></span>
<p>
<?php esc_html_e( 'About page restructure. Three short cards on top (What / Who / Credits) now balance the layout; Credits gets equal billing instead of being pushed off the bottom. Version history is its own full-width card below — only the latest release is shown in full; earlier releases collapse to one line each so the card stays compact however many versions ship. Full prose for older versions lives in the CHANGELOG on Gitea.', 'radio' ); ?>
</p>
</div>
<h3><?php esc_html_e( 'Earlier releases', 'radio' ); ?></h3>
<ul class="radio-about-versions__earlier">
<li><span class="ver">v0.6.0</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'Pop-out mini-player — continuous background play across admin navigation', 'radio' ); ?></li>
<li><span class="ver">v0.5.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Track history + favourites (Spotify / YouTube / Apple Music / Bandcamp search links)', 'radio' ); ?></li>
<li><span class="ver">v0.4.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Now-playing indicator — dancing bars + Web Audio frequency visualizer', 'radio' ); ?></li>
<li><span class="ver">v0.3.2</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Play-button glyph baseline fix (dashicon → Unicode ▶ / ‖)', 'radio' ); ?></li>
<li><span class="ver">v0.3.1</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'My Radio layout polish + dropped dark-auto', 'radio' ); ?></li>
<li><span class="ver">v0.3.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Dark theme + mute + OS media keys + SomaFM current-track display', 'radio' ); ?></li>
<li><span class="ver">v0.2.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'UI rebuilt to WordPress admin standards', 'radio' ); ?></li>
<li><span class="ver">v0.1.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'First release — 44 SomaFM stations, dashboard widget + dedicated admin page, per-user state, self-hosted Gitea updater', 'radio' ); ?></li>
</ul>
<a class="radio-about-changelog-link"
href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
target="_blank" rel="noopener">
<?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
</a>
</div>
</div>
<?php
}
radio.php
+2 -2
View File
@@ -5,7 +5,7 @@
* Plugin Name: Radio
* Plugin URI: https://icanhelp.ie/radio
* Description: A small, focused, free radio player for your WordPress admin. 44 SomaFM stations grouped by 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; volume + station choice persist per-user.
* Version: 0.6.0
* Version: 0.6.1
* Requires at least: 5.0
* Requires PHP: 7.4
* Author: David Keane
@@ -20,7 +20,7 @@
if ( ! defined( 'ABSPATH' ) ) { exit; }
// Plugin coordinates.
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.6.0' ); }
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.6.1' ); }
if ( ! defined( 'RADIO_FILE' ) ) { define( 'RADIO_FILE', __FILE__ ); }
if ( ! defined( 'RADIO_PATH' ) ) { define( 'RADIO_PATH', plugin_dir_path( __FILE__ ) ); }
if ( ! defined( 'RADIO_URL' ) ) { define( 'RADIO_URL', plugin_dir_url( __FILE__ ) ); }