Test_Project_Web/badminton-scoreboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

調整記分板手機滿版模式並更新說明

Browse Source
This commit is contained in:
建喵
2026-04-28 18:17:41 +08:00
parent f3e51ea83d
commit 30a8e1a44c
5 changed files with 146 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+118 -50
View File
@@ -9,6 +9,13 @@
padding-top: 16px;
}
.app-shell-scoreboard-fit {
min-height: 100dvh;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.topbar {
display: flex;
justify-content: space-between;
@@ -487,6 +494,8 @@
grid-template-columns: minmax(0, 1fr) 160px;
gap: 14px;
align-items: start;
min-height: 0;
height: 100%;
}
.streak-banner {
@@ -625,6 +634,7 @@
.scoreboard-court {
display: grid;
gap: 14px;
min-height: 0;
padding: 12px;
border-radius: 22px;
background:
@@ -1782,6 +1792,12 @@
padding-top: 10px;
}
.app-shell-scoreboard-fit {
min-height: 100dvh;
padding-top: max(8px, env(safe-area-inset-top));
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.panel {
padding: 16px;
border-radius: 18px;
@@ -1850,6 +1866,31 @@
border-radius: 16px;
}
.app-shell-scoreboard-fit .topbar-compact {
gap: 6px;
margin-bottom: 6px;
}
.app-shell-scoreboard-fit .eyebrow {
margin-bottom: 6px;
padding: 6px 10px;
font-size: 0.66rem;
}
.app-shell-scoreboard-fit .branding h1 {
margin: 8px 0 6px;
font-size: 1.12rem;
}
.app-shell-scoreboard-fit .topnav {
gap: 6px;
}
.app-shell-scoreboard-fit .nav-pill {
padding: 7px 10px;
font-size: 0.82rem;
}
.streak-banner {
top: 12%;
min-width: min(92vw, 360px);
@@ -1888,19 +1929,19 @@
.scoreboard-team-head {
grid-template-columns: minmax(0, 1fr) 54px;
gap: 6px;
gap: 5px;
}
.team-head-main {
gap: 6px;
min-height: 52px;
padding: 6px;
gap: 5px;
min-height: 46px;
padding: 5px;
}
.scoreboard-name-chip {
gap: 6px;
min-height: 38px;
padding: 4px 6px;
gap: 5px;
min-height: 34px;
padding: 3px 5px;
}
.serve-lane-arrow {
@@ -1908,87 +1949,87 @@
}
.team-number {
width: 28px;
height: 28px;
flex-basis: 28px;
font-size: 0.9rem;
width: 24px;
height: 24px;
flex-basis: 24px;
font-size: 0.82rem;
}
.scoreboard-name-chip strong {
font-size: clamp(0.82rem, 4vw, 1.1rem);
font-size: clamp(0.76rem, 3.6vw, 1rem);
}
.team-icon-button {
min-height: 32px;
font-size: 1rem;
min-height: 30px;
font-size: 0.94rem;
}
.serve-lane {
grid-template-columns: 28px auto;
min-height: 38px;
padding: 6px 8px;
font-size: 0.92rem;
min-height: 34px;
padding: 4px 6px;
font-size: 0.86rem;
}
.serve-lane small {
grid-column: 1 / -1;
justify-self: start;
font-size: 0.78rem;
font-size: 0.72rem;
}
.score-panel-surface {
min-height: 112px;
min-height: clamp(90px, 15.5dvh, 104px);
}
.score-panel-value {
font-size: clamp(3.5rem, 18vw, 5.4rem);
font-size: clamp(3rem, 15vw, 4.6rem);
}
.scoreboard-center-banner {
gap: 4px;
gap: 2px;
}
.scoreboard-center-banner p {
font-size: 1.25rem;
font-size: 1.02rem;
}
.scoreboard-center-banner small {
font-size: 0.78rem;
font-size: 0.7rem;
text-align: center;
}
.scoreboard-rail {
grid-template-columns: minmax(0, 1fr) 108px 118px;
gap: 8px;
}
.rail-square-button {
min-height: 42px;
font-size: 0.95rem;
}
.rail-clock {
min-height: 42px;
border-radius: 10px;
font-size: 1.1rem;
}
.rail-room-id {
padding: 8px 10px;
font-size: 0.86rem;
}
.rail-pill {
padding: 10px 8px;
font-size: 0.92rem;
}
.rail-pill-hold-wrap {
grid-template-columns: minmax(0, 1fr) 94px 106px;
gap: 6px;
}
.rail-square-button {
min-height: 38px;
font-size: 0.84rem;
}
.rail-clock {
min-height: 38px;
border-radius: 10px;
font-size: 0.96rem;
}
.rail-room-id {
padding: 7px 8px;
font-size: 0.76rem;
}
.rail-pill {
padding: 8px 7px;
font-size: 0.82rem;
}
.rail-pill-hold-wrap {
gap: 4px;
}
.rail-hold-progress {
height: 6px;
height: 5px;
}
.finish-dialog {
@@ -2171,6 +2212,33 @@
}
}
@media (max-width: 720px) and (max-height: 840px) {
.app-shell-scoreboard-fit .scoreboard-screen {
gap: 5px;
}
.app-shell-scoreboard-fit .scoreboard-court {
gap: 8px;
padding: 6px;
}
.app-shell-scoreboard-fit .scoreboard-team-section {
gap: 5px;
}
.app-shell-scoreboard-fit .score-panel-surface {
min-height: clamp(82px, 14.2dvh, 96px);
}
.app-shell-scoreboard-fit .score-panel-value {
font-size: clamp(2.7rem, 13.5vw, 4.1rem);
}
.app-shell-scoreboard-fit .scoreboard-center-banner p {
font-size: 0.96rem;
}
}
.room-list-grid {
display: grid;
gap: 16px;
src/App.tsx
+9 -1
View File
@@ -219,6 +219,14 @@ function App() {
return () => window.clearTimeout(timer)
}, [navigationLockMessage])
useEffect(() => {
document.body.classList.toggle('body-scoreboard', isScoreboardRoute)
return () => {
document.body.classList.remove('body-scoreboard')
}
}, [isScoreboardRoute])
useEffect(() => {
const handlePwaUpdateReady = () => {
setPwaUpdateReady(true)
@@ -908,7 +916,7 @@ function App() {
}
return (
<div className={isScoreboardRoute ? 'app-shell app-shell-scoreboard' : 'app-shell'}>
<div className={isScoreboardRoute ? 'app-shell app-shell-scoreboard app-shell-scoreboard-fit' : 'app-shell'}>
<header className={isScoreboardRoute ? 'topbar topbar-compact' : 'topbar'}>
<div className="branding">
<p className="eyebrow">Badminton Scoreboard</p>
src/index.css
+10
View File
@@ -37,6 +37,11 @@ body {
linear-gradient(180deg, var(--page-bg), var(--page-bg-2));
}
body.body-scoreboard {
overflow: hidden;
overscroll-behavior: none;
}
body::before {
content: '';
position: fixed;
@@ -53,6 +58,11 @@ body::before {
min-height: 100vh;
}
body.body-scoreboard #root {
min-height: 100dvh;
overflow: hidden;
}
input,
textarea,
select,