diff --git a/README.md b/README.md index 38fd529..d3783f4 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,10 @@ ## 功能 - 選隊伍頁 - - 依指定日期從資料庫讀取分組資料 + - 可依指定日期從資料庫讀取分組資料 - 若當天沒有資料,可手動輸入 A、B 區名單建立分組 - - 成功載入後會在畫面中央顯示 0.5 秒浮動提示 + - 成功載入後會在畫面底部顯示 1 秒浮動提示 + - 對戰名單直接點 `進入記分板` 就會帶入該組 - 記分板頁 - 從所選組別進入記分板 - 設定隊伍彈窗支援兩種方式 diff --git a/src/App.css b/src/App.css index bb61cbb..cb19d1e 100644 --- a/src/App.css +++ b/src/App.css @@ -181,9 +181,9 @@ .floating-status-bubble { position: fixed; left: 50%; - top: 50%; + bottom: 22px; z-index: 60; - transform: translate(-50%, -50%); + transform: translateX(-50%); min-width: min(78vw, 320px); max-width: min(84vw, 420px); padding: 14px 20px; @@ -200,12 +200,12 @@ @keyframes status-bubble-in { from { opacity: 0; - transform: translate(-50%, calc(-50% + 10px)) scale(0.96); + transform: translateX(-50%) translateY(10px) scale(0.96); } to { opacity: 1; - transform: translate(-50%, -50%) scale(1); + transform: translateX(-50%) translateY(0) scale(1); } } @@ -230,6 +230,7 @@ .field { display: grid; gap: 8px; + min-width: 0; } .field span { @@ -253,6 +254,10 @@ min-height: 200px; } +.field input[type='date'] { + min-width: 0; +} + .button-stack { display: grid; gap: 12px; @@ -1356,6 +1361,27 @@ padding: 9px 12px; } + .selection-toolbar { + gap: 12px; + } + + .button-stack { + grid-template-columns: 1fr; + } + + .field input[type='date'] { + max-width: 100%; + font-size: 16px; + } + + .floating-status-bubble { + bottom: 12px; + min-width: min(88vw, 320px); + max-width: 92vw; + padding: 12px 16px; + font-size: 0.92rem; + } + .scoreboard-court { gap: 10px; padding: 8px; diff --git a/src/App.tsx b/src/App.tsx index 9119818..8e489c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -120,7 +120,7 @@ function App() { const timer = window.setTimeout(() => { setLoadMessage('') - }, 500) + }, 1000) return () => window.clearTimeout(timer) }, [loadMessage, loadStatus]) @@ -468,7 +468,6 @@ function App() { onAreaBInputChange={setAreaBInput} onGenerateManualGroups={generateManualGroups} onLoadGroupsFromDb={() => void loadGroupsFromDb()} - onSelectGroup={selectGroup} onTargetDateChange={setTargetDate} onUseGroup={selectGroup} /> @@ -490,7 +489,6 @@ function App() { onAreaBInputChange={setAreaBInput} onGenerateManualGroups={generateManualGroups} onLoadGroupsFromDb={() => void loadGroupsFromDb()} - onSelectGroup={selectGroup} onTargetDateChange={setTargetDate} onUseGroup={selectGroup} /> diff --git a/src/pages/TeamSelectionPage.tsx b/src/pages/TeamSelectionPage.tsx index 21dfb31..64500ed 100644 --- a/src/pages/TeamSelectionPage.tsx +++ b/src/pages/TeamSelectionPage.tsx @@ -15,7 +15,6 @@ type TeamSelectionPageProps = { onAreaBInputChange: (value: string) => void onGenerateManualGroups: () => void onLoadGroupsFromDb: () => void - onSelectGroup: (groupId: number) => void onTargetDateChange: (value: string) => void onUseGroup: (groupId: number) => void } @@ -33,7 +32,6 @@ export function TeamSelectionPage({ onAreaBInputChange, onGenerateManualGroups, onLoadGroupsFromDb, - onSelectGroup, onTargetDateChange, onUseGroup, }: TeamSelectionPageProps) { @@ -124,13 +122,6 @@ export function TeamSelectionPage({