feat/frontend: tidy up records view on mobile (#283)

7 files changed, 95 insertions, 26 deletions

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<LeaderboardsProps> = ({ mapID }) => {
@@ -25,8 +25,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ 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<LeaderboardsProps> = ({ mapID }) => {
 
   return (
     <div>
-        {MessageDialogComponent}
+      {MessageDialogComponent}
       <section id='section6' className='summary2'>
 
         <div id='leaderboard-top'
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index eef5bca..c45ec27 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -105,6 +105,11 @@ const Sidebar: React.FC<SidebarProps> = ({ 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<SidebarProps> = ({ setToken, profile, setProfile, onUplo
           <div id='search-data'>
 
             {searchData?.maps.map((q, index) => (
-              <Link to={`/maps/${q.id}`} className='search-map' key={index} onClick={_close_mobile_search}>
+              <Link to={`/maps/${q.id}`} className='search-map' key={index} onClick={_close_mobile_search_and_menu}>
                 <span>{q.game}</span>
                 <span>{q.chapter}</span>
                 <span>{q.map}</span>
@@ -224,7 +229,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
                 <Link to={
                   profile && q.steam_id === profile.steam_id ? "/profile" :
                     `/users/${q.steam_id}`
-                } className='search-player' key={index} onClick={_close_mobile_search}>
+                } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
                   <img src={q.avatar_link} alt='pfp'></img>
                   <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
                 </Link>
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";
 };