Skip to content

Refactor header styles and improve responsiveness for better UX #108

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 30 commits into from
Apr 1, 2026
Merged

Refactor header styles and improve responsiveness for better UX #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
63b8899
Compact header spacing and mobile layout
alvin000009238 Mar 31, 2026
6f885f8
Make header compact and resilient on narrow screens
alvin000009238 Mar 31, 2026
6d86ac7
Stabilize header layout strategy across breakpoints
alvin000009238 Mar 31, 2026
2c8d37f
Merge pull request #101 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
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
47a5035
Merge pull request #102 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
b9f72a5
Refine readonly badge placement and header alignment
alvin000009238 Mar 31, 2026
0951fb0
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-d99l1w
alvin000009238 Mar 31, 2026
10f6eca
Merge pull request #103 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
8252d9e
Refactor header styles for improved user experience
alvin000009238 Mar 31, 2026
126db00
Keep read-only timestamp anchored at left in header
alvin000009238 Mar 31, 2026
69f46b6
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-cmpi18
alvin000009238 Mar 31, 2026
db7b120
Merge pull request #104 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
b116b37
Align read-only time baseline with header action buttons
alvin000009238 Mar 31, 2026
0d9de3f
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-jmpkiv
alvin000009238 Mar 31, 2026
8091cc6
Merge pull request #105 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
9f1cd5b
Apply centered time row alignment in normal and read-only headers
alvin000009238 Mar 31, 2026
9da01d0
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-sokajx
alvin000009238 Mar 31, 2026
e56f639
Merge pull request #106 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
87f6685
Rename rightmost header action to 載入成績
alvin000009238 Mar 31, 2026
c2a5337
Keep rightmost sync button text visible on small screens
alvin000009238 Mar 31, 2026
a302c0d
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-l3icpc
alvin000009238 Mar 31, 2026
518ed78
Merge pull request #107 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Mar 31, 2026
9f1e1d1
Use class-based status badge updates to avoid duplicate-id issues
alvin000009238 Mar 31, 2026
6e18f6a
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-vbfbwp
alvin000009238 Mar 31, 2026
90c8d33
Merge pull request #109 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Apr 1, 2026
a9289c0
Consolidate single status badge owner and restore time semantics
alvin000009238 Apr 1, 2026
d027163
Merge branch 'dev' into codex/reduce-header-height-for-better-ux-w2l7ar
alvin000009238 Apr 1, 2026
fe7ebdf
Merge pull request #110 from alvin000009238/codex/reduce-header-heigh…
alvin000009238 Apr 1, 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 = '僅供檢視';

if (updateTime) updateTime.textContent = '分享存檔';
} else {
Expand Down
20 changes: 4 additions & 16 deletions frontend/styles/compatibility.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -102,5 +88,7 @@ body.read-only-mode .header {

}



body.read-only-mode .data-time-box {
width: 100%;
justify-content: space-between;
}
123 changes: 97 additions & 26 deletions frontend/styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

z-index: 100;

padding: 14px 0;
padding: 10px 0;

margin: 0 -24px 40px;

Expand Down Expand Up @@ -36,9 +36,9 @@

align-items: center;

flex-wrap: wrap;
flex-wrap: nowrap;

gap: 16px;
gap: 12px;

max-width: 1200px;

Expand All @@ -56,6 +56,14 @@

gap: 12px;

min-width: 0;

flex: 1 1 auto;

}

.header-title-group {
min-width: 0;
}


Expand All @@ -68,9 +76,9 @@

justify-content: center;

width: 36px;
width: 32px;

height: 36px;
height: 32px;

background: var(--color-primary);

Expand All @@ -86,9 +94,9 @@

.logo-icon svg {

width: 20px;
width: 18px;

height: 20px;
height: 18px;

}

Expand All @@ -98,6 +106,8 @@

font-size: 20px;

line-height: 1.2;

font-weight: 600;

color: var(--color-text-main);
Expand All @@ -112,6 +122,14 @@

background-clip: unset;

margin: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}


Expand All @@ -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;
}


Expand All @@ -136,9 +173,9 @@

display: flex;

align-items: center;
align-items: flex-end;

gap: 12px;
gap: 10px;

position: relative;

Expand All @@ -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 {
Expand All @@ -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;

}
Comment on lines +249 to 260

Copilot AI Apr 1, 2026

Copy link

Choose a reason for hiding this comment

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

.time-label is now display: none unconditionally, which removes the visible (and screen-reader) context for what #updateTime represents. If the label should be visually hidden for layout reasons, consider keeping it accessible (e.g., via a visually-hidden utility) or adding an aria-label/aria-labelledby relationship so the update time still has a meaningful accessible name.

Copilot uses AI. Check for mistakes.

Expand All @@ -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;

Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -484,4 +556,3 @@ visibility: visible;
color: var(--color-text-muted);

}

59 changes: 46 additions & 13 deletions frontend/styles/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

}

Expand Down Expand Up @@ -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;

Copilot AI Apr 1, 2026

Copy link

Choose a reason for hiding this comment

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

On small screens, .time-label { display: none; } hides the element that #updateTime references via aria-labelledby="updateTimeLabel". When the referenced label is display:none, many screen readers/browsers won't expose it, which can break the accessible name for the update time. Prefer keeping the label visually-hidden (like the .time-label definition in header.css) rather than display:none.

Suggested change
display: none;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;

Copilot uses AI. Check for mistakes.
}

.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;
Expand Down Expand Up @@ -194,4 +228,3 @@
}

}

5 changes: 2 additions & 3 deletions frontend/styles/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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; }
Loading
Loading