From fdaea84d72d5a26f6bc752e12d978594a6e6357f Mon Sep 17 00:00:00 2001 From: peptiderepo Date: Sun, 26 Apr 2026 09:49:32 +0000 Subject: [PATCH] feat: B2 coming-soon badges on inactive tool cards (v2.1.4) - Add 'coming_soon' key to module card definitions - Protocol Builder, Tracker, Subject Log: coming_soon = true - Calculator: fully active (shortcode_exists passes); no badge, no --inactive - New .ps-module-card__badge: absolute top-right pill, --gray-200/--gray-700, Inter 600 10px; layers on top of --inactive dim treatment - position: relative added to .ps-module-card to anchor the badge CMO-approved in thread: 2026-04-site-wide-brand-adoption seq 10 --- CHANGELOG.md | 10 ++++++++++ style.css | 24 +++++++++++++++++++++++- template-parts/module-cards.php | 13 +++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 877ca7e..00baf03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Peptide Starter Theme - Changelog +## [2.1.4] - 2026-04-26 — B2: Coming soon badges on inactive tool cards + +### Added +- `ps-module-card__badge` CSS class — absolute-positioned pill badge overlaid top-right of inactive cards; `--gray-200` bg, `--gray-700` text, Inter 600, 10px, pill shape +- `coming_soon` key in module card definitions; Protocol Builder, Tracker, Subject Log marked `true` +- Badge renders on top of existing `--inactive` visual treatment (dim + no-hover); does not replace it + +### Changed +- `position: relative` added to `.ps-module-card` to enable badge absolute positioning +- Calculator card: `coming_soon` remains `false`; `available` resolves `true` via `shortcode_exists('prc_calculator')` — card now fully active with no dim, no badge, full hover ## [2.0.0-alpha.3] - 2026-04-26 — CMO walkthrough P1 fixes ### Fixed diff --git a/style.css b/style.css index d750e35..d590f3e 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter Description: Premium, accessible WordPress theme for scientific peptide reference database Author: Peptide Repo Author URI: https://peptiderepo.com -Version: 2.1.3 +Version: 2.1.4 License: GPL v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: peptide-starter @@ -2533,6 +2533,7 @@ html[data-theme="light"] { text-decoration: none; color: var(--color-text-primary); transition: all var(--transition-normal); + position: relative; /* Required for .ps-module-card__badge absolute positioning */ } .ps-module-card:hover { @@ -2546,6 +2547,27 @@ html[data-theme="light"] { pointer-events: none; } +/* + * "Coming soon" badge — overlays top-right corner of inactive tool cards. + * Layered on top of --inactive treatment (dim + no-hover); does not replace it. + * Spec: Inter 600, 10px, --gray-200 bg, --gray-700 text, pill shape. + */ +.ps-module-card__badge { + position: absolute; + top: var(--spacing-md); + right: var(--spacing-md); + padding: 2px 8px; + background-color: var(--gray-200); + color: var(--gray-700); + border-radius: var(--radius-pill); + font-family: var(--font-sans); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.03em; + line-height: 1.6; + pointer-events: none; /* Badge is presentational; card's pointer-events handles clicks */ +} + .ps-module-card__icon { display: flex; align-items: center; diff --git a/template-parts/module-cards.php b/template-parts/module-cards.php index 83e65db..0acb329 100644 --- a/template-parts/module-cards.php +++ b/template-parts/module-cards.php @@ -4,6 +4,8 @@ * * Renders a 6-card grid of research modules (tools/sections) for the front page. * Each card checks if the target plugin is active; inactive cards are dimmed. + * Cards with 'coming_soon' => true display a "Coming soon" badge overlaid in + * the top-right corner — layered on top of the --inactive visual treatment. * * @see front-page.php — includes this template part * @see style.css — .ps-module-* classes @@ -21,6 +23,8 @@ if ( ! defined( 'ABSPATH' ) ) { } // Module card definitions with shortcode checks for graceful degradation. +// 'coming_soon' => true adds a "Coming soon" badge without removing existing +// --inactive styling — the badge layers on top of the dim/no-hover treatment. $modules = array( array( 'title' => __( 'Peptides', 'peptide-starter' ), @@ -28,6 +32,7 @@ $modules = array( 'url' => '/peptides', 'icon' => '', 'available' => shortcode_exists( 'peptide_directory' ) || post_type_exists( 'peptide' ), + 'coming_soon' => false, ), array( 'title' => __( 'Calculator', 'peptide-starter' ), @@ -35,6 +40,7 @@ $modules = array( 'url' => '/calculator', 'icon' => '', 'available' => shortcode_exists( 'prc_calculator' ), + 'coming_soon' => false, ), array( 'title' => __( 'Protocol Builder', 'peptide-starter' ), @@ -42,6 +48,7 @@ $modules = array( 'url' => '/protocol-builder', 'icon' => '', 'available' => shortcode_exists( 'peptide_tools_protocol_builder' ), + 'coming_soon' => true, ), array( 'title' => __( 'Tracker', 'peptide-starter' ), @@ -49,6 +56,7 @@ $modules = array( 'url' => '/tracker', 'icon' => '', 'available' => shortcode_exists( 'peptide_tracker' ), + 'coming_soon' => true, ), array( 'title' => __( 'Science Feed', 'peptide-starter' ), @@ -56,6 +64,7 @@ $modules = array( 'url' => '/news', 'icon' => '', 'available' => shortcode_exists( 'peptide_news' ), + 'coming_soon' => false, ), array( 'title' => __( 'Subject Log', 'peptide-starter' ), @@ -63,6 +72,7 @@ $modules = array( 'url' => '/subject-log', 'icon' => '', 'available' => shortcode_exists( 'peptide_tracker_subject_log' ), + 'coming_soon' => true, ), ); ?> @@ -80,6 +90,9 @@ $modules = array( + + +