diff --git a/README.md b/README.md index 7975b69..4f69c9a 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ - 歷史戰績頁 - 直接從資料庫 `history` 表讀取列表 - 點擊任一筆可開啟得分紀錄彈窗 + - 彈窗右上角提供 `X` 關閉按鈕,手機更容易操作 - 每筆資料可單獨刪除 ## 本機開發 diff --git a/src/App.css b/src/App.css index 917bcfb..8fafc13 100644 --- a/src/App.css +++ b/src/App.css @@ -1212,6 +1212,7 @@ } .history-modal { + position: relative; width: min(680px, 100%); display: grid; gap: 16px; @@ -1223,6 +1224,41 @@ inset 0 0 0 2px rgba(200, 140, 46, 0.45); } +.history-modal-close { + position: absolute; + top: 10px; + right: 10px; + width: 44px; + height: 44px; + border: 0; + border-radius: 999px; + cursor: pointer; + font: inherit; + font-size: 1.6rem; + line-height: 1; + color: #b34e3a; + background: linear-gradient(180deg, #ffe5bf, #f0bd7c); + box-shadow: + inset 0 0 0 1px rgba(199, 125, 63, 0.34), + 0 10px 18px rgba(8, 47, 73, 0.16); + transition: + transform 0.16s ease, + box-shadow 0.16s ease, + filter 0.16s ease; +} + +.history-modal-close:hover { + transform: translateY(-1px); + box-shadow: + inset 0 0 0 1px rgba(199, 125, 63, 0.42), + 0 14px 22px rgba(8, 47, 73, 0.2); +} + +.history-modal-close:active { + transform: translateY(0); + filter: brightness(0.98); +} + .history-modal-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx index 89f78cb..b26a4a7 100644 --- a/src/pages/HistoryPage.tsx +++ b/src/pages/HistoryPage.tsx @@ -46,7 +46,7 @@ export function HistoryPage() { const handleDelete = async (item: HistoryListItem) => { const confirmed = window.confirm( - `確定要刪除這筆戰績嗎?\n${item.leftTeamName} vs ${item.rightTeamName}`, + `確定要刪除此筆戰績嗎?\n${item.leftTeamName} vs ${item.rightTeamName}`, ) if (!confirmed) { @@ -74,7 +74,7 @@ export function HistoryPage() {
History
- 這裡會直接讀取資料庫 `history` 表中的比賽紀錄。點擊卡片可查看得分過程,右側按鈕可直接刪除此筆紀錄。 + 這裡會直接從資料庫的 `history` 表讀取比賽紀錄,點開後可查看每一分的得分過程,也能刪除單筆資料。
@@ -82,7 +82,7 @@ export function HistoryPage() { {loading ? (系統正在從資料庫載入歷史列表。
+請稍候,系統正在載入歷史紀錄。
資料庫 `history` 表內還沒有可顯示的紀錄。
+資料庫 `history` 表目前還沒有可顯示的資料。
得分紀錄
這筆資料沒有完整的得分過程。
+這筆戰績沒有可顯示的得分紀錄。
) : ( item.scoreList.map(([round, starter, winCount, winner]) => (