From a9289c0dd263c472345bb716c6f14ecfb693bb7d Mon Sep 17 00:00:00 2001 From: BST <107313913+alvin000009238@users.noreply.github.com> Date: Wed, 1 Apr 2026 11:00:49 +0800 Subject: [PATCH] Consolidate single status badge owner and restore time semantics --- frontend/share.js | 10 +-- frontend/styles/compatibility.css | 20 +---- frontend/styles/header.css | 121 ++++++++++++++++++++++++------ frontend/styles/responsive.css | 59 +++++++++++---- frontend/styles/utilities.css | 5 +- public/index.html | 22 +++--- 6 files changed, 163 insertions(+), 74 deletions(-) diff --git a/frontend/share.js b/frontend/share.js index 51422e2..77347ef 100644 --- a/frontend/share.js +++ b/frontend/share.js @@ -164,14 +164,8 @@ export async function checkSharedLink() { if (data.success) { initDashboard(data.data); - // Add header indicator - const header = document.querySelector('.header-content'); - const indicator = document.createElement('div'); - indicator.className = 'share-indicator'; - indicator.innerHTML = '僅供檢視 (唯讀)'; - // Insert before data-time-box - const timeBox = document.querySelector('.data-time-box'); - header.insertBefore(indicator, timeBox); + const headerStatusBadge = document.getElementById('headerStatusBadge'); + if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視'; if (updateTime) updateTime.textContent = '分享存檔'; } else { diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css index eb0cfb3..6daaaad 100644 --- a/frontend/styles/compatibility.css +++ b/frontend/styles/compatibility.css @@ -66,22 +66,8 @@ -.share-indicator { - - display: flex; - - align-items: center; - - margin-right: 12px; - -} - - - /* Read Only Mode */ -body.read-only-mode .time-info, - body.read-only-mode .import-dropdown, body.read-only-mode #shareBtn, @@ -102,5 +88,7 @@ body.read-only-mode .header { } - - +body.read-only-mode .data-time-box { + width: 100%; + justify-content: space-between; +} diff --git a/frontend/styles/header.css b/frontend/styles/header.css index 309a289..39fcd35 100644 --- a/frontend/styles/header.css +++ b/frontend/styles/header.css @@ -8,7 +8,7 @@ z-index: 100; - padding: 14px 0; + padding: 10px 0; margin: 0 -24px 40px; @@ -36,9 +36,9 @@ align-items: center; - flex-wrap: wrap; + flex-wrap: nowrap; - gap: 16px; + gap: 12px; max-width: 1200px; @@ -56,6 +56,14 @@ gap: 12px; + min-width: 0; + + flex: 1 1 auto; + +} + +.header-title-group { + min-width: 0; } @@ -68,9 +76,9 @@ justify-content: center; - width: 36px; + width: 32px; - height: 36px; + height: 32px; background: var(--color-primary); @@ -86,9 +94,9 @@ .logo-icon svg { - width: 20px; + width: 18px; - height: 20px; + height: 18px; } @@ -98,6 +106,8 @@ font-size: 20px; + line-height: 1.2; + font-weight: 600; color: var(--color-text-main); @@ -112,6 +122,14 @@ background-clip: unset; + margin: 0; + + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; + } @@ -122,10 +140,29 @@ font-size: 12px; - margin-top: 1px; + line-height: 1.2; + + margin: 1px 0 0; font-weight: 400; + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; + + flex: 1 1 auto; + + min-width: 0; + +} + +.subtitle-row { + display: flex; + align-items: baseline; + gap: 6px; + min-width: 0; } @@ -138,7 +175,7 @@ align-items: center; - gap: 12px; + gap: 10px; position: relative; @@ -152,6 +189,32 @@ backdrop-filter: none; + min-width: 0; + +} + +.header-status-badge { + display: none; + align-items: center; + min-height: 18px; + padding: 1px 6px; + border: 1px solid var(--color-warning-muted); + border-radius: var(--radius-pill); + color: var(--color-warning); + background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent); + font-size: 10px; + font-weight: 500; + line-height: 1.2; + white-space: nowrap; + flex-shrink: 0; +} + +body.read-only-mode .header-status-badge { + display: inline-flex; +} + +body.read-only-mode .header-status-badge:empty { + display: none; } .header-actions { @@ -165,29 +228,34 @@ display: flex; - flex-direction: column; + flex-direction: row; gap: 0; + min-height: 36px; + padding-right: 12px; border-right: 1px solid var(--color-border-subtle); -} - - - -.time-label { + align-items: center; - font-size: 10px; + justify-content: center; - color: var(--color-text-muted); +} - font-weight: 500; - letter-spacing: 0.05em; - text-transform: uppercase; +.time-label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } @@ -197,9 +265,13 @@ font-size: 12px; + line-height: 1.2; + font-weight: 500; - color: var(--color-text-secondary); + color: var(--color-text-muted); + + opacity: 0.78; font-variant-numeric: tabular-nums; @@ -241,15 +313,15 @@ gap: 8px; - height: 40px; + min-height: 36px; - padding: 0 18px; + padding: 0 14px; background: var(--color-primary); border: none; - border-radius: var(--radius-pill); + border-radius: var(--radius-sm); color: var(--md-sys-color-on-primary); @@ -484,4 +556,3 @@ visibility: visible; color: var(--color-text-muted); } - diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css index b358f42..a9c8152 100644 --- a/frontend/styles/responsive.css +++ b/frontend/styles/responsive.css @@ -22,21 +22,11 @@ - .header-content { - - flex-direction: column; - - align-items: flex-start; - - } - - - .data-time-box { - align-self: stretch; + justify-content: flex-end; - justify-content: space-between; + gap: 8px; } @@ -161,6 +151,50 @@ @media (max-width: 480px) { + .header { + margin-bottom: 20px; + } + + .header-content { + flex-wrap: wrap; + gap: 8px; + } + + .data-time-box { + width: 100%; + justify-content: space-between; + flex-wrap: wrap; + } + + .time-label { + display: none; + } + + .time-info { + padding-right: 8px; + } + + .time-value { + font-size: 11px; + } + + .header-actions .import-dropdown-btn { + min-width: 36px; + padding: 0 10px; + } + + .header-actions .import-dropdown-btn > span:last-child { + display: none; + } + + .header-actions #syncBtn > span:last-child { + display: inline; + } + + .header-actions { + flex-wrap: wrap; + } + .student-details { flex-direction: column; @@ -194,4 +228,3 @@ } } - diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css index b6c177c..65e48be 100644 --- a/frontend/styles/utilities.css +++ b/frontend/styles/utilities.css @@ -75,8 +75,8 @@ } .theme-toggle-btn { - width: 40px; - height: 40px; + width: 36px; + height: 36px; padding: 0; justify-content: center; background: var(--color-surface-elevated); @@ -103,5 +103,4 @@ .mb-12 { margin-bottom: 12px; } .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); } .w-full-center { width: 100%; justify-content: center; } -.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; } .mono { font-family: monospace; } diff --git a/public/index.html b/public/index.html index 26933f0..24a34fa 100644 --- a/public/index.html +++ b/public/index.html @@ -40,7 +40,7 @@ - + @@ -68,16 +68,19 @@

中大壢中成績分析平台

-
+

成績分析平台

-

--

+
+

--

+ +
- 資料更新時間 - -- + 資料更新時間 + --
- -
@@ -523,7 +527,7 @@

- +