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

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:
2026-05-30 00:25:12 +01:00
parent 0dc3a220d9
commit 7a747b829b
4 changed files with 136 additions and 71 deletions
+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
}