From 4dd315f21f2c204be71ef1859aa2412233420517 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Wed, 22 Oct 2025 16:09:09 +0400 Subject: feat/frontend: tidy up records view on mobile (#283) --- frontend/package.json | 1 + frontend/src/components/Leaderboards.tsx | 7 +++-- frontend/src/components/Sidebar.tsx | 9 +++++-- frontend/src/css/Maps.css | 45 ++++++++++++++++++++++++++++++-- frontend/src/css/Profile.css | 30 +++++++++++++++++++-- frontend/src/pages/Maplist.tsx | 1 - frontend/src/pages/Rankings.tsx | 1 - frontend/src/utils/Time.ts | 28 ++++++++++---------- 8 files changed, 96 insertions(+), 26 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 02b5ee3..946ee40 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "build": "vite build", "preview": "vite preview", "lint": "eslint .", + "lint-fix": "eslint . --fix", "type-check": "tsc -b" }, "devDependencies": { diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index 5d4045a..1a4aa48 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx @@ -9,7 +9,7 @@ import useMessage from "@hooks/UseMessage"; import "@css/Maps.css" interface LeaderboardsProps { - mapID: string; + mapID: string; } const Leaderboards: React.FC = ({ mapID }) => { @@ -25,8 +25,7 @@ const Leaderboards: React.FC = ({ mapID }) => { const { message, MessageDialogComponent } = useMessage(); React.useEffect(() => { - _fetch_map_leaderboards(); - console.log(data); + _fetch_map_leaderboards(); }, [pageNumber, navigate]) if (!data) { @@ -47,7 +46,7 @@ const Leaderboards: React.FC = ({ mapID }) => { return (
- {MessageDialogComponent} + {MessageDialogComponent}
= ({ setToken, profile, setProfile, onUplo setIsMobileSearchOpen(false); }; + const _close_mobile_search_and_menu = () => { + setIsMobileSearchOpen(false); + setIsMobileMenuOpen(false); + }; + const _handle_search_change = async (q: string) => { const searchResponse = await API.get_search(q); setSearchData(searchResponse); @@ -213,7 +218,7 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo
{searchData?.maps.map((q, index) => ( - + {q.game} {q.chapter} {q.map} @@ -224,7 +229,7 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo + } className='search-player' key={index} onClick={_close_mobile_search_and_menu}> pfp {q.user_name} diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css index 4ae6727..66e11c7 100644 --- a/frontend/src/css/Maps.css +++ b/frontend/src/css/Maps.css @@ -1050,7 +1050,21 @@ p>span.portal-count { padding-left: 10px; padding-right: 10px; margin: 0 10px; - min-width: max-content; + display: flex; + justify-content: flex-end; + } + + #leaderboard-top>span, + #leaderboard-top>div#runner { + display: none; + } + + #leaderboard-top>div#page-number { + display: flex; + } + + #section6>hr { + display: none; } .leaderboard-record { @@ -1059,8 +1073,30 @@ p>span.portal-count { padding-right: 10px; margin: 10px 10px 0 10px; width: calc(100% - 20px); - min-width: max-content; box-sizing: border-box; + grid-template-columns: 10% 0% 60% 10% 5% 15% 0% 0% !important; + align-items: center; + } + + .leaderboard-record>div { + display: grid; + align-items: center; + height: 44px; + } + + .leaderboard-record>div>a>span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + display: flex; + align-items: center; + height: 44px; + } + + .leaderboard-record>span:nth-child(7), + .leaderboard-record>span:nth-child(8) { + display: none; } .leaderboard-record:last-child { @@ -1071,6 +1107,11 @@ p>span.portal-count { height: 28px; } + .leaderboard-record>span>button:has(img[alt="download"]), + .leaderboard-record>span>button:has(img[alt="demo_id"]) { + display: none; + } + #page-number>div { width: 80px; } diff --git a/frontend/src/css/Profile.css b/frontend/src/css/Profile.css index 2522602..ccf88f4 100644 --- a/frontend/src/css/Profile.css +++ b/frontend/src/css/Profile.css @@ -385,7 +385,20 @@ span.titles { padding-left: 10px; padding-right: 10px; margin: 0 10px; - min-width: max-content; + display: flex; + justify-content: flex-end; + } + + #profileboard-top>span { + display: none; + } + + #profileboard-top>div#page-number { + display: block; + } + + #section3.profile1>hr { + display: none; } .profileboard-record { @@ -394,8 +407,21 @@ span.titles { padding-right: 10px; margin: 10px; width: calc(100% - 20px); - min-width: max-content; box-sizing: border-box; + grid-template-columns: 28% 14% 9% 24% 5% 18% 0%; + } + + .profileboard-record>span:nth-child(7), + .profileboard-record>span:nth-child(16), + .profileboard-record>span:nth-child(25), + .profileboard-record>span:nth-child(34), + .profileboard-record>span:nth-child(43) { + display: none; + } + + .profileboard-record>span>button:has(img[alt="download"]), + .profileboard-record>span>button:has(img[alt="demo_id"]) { + display: none; } span.titles { diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx index 76f9a52..bda24cd 100644 --- a/frontend/src/pages/Maplist.tsx +++ b/frontend/src/pages/Maplist.tsx @@ -63,7 +63,6 @@ const Maplist: React.FC = () => { const _fetch_game = async () => { const games = await API.get_games(); const foundGame = games.find((game) => game.id === gameId); - // console.log(foundGame) if (foundGame) { setGame(foundGame); setLoad(false); diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx index 12dcab4..4a96e26 100644 --- a/frontend/src/pages/Rankings.tsx +++ b/frontend/src/pages/Rankings.tsx @@ -47,7 +47,6 @@ const Rankings: React.FC = () => { const rankings = await API.get_unofficial_rankings(); setLeaderboardData(rankings); if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { - // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer)) setCurrentLeaderboard(rankings.rankings_singleplayer) } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) { setCurrentLeaderboard(rankings.rankings_multiplayer) diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts index 9cbe793..9844e0c 100644 --- a/frontend/src/utils/Time.ts +++ b/frontend/src/utils/Time.ts @@ -1,30 +1,30 @@ -export function time_ago(date: any) { +export function time_ago(date: Date) { const now = new Date().getTime(); - + const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)); - const seconds = Math.floor((now - localDate.getTime()) / 1000); + const seconds = Math.floor((now - localDate.getTime()) / 1000); let interval = Math.floor(seconds / 31536000); - if (interval === 1) {return interval + " year ago";} - if (interval > 1) {return interval + " years ago";} + if (interval === 1) { return interval + " year ago"; } + if (interval > 1) { return interval + " years ago"; } interval = Math.floor(seconds / 2592000); - if (interval === 1) {return interval + " month ago";} - if (interval > 1) {return interval + " months ago";} + if (interval === 1) { return interval + " month ago"; } + if (interval > 1) { return interval + " months ago"; } interval = Math.floor(seconds / 86400); - if (interval === 1) {return interval + " day ago";} - if (interval > 1) {return interval + " days ago";} + if (interval === 1) { return interval + " day ago"; } + if (interval > 1) { return interval + " days ago"; } interval = Math.floor(seconds / 3600); - if (interval === 1) {return interval + " hour ago";} - if (interval > 1) {return interval + " hours ago";} + if (interval === 1) { return interval + " hour ago"; } + if (interval > 1) { return interval + " hours ago"; } interval = Math.floor(seconds / 60); - if (interval === 1) {return interval + " minute ago";} - if (interval > 1) {return interval + " minutes ago";} + if (interval === 1) { return interval + " minute ago"; } + if (interval > 1) { return interval + " minutes ago"; } - if(seconds < 10) return "just now"; + if (seconds < 10) return "just now"; return Math.floor(seconds) + " seconds ago"; }; -- cgit v1.2.3