From c3825ab54e1fe97a952a62d7c0f7269fd9c299cd Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Sat, 19 Feb 2022 15:52:14 +0100
Subject: [PATCH] reworked leaderboards media queries. should fix #2488

---
 frontend/src/styles/leaderboards.scss    |  21 +--
 frontend/src/styles/z_media-queries.scss | 159 +++++++++++++----------
 frontend/static/index.html               |   2 -
 3 files changed, 104 insertions(+), 78 deletions(-)

diff --git a/frontend/src/styles/leaderboards.scss b/frontend/src/styles/leaderboards.scss
index c588eac3e..2d81dd4b1 100644
--- a/frontend/src/styles/leaderboards.scss
+++ b/frontend/src/styles/leaderboards.scss
@@ -1,14 +1,15 @@
 #leaderboardsWrapper {
   #leaderboards {
+    min-width: 300px;
     width: 85vw;
     // height: calc(95vh - 5rem);
     overflow-y: auto;
     background: var(--bg-color);
     border-radius: var(--roundness);
-    padding: 2rem;
+    padding: 1rem;
     display: grid;
-    gap: 2rem 0;
-    grid-template-rows: 3rem auto;
+    gap: 1rem 0;
+    grid-template-rows: 2rem auto;
     grid-template-areas:
       "title buttons"
       "tables tables";
@@ -27,8 +28,8 @@
     }
 
     .mainTitle {
-      font-size: 3rem;
-      line-height: 3rem;
+      font-size: 2.5rem;
+      line-height: 2.5rem;
       grid-area: title;
     }
 
@@ -37,7 +38,7 @@
     }
 
     .title {
-      font-size: 2rem;
+      font-size: 1.5rem;
       line-height: 2rem;
       margin-bottom: 0.5rem;
     }
@@ -67,10 +68,10 @@
           grid-template-columns: 1fr auto;
           .buttons {
             display: grid;
-            grid-template-columns: auto 1fr 1fr;
+            grid-template-columns: 1fr 1fr;
             align-items: center;
             // margin-top: .1rem;
-            gap: 1rem;
+            gap: 0.5rem;
             color: var(--sub-color);
             .button {
               padding-left: 1rem;
@@ -82,7 +83,7 @@
         .title {
           grid-area: 1/1;
           margin-bottom: 0;
-          line-height: 2.5rem;
+          line-height: 2rem;
         }
 
         .subtitle {
@@ -95,7 +96,7 @@
 
       .leftTableWrapper,
       .rightTableWrapper {
-        height: calc(100vh - 22rem);
+        height: calc(100vh - 12rem);
         @extend .ffscroll;
         overflow-y: scroll;
         overflow-x: auto;
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index 74070b5a6..a3cda17ca 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -1,12 +1,34 @@
-@media only screen and (max-width: 1200px) {
-  #leaderboardsWrapper {
-    #leaderboards {
-      .tables {
-        grid-template-columns: unset;
+@media only screen and (max-width: 1250px) {
+  #leaderboardsWrapper #leaderboards {
+    grid-template-rows: 1.5rem auto;
+    padding: 1rem;
+    gap: 1rem;
+    .mainTitle {
+      font-size: 2rem;
+      line-height: 2rem;
+    }
+    .title {
+      font-size: 1rem;
+    }
+    .leaderboardsTop {
+      .buttonGroup {
+        gap: 0.1rem !important;
+
+        .button {
+          padding: 0.4rem !important;
+          font-size: 0.7rem !important;
+        }
       }
-      .tables .rightTableWrapper,
-      .tables .leftTableWrapper {
-        height: calc(50vh - 12rem);
+    }
+    .tables table {
+      tr td:first-child {
+        padding-left: 0.25rem;
+      }
+      tr td:last-child {
+        padding-right: 0.25rem;
+      }
+      td {
+        padding: 0.25rem 0.5rem;
       }
     }
   }
@@ -61,6 +83,13 @@
       }
     }
   }
+  #leaderboardsWrapper #leaderboards {
+    .tables table {
+      tr td:nth-child(5) {
+        display: none;
+      }
+    }
+  }
 }
 
 @media only screen and (max-width: 900px) {
@@ -173,17 +202,19 @@
   #commandLineInput {
     width: 600px !important;
   }
-}
-
-@media only screen and (max-width: 700px) {
-  #leaderboardsWrapper {
-    #leaderboards {
-      .leaderboardsTop {
-        flex-direction: column;
-        align-items: baseline;
+  #leaderboardsWrapper #leaderboards {
+    .tables table {
+      tr td:nth-child(4) {
+        display: none;
+      }
+      tr td:last-child {
+        width: 30%;
       }
     }
   }
+}
+
+@media only screen and (max-width: 700px) {
   .pageAccount {
     .triplegroup {
       grid-template-columns: 1fr 1fr;
@@ -265,6 +296,23 @@
   .pageSettings .section.fullWidth .buttons {
     grid-template-columns: 1fr 1fr;
   }
+
+  #leaderboardsWrapper {
+    #leaderboards {
+      grid-template-rows: 2.5rem auto;
+      .leaderboardsTop {
+        flex-direction: column;
+        align-items: baseline;
+      }
+      .tables {
+        grid-template-columns: unset;
+      }
+      .tables .rightTableWrapper,
+      .tables .leftTableWrapper {
+        height: calc(50vh - 8rem);
+      }
+    }
+  }
 }
 
 @media only screen and (max-width: 600px) {
@@ -314,38 +362,7 @@
       }
     }
   }
