style(typing test): align mini progress with the words, not the conte…

…nt width
monkeytypegame · Apr 26, 2024 · 155c348 · 155c348
1 parent ed9ec67
commit 155c348
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -104,7 +104,7 @@
     <div id="timerNumber" class="timerMain">
       <div>60</div>
     </div>
-    <div id="miniTimerAndLiveWpm" class="timerMain">
+    <div id="miniTimerAndLiveWpm" class="full-width-padding timerMain">
       <div class="time hidden">1:00</div>
       <div class="wpm hidden">60</div>
       <div class="acc hidden">100%</div>

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
@@ -1144,11 +1144,10 @@
     height: 0;
     margin-left: 0.25em;
     display: flex;
-    position: absolute;
+    margin-top: -1.25em;
     color: black;
 
     div {
-      margin-top: -1.25em;
       font-size: 1em;
       line-height: 1em;
     }

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
@@ -1530,9 +1530,19 @@ ConfigEvent.subscribe((key, value) => {
   }
   if (key === "tapeMode") {
     if (value === "off") {
-      $("#typingTest").css("max-width", "70ch");
+      $("#typingTest").css({
+        "max-width": "70ch%",
+      });
+      $("#miniTimerAndLiveWpm").css({
+        "grid-column": "full-width-padding",
+      });
     } else {
-      $("#typingTest").css("max-width", "100%");
+      $("#typingTest").css({
+        "max-width": "100%",
+      });
+      $("#miniTimerAndLiveWpm").css({
+        "grid-column": "content",
+      });
     }
   }
 });