style(typing result): improve styling on narrow screens

also fix random elements causing grid issues
monkeytypegame · Apr 26, 2024 · 4ed3b7d · 4ed3b7d
1 parent 6497aa6
commit 4ed3b7d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -296,7 +296,7 @@
       <!-- <div class="title">wpm over time</div> -->
       <canvas id="wpmChart"></canvas>
     </div>
-    <div class="bottom" style="grid-column: 1/3">
+    <div class="bottom">
       <div id="resultWordsHistory" class="hidden">
         <div class="title">
           <span>input history</span>
@@ -441,7 +441,7 @@
       <a href="/login" router-link>Sign in</a>
       to save your result
     </div>
-    <div style="grid-column: span 2">
+    <div style="grid-column: 1/-1">
       <div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
         <div class="iconAndText">
           <div class="icon"><i class="fas fa-ad"></i></div>

diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
@@ -26,10 +26,6 @@
       grid-template-areas:
         "stats" "chart"
         "morestats";
-      .stats {
-        grid-template-columns: 1fr;
-        grid-template-areas: "wpm" "acc";
-      }
       .stats.morestats {
         justify-items: start;
         display: grid;

diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
@@ -35,6 +35,17 @@
   }
   .pageTest {
     #result {
+      .stats {
+        grid-template-columns: 1fr;
+        grid-template-areas: "wpm" "acc";
+        width: max-content;
+        justify-items: start;
+        justify-self: center;
+      }
+      .morestats {
+        justify-self: unset;
+        width: unset;
+      }
       .buttons {
         grid-template-columns: 1fr 1fr;
         grid-auto-flow: unset;

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
@@ -690,6 +690,10 @@
     }
   }
 
+  .bottom {
+    grid-column: 1/-1;
+  }
+
   .stats {
     grid-area: stats;
     display: grid;