improve mobile experience

ASSERT-KTH · Sep 20, 2024 · a231bd1 · a231bd1
1 parent 9e8c545
commit a231bd1
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 15 deletions.
diff --git a/webpage/src/App.css b/webpage/src/App.css
@@ -14,11 +14,14 @@
   min-height: 5vh;
   color: black;
   background-color: transparent; /* Remove the background color */
+  padding: 10px;
 }
 
 .App-header-content {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .App-link {
@@ -33,3 +36,19 @@
     transform: rotate(360deg);
   }
 }
+
+.App-header h1 {
+  font-size: 1.5rem;
+  margin: 10px 0;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .App-logo {
+    height: 40px;
+  }
+
+  .App-header h1 {
+    font-size: 1.2rem;
+  }
+}
diff --git a/webpage/src/components/LeaderboardTable.css b/webpage/src/components/LeaderboardTable.css
@@ -1,16 +1,17 @@
 /* src/components/LeaderboardTable.css */
 .leaderboard-table-container {
-    padding: 0 40px;
-    max-width: 1200px;
+    padding: 0 20px;
+    max-width: 100%;
+    overflow-x: auto;
     margin: 0 auto;
 }
 
 .leaderboard-table {
     width: 100%;
+    min-width: 1000px; /* Increased to accommodate full column names */
     border-collapse: collapse;
-    max-width: 1000px; /* Add this line */
-    margin: 20px auto; /* Update this line */
-    font-size: 1em;
+    margin: 20px auto;
+    font-size: 0.9em;
     text-align: left;
   }
 
@@ -22,10 +23,9 @@
 
   .table-header {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 150px; /* Adjust as needed */
     text-align: center;
+    position: relative;
+    padding: 8px 25px 8px 8px;
   }
 
   .column-header {
@@ -35,7 +35,11 @@
   }
 
   .sort-indicator {
-    margin-left: 5px;
+    flex-shrink: 0;
+    position: absolute; /* Add this */
+    right: 5px; /* Add this */
+    top: 50%; /* Add this */
+    transform: translateY(-50%); /* Add this */
     opacity: 0.3;
   }
 
@@ -51,7 +55,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 200px; /* Adjust as needed */
+    max-width: 150px; /* Adjust as needed */
   }
 
   .provider-cell {
@@ -210,7 +214,7 @@
 .header-content {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   white-space: nowrap;
 }
 
@@ -235,3 +239,45 @@
 .table-header.sortable {
   cursor: pointer;
 }
+
+.header-text {
+  flex: 1;
+  text-align: left;
+  padding-right: 20px; /* Add space for the icon */
+}
+
+@media (max-width: 768px) {
+  .leaderboard-table {
+    font-size: 0.8em;
+  }
+
+  .table-header {
+    padding: 6px 20px 6px 6px;
+  }
+
+  .header-text {
+    padding-right: 15px;
+  }
+}
+
+/* Add horizontal scrolling for the table container */
+.leaderboard-table-container {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+/* New styles for top-level headers */
+.top-header .header-content {
+  justify-content: center;
+}
+
+.top-header .header-text {
+  text-align: center;
+  padding-right: 0;
+}
+
+/* Styles for sub-headers */
+.sub-header .header-text {
+  text-align: left;
+  padding-right: 20px; /* Space for the icon */
+}
diff --git a/webpage/src/components/LeaderboardTable.js b/webpage/src/components/LeaderboardTable.js
@@ -166,16 +166,16 @@ const LeaderboardTable = () => {
       <div className="leaderboard-table-container">
         <table {...getTableProps()} className="leaderboard-table">
           <thead>
-            {headerGroups.map(headerGroup => (
+            {headerGroups.map((headerGroup, i) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map(column => (
                   <th
                     {...column.getHeaderProps(column.getSortByToggleProps())}
-                    className={`table-header ${column.canSort ? 'sortable' : ''}`}
+                    className={`table-header ${column.canSort ? 'sortable' : ''} ${i === 0 ? 'top-header' : 'sub-header'}`}
                   >
                     <div className="header-content">
-                      <span>{column.render('Header')}</span>
-                      {column.canSort && (
+                      <span className="header-text">{column.render('Header')}</span>
+                      {column.canSort && i !== 0 && (
                         <span className="sort-indicator">
                           {column.isSorted
                             ? column.isSortedDesc