WordPress.org
Get WordPress

Plugin Directory

Changeset 3386688


Ignore:
Timestamp:
10/29/2025 10:10:00 PM (5 months ago)
Author:
ganddser
Message:

Fixed issue with android devices not respecting light mode settings stayed in dark mode regardless of user preferences.
FIXED: Elementor "JOAN - On Air Now" widget now registers properly. The earlier JOAN checked for elementor/loaded too soon, causing the widget to never appear. We removed the premature check and now register the widget whenever Elementor is active.
FIXED: Resolved an issue where show titles containing apostrophes accumulated backslashes each time they were edited. Inputs are now unslashed before saving, and existing values are unslashed for the admin interface.

Location:
joan/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • joan/trunk/assets/css/joan.css

    r3374022 r3386688  
    875875    background: white !important;
    876876    color: #333 !important;
     877    /* Prevent browsers (particularly Android/Chrome) from automatically inverting
     878     * colours when the system is in dark mode. Declaring a light colour scheme
     879     * opts these tables out of forced dark mode so that our explicit colours
     880     * remain intact. See https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
     881     * for details.
     882     */
     883    color-scheme: light;
     884}
     885
     886/*
     887 * Use a dedicated header class on schedule table header cells to guarantee
     888 * consistent styling regardless of theme interference. When in light mode
     889 * apply our standard blue header background and opt out of forced dark
     890 * mode. These rules have high specificity to override theme styles.
     891 */
     892.joan-light-mode .joan-schedule-header {
     893    background: #0073aa !important;
     894    color: #ffffff !important;
     895    color-scheme: light;
     896}
     897
     898/* Duplicate specificity for the nuclear option (double class) */
     899.joan-light-mode.joan-light-mode .joan-schedule-header {
     900    background: #0073aa !important;
     901    color: #ffffff !important;
     902    color-scheme: light;
     903}
     904
     905/*
     906 * In dark mode, set a dark background on header cells using our custom
     907 * header class. This mirrors the defaults used for the schedule tables
     908 * themselves. The high specificity ensures consistency in dark mode.
     909 */
     910.joan-dark-mode .joan-schedule-header {
     911    background: #34495e !important;
     912    color: #ffffff !important;
     913}
     914.joan-dark-mode.joan-dark-mode .joan-schedule-header {
     915    background: #34495e !important;
     916    color: #ffffff !important;
    877917}
    878918
    879919.joan-light-mode .joan-schedule-day-table th,
    880920.joan-light-mode table.joan-schedule th {
    881     color: white !important;
     921    /*
     922     * In light mode the overall table background is forced to white. Without
     923     * explicitly setting the header background, the default header colour is
     924     * overridden to white as well, resulting in white text on a white
     925     * background. Restore the primary header background colour and ensure
     926     * header text remains readable.
     927     */
     928    background: #0073aa !important;
     929    color: #ffffff !important;
    882930}
    883931
    … …  
    9911039
    9921040/* Light mode overrides for general schedule table headers */
     1041/*
     1042 * In light mode we explicitly set a coloured background on the table headers of
     1043 * the main schedule table. Without this rule the default dark themed
     1044 * gradient might be inverted by browser auto‑darkening on mobile, leading to
     1045 * white text on a white background. The high specificity and !important
     1046 * flags ensure this rule overrides both the base dark mode styles and any
     1047 * vendor forced dark mode heuristics.
     1048 */
    9931049.joan-light-mode table.joan-schedule th {
    9941050    background: #0073aa !important;
    995     color: white !important;
     1051    color: #ffffff !important;
     1052}
     1053
     1054/*
     1055 * When the dark/light class is added twice to increase specificity (see the
     1056 * “nuclear option” rules below), we still need to restore the coloured
     1057 * header background. Without this override the header inherits only the
     1058 * text colour from the nuclear rule and remains on a white background.
     1059 */
     1060.joan-light-mode.joan-light-mode table.joan-schedule th {
     1061    background: #0073aa !important;
     1062    color: #ffffff !important;
     1063}
     1064
     1065/* Apply the same coloured background to day separated schedule tables. */
     1066.joan-light-mode .joan-schedule-day-table th {
     1067    background: #0073aa !important;
     1068    color: #ffffff !important;
     1069}
     1070
     1071/* Ensure the high specificity override for day tables retains the coloured
     1072 * header when the class is duplicated.
     1073 */
     1074.joan-light-mode.joan-light-mode .joan-schedule-day-table th {
     1075    background: #0073aa !important;
     1076    color: #ffffff !important;
    9961077}
    9971078
    … …  
    14791560    display: block !important;
    14801561}
     1562
     1563/*
     1564 * Final override for schedule headers. By placing these rules at the end of the
     1565 * stylesheet they will supersede earlier declarations with the same
     1566 * specificity. This ensures the "Show / Time / Jock" headings remain
     1567 * visible on all devices, including Android browsers that may apply auto
     1568 * darkening. The light mode version uses our standard blue and opts out of
     1569 * forced dark mode; the dark mode version reuses the default dark header
     1570 * background.
     1571 */
     1572.joan-light-mode .joan-schedule-header,
     1573.joan-light-mode.joan-light-mode .joan-schedule-header {
     1574    background: #0073aa !important;
     1575    color: #ffffff !important;
     1576    color-scheme: light;
     1577}
     1578
     1579.joan-dark-mode .joan-schedule-header,
     1580.joan-dark-mode.joan-dark-mode .joan-schedule-header {
     1581    background: #34495e !important;
     1582    color: #ffffff !important;
     1583}

  • joan/trunk/assets/js/joan.js

    r3374022 r3386688  
    8484   
    8585    function applyDarkMode(isDark) {
    86     const body = document.body;
    87    
    88     if (isDark) {
    89         body.classList.add('joan-dark-mode');
    90         body.classList.remove('joan-light-mode');
    91        
    92         // Apply dark mode to JOAN elements
     86        const body = document.body;
     87        // Define selectors for all JOAN elements that support theme switching
    9388        const selectors = [
    9489            '.joan-now-playing',
    95             '.joan-schedule-container', 
     90            '.joan-schedule-container',
    9691            'table.joan-schedule',
    9792            '.joan-schedule-day-section',
    … …  
    10196            '.joan-schedule-empty-day',
    10297            '.joan-sunday-header',
    103             '.joan-monday-header', 
     98            '.joan-monday-header',
    10499            '.joan-tuesday-header',
    105100            '.joan-wednesday-header',
    … …  
    109104            '.joan-sunday-table',
    110105            '.joan-monday-table',
    111             '.joan-tuesday-table', 
     106            '.joan-tuesday-table',
    112107            '.joan-wednesday-table',
    113108            '.joan-thursday-table',
    114109            '.joan-friday-table',
    115             '.joan-saturday-table'
     110            '.joan-saturday-table',
     111            '.joan-today-highlight',
     112            '.joan-current-show-highlight'
    116113        ];
    117        
     114        // Toggle body classes based on dark/light state
     115        if (isDark) {
     116            body.classList.add('joan-dark-mode');
     117            body.classList.remove('joan-light-mode');
     118        } else {
     119            body.classList.add('joan-light-mode');
     120            body.classList.remove('joan-dark-mode');
     121        }
     122        // Toggle corresponding classes on all JOAN elements
    118123        selectors.forEach(selector => {
    119124            const elements = document.querySelectorAll(selector);
    120125            elements.forEach(element => {
    121                 element.classList.add('joan-dark-mode');
    122                 element.classList.remove('joan-light-mode');
     126                if (isDark) {
     127                    element.classList.add('joan-dark-mode');
     128                    element.classList.remove('joan-light-mode');
     129                } else {
     130                    element.classList.add('joan-light-mode');
     131                    element.classList.remove('joan-dark-mode');
     132                }
    123133            });
    124134        });
    125     } else {
    126         // CRITICAL FIX: Remove ALL JOAN mode classes when not in dark mode
    127         // This allows the theme's native CSS to style tables normally
    128         body.classList.remove('joan-dark-mode', 'joan-light-mode');
    129        
    130         // Remove mode classes from all JOAN elements
    131         const allJoanElements = document.querySelectorAll('[class*="joan-"]');
    132         allJoanElements.forEach(element => {
    133             element.classList.remove('joan-dark-mode', 'joan-light-mode');
    134         });
    135     }
    136 }
     135    }
    137136   
    138137    function addDarkModeToggles(currentState) {

  • joan/trunk/includes/shortcodes.php

    r3375309 r3386688  
    101101   
    102102    echo '><thead><tr>';
    103     echo '<th>' . esc_html__('Show', 'joan') . '</th>';
     103    // Add a specific class to all header cells so we can target them reliably in CSS
     104    echo '<th class="joan-schedule-header">' . esc_html__('Show', 'joan') . '</th>';
    104105   
    105106    // FIXED: Only show Day column when not filtering by specific day
    106107    if ($show_day_column) {
    107         echo '<th>' . esc_html__('Day', 'joan') . '</th>';
    108     }
    109    
    110     echo '<th>' . esc_html__('Time', 'joan') . '</th>';
    111     echo '<th>' . esc_html__('Jock', 'joan') . '</th>';
     108        echo '<th class="joan-schedule-header">' . esc_html__('Day', 'joan') . '</th>';
     109    }
     110   
     111    echo '<th class="joan-schedule-header">' . esc_html__('Time', 'joan') . '</th>';
     112    echo '<th class="joan-schedule-header">' . esc_html__('Jock', 'joan') . '</th>';
    112113    if ($atts['show_images'] === 'yes') {
    113         echo '<th>' . esc_html__('Image', 'joan') . '</th>';
     114        echo '<th class="joan-schedule-header">' . esc_html__('Image', 'joan') . '</th>';
    114115    }
    115116    echo '</tr></thead><tbody>';
    … …  
    205206    echo '<table class="joan-schedule joan-filtered-schedule joan-today-table" data-filter-day="' . esc_attr($today) . '">';
    206207    echo '<thead><tr>';
    207     echo '<th>' . esc_html__('Show', 'joan') . '</th>';
    208     // FIXED: No Day column for today's schedule (redundant)
    209     echo '<th>' . esc_html__('Time', 'joan') . '</th>';
    210     echo '<th>' . esc_html__('Jock', 'joan') . '</th>';
     208    echo '<th class="joan-schedule-header">' . esc_html__('Show', 'joan') . '</th>';
     209    // FIXED: No Day column for today\'s schedule (redundant)
     210    echo '<th class="joan-schedule-header">' . esc_html__('Time', 'joan') . '</th>';
     211    echo '<th class="joan-schedule-header">' . esc_html__('Jock', 'joan') . '</th>';
    211212    if ($atts['show_images'] === 'yes') {
    212         echo '<th>' . esc_html__('Image', 'joan') . '</th>';
     213        echo '<th class="joan-schedule-header">' . esc_html__('Image', 'joan') . '</th>';
    213214    }
    214215    echo '</tr></thead><tbody>';

  • joan/trunk/joan.php

    r3386662 r3386688  
    44 * Plugin URI: https://gandenterprisesinc.com/plugins/joan
    55 * Description: Display your station's current and upcoming on-air schedule in real-time with timezone awareness, Elementor & Visual Composer support, and modern code practices.
    6  * Version: 6.1.1
     6 * Version: 6.1.2
    77 * Author: G & D Enterprises, Inc.
    88 * Author URI: https://gandenterprisesinc.com
    … …  
    1818
    1919// Update plugin version constant to reflect the latest release.
    20 define('JOAN_VERSION', '6.1.1');
     20define('JOAN_VERSION', '6.1.2');
    2121define('JOAN_PLUGIN_DIR', plugin_dir_path(__FILE__));
    2222define('JOAN_PLUGIN_URL', plugin_dir_url(__FILE__));

  • joan/trunk/readme.txt

    r3386662 r3386688  
    66Tested up to: 6.8 
    77Requires PHP: 7.2 
    8 Stable tag: 6.1.1 
     8Stable tag: 6.1.2 
    99License: GPLv2 or later 
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html 
    … …  
    141141== Changelog ==
    142142
     143 = 6.1.2 - 2025-10-29 =
     144
     145* **FIXED**: Resolved persistent schedule header issues on Android by introducing a dedicated `joan-schedule-header` class on all `<th>` cells, then adding late‑loading CSS overrides. These rules force a blue background in light mode and a dark background in dark mode, with `color-scheme: light` to opt out of browser forced dark mode. The headers now remain visible across all devices.
     146
     147
    143148= 6.1.1 - 2025-10-29 =
    144149
    145 * **FIXED**: Elementor "JOAN - On Air Now" widget now registers properly. The earlier JOAN checked for `elementor/loaded` too soon, causing the widget to never appear. We removed the premature check and now register the widget whenever Elementor is active.
     150* **FIXED**: Elementor "JOAN - On Air Now" widget now registers properly. The earlier code checked for `elementor/loaded` too soon, causing the widget to never appear. We removed the premature check and now register the widget whenever Elementor is active.
    146151* **FIXED**: Resolved an issue where show titles containing apostrophes accumulated backslashes each time they were edited. Inputs are now unslashed before saving, and existing values are unslashed for the admin interface.
     152* **FIXED**: WPBakery Page Builder widget integration confirmed and unchanged; no additional fixes were necessary.
     153* **FIXED**: On Android devices in light mode, schedule table headers (Show/Time/Jock) could become invisible because forced dark mode inverted colors. We now explicitly set a colored background on the header cells and opt the schedule tables into a light color scheme. This prevents forced dark mode from overriding the styles and keeps the headers visible across all browsers.
    147154
    148155= 6.1.0 - 2025-10-08 =
Note: See TracChangeset for help on using the changeset viewer.