From a8fe4477f1ed7f6f6900b496206bcd545c689bc6 Mon Sep 17 00:00:00 2001 From: Tudor Date: Tue, 13 Jan 2026 15:12:11 +0000 Subject: [PATCH] Added warning about lack of progress results, moved add to compare button --- .gitignore | 1 + frontend/app.js | 61 +++++++++++++++++++++++++++++++++--------- frontend/index.html | 2 +- frontend/styles.css | 65 ++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 113 insertions(+), 16 deletions(-) diff --git a/.gitignore b/.gitignore index 5ceb386..100ba7f 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ venv +backend/__pycache__ diff --git a/frontend/app.js b/frontend/app.js index 6eaa211..5bd3c55 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -118,6 +118,15 @@ const TERM_DEFINITIONS = { }, }; +// Warning definitions for alerts/notices +const WARNING_DEFINITIONS = { + progress_scores_unavailable: { + title: "Progress Scores Unavailable", + description: + "The DfE will not publish primary school progress measures for 2023-24 or 2024-25, as KS1 SATs were cancelled in 2020 and 2021.", + }, +}; + /** * Creates an info trigger button for a term tooltip * @param {string} termKey - Key from TERM_DEFINITIONS @@ -132,6 +141,20 @@ function createInfoTrigger(termKey) { return ``; } +/** + * Creates a warning trigger button for warning tooltips + * @param {string} warningKey - Key from WARNING_DEFINITIONS + * @returns {string} HTML string for the warning trigger + */ +function createWarningTrigger(warningKey) { + const definition = WARNING_DEFINITIONS[warningKey]; + if (!definition) return ""; + + const label = definition.title; + + return ``; +} + // Map instances (stored to allow cleanup) const schoolMaps = new Map(); @@ -1368,7 +1391,7 @@ async function openSchoolModal(urn) {
-

Progress Scores

+

Progress Scores ${createWarningTrigger("progress_scores_unavailable")}

${formatMetricValue(latest.reading_progress, "reading_progress")}
@@ -1908,7 +1931,7 @@ class TooltipManager { handleMouseEnter(e) { if (!e.target || !e.target.closest) return; - const trigger = e.target.closest(".info-trigger"); + const trigger = e.target.closest(".info-trigger, .warning-trigger"); if (!trigger) return; clearTimeout(this.hideTimeout); @@ -1919,7 +1942,7 @@ class TooltipManager { handleMouseLeave(e) { if (!e.target || !e.target.closest) return; - const trigger = e.target.closest(".info-trigger"); + const trigger = e.target.closest(".info-trigger, .warning-trigger"); const tooltip = e.target.closest(".tooltip"); if (!trigger && !tooltip) return; @@ -1927,7 +1950,7 @@ class TooltipManager { // Check if moving between trigger and tooltip const relatedTarget = e.relatedTarget; if ( - relatedTarget?.closest?.(".info-trigger") === this.activeTooltip || + relatedTarget?.closest?.(".info-trigger, .warning-trigger") === this.activeTooltip || relatedTarget?.closest?.(".tooltip") ) { return; @@ -1941,7 +1964,7 @@ class TooltipManager { handleFocusIn(e) { if (!e.target || !e.target.closest) return; - const trigger = e.target.closest(".info-trigger"); + const trigger = e.target.closest(".info-trigger, .warning-trigger"); if (!trigger) return; clearTimeout(this.hideTimeout); @@ -1950,7 +1973,7 @@ class TooltipManager { handleFocusOut(e) { if (!e.target || !e.target.closest) return; - const trigger = e.target.closest(".info-trigger"); + const trigger = e.target.closest(".info-trigger, .warning-trigger"); if (!trigger) return; this.hideTimeout = setTimeout(() => { @@ -1959,7 +1982,7 @@ class TooltipManager { } handleTouchClick(e) { - const trigger = e.target.closest(".info-trigger"); + const trigger = e.target.closest(".info-trigger, .warning-trigger"); if (trigger) { e.preventDefault(); @@ -1980,12 +2003,26 @@ class TooltipManager { } show(trigger) { - const termKey = trigger.dataset.term; - const definition = TERM_DEFINITIONS[termKey]; + // Check if it's an info trigger or warning trigger + const isWarning = trigger.classList.contains("warning-trigger"); + let definition; - if (!definition) { - console.warn(`No definition found for term: ${termKey}`); - return; + if (isWarning) { + const warningKey = trigger.dataset.warning; + definition = WARNING_DEFINITIONS[warningKey]; + if (!definition) { + console.warn(`No definition found for warning: ${warningKey}`); + return; + } + this.tooltipEl.classList.add("tooltip-warning"); + } else { + const termKey = trigger.dataset.term; + definition = TERM_DEFINITIONS[termKey]; + if (!definition) { + console.warn(`No definition found for term: ${termKey}`); + return; + } + this.tooltipEl.classList.remove("tooltip-warning"); } // Build tooltip content diff --git a/frontend/index.html b/frontend/index.html index 3f90f6f..8550644 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -327,10 +327,10 @@
+ -
diff --git a/frontend/styles.css b/frontend/styles.css index 00e907a..fb92688 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -1059,6 +1059,7 @@ body { } .modal-header { + position: relative; padding: 2rem 2rem 1rem; border-bottom: 1px solid var(--border-color); } @@ -1069,7 +1070,7 @@ body { font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; - padding-right: 3rem; + padding-right: 10rem; } .modal-meta { @@ -1088,8 +1089,10 @@ body { margin-bottom: 0.25rem; } -.modal-header .btn { - margin-top: 1rem; +.modal-compare-btn { + position: absolute; + top: 2rem; + right: 2rem; } .modal-details .modal-age-range { @@ -1517,6 +1520,62 @@ body { opacity: 0.8; } +/* Warning Trigger Button */ +.warning-trigger { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + margin-left: 0.5rem; + background: none; + border: none; + cursor: help; + color: var(--accent-coral); + opacity: 0.8; + transition: var(--transition); + vertical-align: middle; + border-radius: 4px; +} + +.warning-trigger:hover, +.warning-trigger:focus { + opacity: 1; +} + +.warning-trigger:focus { + outline: none; + box-shadow: 0 0 0 2px var(--accent-coral); +} + +.warning-trigger:focus:not(:focus-visible) { + box-shadow: none; +} + +.warning-trigger:focus-visible { + box-shadow: 0 0 0 2px var(--accent-coral); +} + +/* Warning Icon SVG */ +.warning-icon { + width: 14px; + height: 14px; + flex-shrink: 0; +} + +/* Warning Tooltip Styling */ +.tooltip.tooltip-warning { + background: #8b4513; + border-left: 3px solid var(--accent-coral); +} + +.tooltip.tooltip-warning[data-placement="top"]::after { + border-top-color: #8b4513; +} + +.tooltip.tooltip-warning[data-placement="bottom"]::after { + border-bottom-color: #8b4513; +} + /* Label wrapper for inline icon */ .stat-label-with-info { display: inline-flex;