-  #leaderboardsWrapper #leaderboards {
-    padding: 1rem;
-    gap: 1rem;
-    .mainTitle {
-      font-size: 2rem;
-      line-height: 2rem;
-    }
-    .title {
-      font-size: 1rem;
-    }
-    .leaderboardsTop {
-      .buttonGroup {
-        gap: 0.1rem !important;
 
-        .button {
-          padding: 0.4rem !important;
-          font-size: 0.7rem !important;
-        }
-      }
-    }
-    .tables table {
-      tr td:first-child {
-        padding-left: 0.25rem;
-      }
-      tr td:last-child {
-        padding-right: 0.25rem;
-      }
-      td {
-        padding: 0.25rem;
-      }
-    }
-  }
   .pageAccount {
     .group.history {
       table {
@@ -518,26 +535,11 @@
   #commandLineInput {
     width: 400px !important;
   }
-
   #leaderboardsWrapper #leaderboards {
-    .tables .titleAndTable .titleAndButtons {
-      grid-template-columns: unset;
-    }
-    .tables table {
-      thead,
-      tbody,
-      tfoot {
-        font-size: 0.5rem;
-      }
-      tr td:first-child {
-        padding-left: 0.25rem;
-      }
-      tr td:last-child {
-        padding-right: 0.25rem;
-      }
-      td {
-        padding: 0.25rem;
-      }
+    width: 85vw;
+    .tables .rightTableWrapper,
+    .tables .leftTableWrapper {
+      height: calc(50vh - 7rem);
     }
   }
 }
@@ -579,6 +581,31 @@
   #commandLineInput {
     width: 300px !important;
   }
+  #leaderboardsWrapper #leaderboards {
+    .tables .titleAndTable .titleAndButtons {
+      grid-template-columns: unset;
+    }
+    .tables table {
+      thead,
+      tbody,
+      tfoot {
+        // font-size: 0.5rem;
+      }
+      tr td:first-child {
+        padding-left: 0.25rem;
+      }
+      tr td:last-child {
+        padding-right: 0.25rem;
+      }
+      td {
+        padding: 0.25rem;
+      }
+    }
+    .tables .rightTableWrapper,
+    .tables .leftTableWrapper {
+      height: calc(50vh - 9rem);
+    }
+  }
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/frontend/static/index.html b/frontend/static/index.html
index f21ea0a6f..d14604fa3 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -638,7 +638,6 @@
                 ></i>
               </div>
               <div class="buttons">
-                Jump to:
                 <div class="button leftTableJumpToTop">
                   <i class="fas fa-fw fas fa-crown"></i>
                   <!-- Top -->
@@ -683,7 +682,6 @@
                 ></i>
               </div>
               <div class="buttons">
-                Jump to:
                 <div class="button rightTableJumpToTop">
                   <i class="fas fa-fw fas fa-crown"></i>
                   <!-- Top -->