Skip to content

Header/share UI refactor: add header status badge, tweak header styles and responsiveness #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alvin000009238 merged 2 commits into from
Mar 31, 2026
Merged

Header/share UI refactor: add header status badge, tweak header styles and responsiveness #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89fb74e
Unify mobile header skeleton and downgrade readonly indicator
alvin000009238 Mar 31, 2026
d9ce7c0
Merge branch 'dev' into codex/reduce-header-height-for-better-ux
alvin000009238 Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions frontend/share.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
// 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 = '僅供檢視';
Comment on lines +167 to +168

Copilot AI Mar 31, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

body.read-only-mode makes .header-status-badge visible immediately, but checkSharedLink() only sets headerStatusBadge.textContent after a successful fetch. During loading (and on 404/error before redirect) this can render a blank pill in the header. Set the badge text as soon as you enter read-only mode (before the fetch), or update the CSS to keep the badge hidden when it’s empty (e.g., :empty).

Copilot uses AI. Check for mistakes.

if (updateTime) updateTime.textContent = '分享存檔';
} else {
Expand Down
3 changes: 0 additions & 3 deletions frontend/styles/compatibility.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,6 @@

/* Read Only Mode */

body.read-only-mode .time-info,

body.read-only-mode .import-dropdown,

body.read-only-mode #shareBtn,
Expand All @@ -103,4 +101,3 @@ body.read-only-mode .header {
}



19 changes: 19 additions & 0 deletions frontend/styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,25 @@

}

.header-status-badge {
display: none;
align-items: center;
min-height: 24px;
padding: 2px 8px;
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) 60%, transparent);
font-size: 11px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}

body.read-only-mode .header-status-badge {
display: inline-flex;
}

.header-actions {
justify-content: flex-end;
flex-wrap: nowrap;
Expand Down
1 change: 0 additions & 1 deletion frontend/styles/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
5 changes: 3 additions & 2 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</noscript>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
<script src="/theme-init.js"></script>
<link rel="stylesheet" href="/dist/main-D1WLtR6h.css" id="vite-css">
<link rel="stylesheet" href="/dist/main-CYN_M65J.css" id="vite-css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>

Expand Down Expand Up @@ -74,6 +74,7 @@ <h1>成績分析平台</h1>
</div>
</div>
<div class="data-time-box">
<span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
<div class="time-info">

<span class="time-label">資料更新時間</span>
Expand Down Expand Up @@ -524,7 +525,7 @@ <h3 class="section-title">
</footer>
</div>

<script type="module" src="/dist/main-TqLOYhxL.js"></script>
<script type="module" src="/dist/main-AkA2Ib98.js"></script>
</body>

</html>
Loading