fixed notice animation

repositioned elements on the result screen

public/css/style.scss

@@ -759,8 +759,7 @@ key {
                          "wpm acc"
                          "wpm key" 
                          "raw time"
-                         "testType info"
-                         "tags info";
+                         "testType infoAndTags";
     .group{
       .top{
         color: var(--sub-color);
@@ -786,22 +785,11 @@ key {
         line-height: 1rem;
       }
     }
-    .info{
+    .infoAndTags{
+      display: grid;
+      gap: .5rem;
       align-self: baseline;
-      grid-area: info;
-      color: var(--sub-color);
-      .top{
-        font-size: 1rem;
-        line-height: 1.25rem;
-      }
-      .bottom{
-        font-size: 1rem;
-        line-height: 1rem;
-      }
-    }
-    .tags{
-      align-self: baseline;
-      grid-area: tags;
+      grid-area: infoAndTags;
       color: var(--sub-color);
       .top{
         font-size: 1rem;
@@ -965,7 +953,9 @@ key {
       color: var(--sub-color);
       text-align: center;
       margin-bottom: 1.25rem;
-      transition: .25s;
+      height: 1rem;
+      line-height: 1rem;
+      transition: .125s;
       justify-content: center;
       .fas{
         margin-right: .5rem;

public/index.html

@@ -184,6 +184,9 @@
     <div id="middle">
 
       <div class="page pageTest active">
+        <div id="testModesNotice">
+          
+        </div>
         <div id="caret" class="default"></div>
         <div id="result" class="hidden">
           <div class="stats">
@@ -213,13 +216,15 @@
               <div class="top">test type</div>
               <div class="bottom">-</div>
             </div>
-            <div class="group tags">
-              <div class="top">tags</div>
-              <div class="bottom">blah<br>blah</div>
-            </div>
-            <div class="group info">
-              <div class="top">other</div>
-              <div class="bottom">-</div>
+            <div class="group infoAndTags">
+              <div class="info">
+                <div class="top">other</div>
+                <div class="bottom">-</div>
+              </div>
+              <div class="tags">
+                <div class="top">tags</div>
+                <div class="bottom">-</div>
+              </div>
             </div>
           </div>
           <div class="chart">
@@ -228,9 +233,6 @@
           </div>
           <div class="loginTip">Sign in to save your results</div>
 
-        </div>
-        <div id="testModesNotice">
-          
         </div>
         <input id="wordsInput" class="" tabindex="0" autocomplete="off"></input>
         <div id="wordsTitle">input history</div>

public/js/script.js

@@ -632,7 +632,11 @@ function showResult(difficultyFailed = false) {
     },125);
   }, 125);
   
-  $("#testModesNotice").css('opacity',0);
+  $("#testModesNotice").css({
+    'opacity': 0,
+    // 'height': 0,
+    // 'margin-bottom': 0
+  });
 
   let mode2 = "";
   if (config.mode == "time") {
@@ -959,7 +963,11 @@ function restartTest(withSameWordset = false) {
       showWords();
     }
     $("#result").addClass('hidden');
-    $("#testModesNotice").css('opacity',1);
+    $("#testModesNotice").css({
+      'opacity': 1,
+      // 'height': 'auto',
+      // 'margin-bottom': '1.25rem'
+    });
     $("#words").css('opacity', 0).removeClass('hidden').stop(true, true).animate({
       opacity: 1
     }, 125, () => {