Leaderboard is responsive now (#1698) by rockingrohit9639

* leaderboard is now responsive

* leaderboard is now responsive

* leaderboard is responsive now

* Update style.scss

* responsive on tablet/mobile

* fixed buttons

* specifying leaderboards id
placing tables underneath eachother earlier
fixed title being bound by screen width

Co-authored-by: Miodec <bartnikjack@gmail.com>

.firebaserc_example

@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "your-firebase-project-id"
-  }
-}

src/sass/media-queries.scss

@@ -1,3 +1,11 @@
+@media only screen and (max-width: 1200px) {
+  #leaderboards {
+    .tables {
+      grid-template-columns: unset !important;
+    }
+  }
+}
+
 @media only screen and (max-width: 1050px) {
   #centerContent {
     .pageSettings .section.fullWidth .buttons {
@@ -49,6 +57,12 @@
 }
 
 @media only screen and (max-width: 900px) {
+  #leaderboards {
+    .mainTitle {
+      font-size: 1.5rem !important;
+      line-height: 1.5rem !important;
+    }
+  }
   .merchBanner {
     img {
       display: none;
@@ -193,6 +207,21 @@
       }
     }
   }
+
+  .leaderboardsTop {
+    .mainTitle {
+      font-size: 4vw !important;
+    }
+
+    .buttonGroup {
+      gap: 0.1rem !important;
+
+      .button {
+        padding: 0.4rem !important;
+        font-size: 0.7rem !important;
+      }
+    }
+  }
 }
 
 @media only screen and (max-width: 500px) {
@@ -277,6 +306,14 @@
   #commandLineInput {
     width: 300px !important;
   }
+  #leaderboards {
+    .tables {
+      width: 95% !important;
+      .titleAndTable {
+        width: 90% !important;
+      }
+    }
+  }
 }
 
 @media (hover: none) and (pointer: coarse) {

src/sass/style.scss

@@ -357,7 +357,7 @@ a:hover {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.75);
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   z-index: 1000;
@@ -368,18 +368,31 @@ a:hover {
 
   #leaderboards {
     width: 85vw;
-    height: calc(100vh - 10rem);
+    height: calc(95vh - 5rem);
+    overflow-y: auto;
     background: var(--bg-color);
     border-radius: var(--roundness);
     padding: 2rem;
     display: grid;
-    gap: 2rem;
+    gap: 2rem 0;
     grid-template-rows: 3rem auto;
     grid-template-areas:
       "title buttons"
       "tables tables";
     grid-template-columns: 1fr 1fr;
 
+    .leaderboardsTop {
+      width: 200%;
+      min-width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .buttonGroup .button {
+        padding: 0.4rem 2.18rem;
+      }
+    }
+
     .mainTitle {
       font-size: 3rem;
       line-height: 3rem;
@@ -399,6 +412,7 @@ a:hover {
       grid-template-columns: 1fr 1fr;
       margin-bottom: 2rem;
       font-size: 0.8rem;
+      width: 100%;
 
       .sub {
         opacity: 0.5;
@@ -410,6 +424,7 @@ a:hover {
 
       .titleAndTable {
         display: grid;
+        width: 100%;
 
         .title {
           grid-area: 1/1;
@@ -428,7 +443,13 @@ a:hover {
         height: calc(100vh - 22rem);
         @extend .ffscroll;
         overflow-y: scroll;
-        overflow-x: hidden;
+        overflow-x: auto;
+      }
+
+      .globalTableWrapper::-webkit-scrollbar,
+      .dailyTableWrapper::-webkit-scrollbar {
+        height: 5px;
+        width: 5px;
       }
 
       table {
@@ -495,13 +516,6 @@ a:hover {
     }
 
     .buttons {
-      grid-area: buttons;
-      display: -ms-grid;
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: 1fr 1fr;
-      align-self: center;
-
       .buttonGroup {
         display: grid;
         grid-auto-flow: column;
@@ -948,7 +962,7 @@ label.checkbox {
 
     .buttons {
       display: grid;
-      gap: 1rem;
+      gap: 0.1rem;
       grid-template-columns: 1fr 1fr 1fr;
     }
   }
@@ -3578,7 +3592,6 @@ key {
   transition: 0.25s;
   padding: 0.4rem;
   border-radius: var(--roundness);
-
   background: rgba(0, 0, 0, 0.1);
   text-align: center;
   -webkit-user-select: none;

static/index.html

@@ -294,11 +294,13 @@
     </div>
     <div id="leaderboardsWrapper" class="hidden">
       <div id="leaderboards">
-        <div class="mainTitle">Leaderboards</div>
-        <div class="buttons">
-          <div class="buttonGroup">
-            <div class="button active" board="time_15">time 15</div>
-            <div class="button" board="time_60">time 60</div>
+        <div class="leaderboardsTop">
+          <div class="mainTitle">Leaderboards</div>
+          <div class="buttons">
+            <div class="buttonGroup">
+              <div class="button active" board="time_15">time 15</div>
+              <div class="button" board="time_60">time 60</div>
+            </div>
           </div>
         </div>
         <div class="tables">