Merge branch 'master' of github.com:KevinMidboe/vinlottis

src/components/HighscorePage.vue

@@ -2,11 +2,11 @@
   <div>
     <h1 class="text-center">Vinlottis highscore 🏆🍷</h1>
     
-    <div class="flex row">
+    <div class="content-container">
       <div class="highscore">        
-        <div class="flex column">
-          <h3 class="margin-bottom-0">Finn ditt navn:</h3>
-          <input v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" />
+        <div>
+          <h3 >Finn ditt navn:</h3>
+          <input type="text" v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" />
         </div>
         
         <ol v-if="highscore.length > 0">
@@ -16,7 +16,7 @@
         </ol>
 
         <div v-if="highscore.length != highscoreResponse.length" class="flex justify-center align-center">
-          <i class="text-center vin-link cursor-pointer" @click="resetFilter" @keyup.space="resetFilter"
+          <i @click="resetFilter" @keyup.space="resetFilter"
              role="button" aria-pressed="false" tabindex="0">reset filter</i>
         </div>
       </div>
@@ -24,21 +24,20 @@
       <div class="winners-vines" v-if="selectedWinner">
         <h1>{{ selectedWinner.name }}</h1>
 
-        <h2 class="margin-bottom-sm">Vinnende farger:</h2>
-        <div class="flex row wrap">
+        <h2>Vinnende farger:</h2>
+        <div class="winning-colors">
           <div v-for="win in selectedWinner.wins"
                class="color-box" :class="win.color"
                :style="{ transform: 'rotate(' + getRotation() + 'deg)' }">
           </div>
         </div>
 
-        <h2 class="margin-top-md margin-bottom-0">Flasker vunnet:</h2>
-        <div class="flex column wrap">
-          <div v-for="win in selectedWinner.wins">
+        <h2>Flasker vunnet:</h2>
+        <div v-for="win in selectedWinner.wins" class="single-win">
           <div class="date-won"><b>{{ humanReadableDate(win.date) }}</b> - {{ daysAgo(win.date) }} dager siden</div>
           <br/>
           <div class="left">
-              <div class="margin-bottom-md"><b>Vunnet med farge:</b></div>
+            <h3>Vunnet med:</h3>
             
             <div class="color-box" :class="win.color"
                   :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div>
@@ -48,10 +47,9 @@
           </div>
         </div>
       </div>
-      </div>
 
       <div v-else class="center">
-        <h1>👈 Se dine vinn, tykk på navnet ditt</h1>
+        <h1>👈 Se dine vinn, trykk på navnet ditt</h1>
       </div>
     </div>
   </div>
@@ -133,33 +131,15 @@ h1 {
   text-align: center;
 }
 
-.highscore {
-  width: max-content;
-  margin: 2rem;
+input[type="text"] {
+    width: 100%;
+    color: black;
+    border-radius: 4px;
+    padding: 1rem 1rem;
+    border: 1px solid black;
+    max-width: 200px;
 }
 
-.winners-vines {
-  margin: 2rem;
-}
-
-
-.left {
-  float: left;
-}
-
-.center {
-  background-color: $primary;
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
-  font-style: italic;
-
-  @include desktop {
-    align-self: flex-start;
-    margin-top: 20vh;
-  }
-}
-
-
 .date-won {
   font-size: 1.3rem;
   margin-top: 2rem;
@@ -182,6 +162,14 @@ h1 {
   }
 }
 
+.single-win {
+  border-bottom: 1px solid rgb(237, 237, 237);
+  .left {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .green {
   background-color: $light-green;
 }
@@ -198,8 +186,41 @@ h1 {
   background-color: $light-red;
 }
 
-div {
-  font-family: Arial;
+.content-container {
+  display: flex;
+  flex-direction: column-reverse;
+  margin: 2em;
+
+  .center {
+    align-self: center;
+    h1 {
+      background-color: $primary;
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      font-style: italic;
+    }
+  }
+
+  .winning-colors {
+    display: flex;
+  }
+
+  @include mobile {
+    .center {
+      display: none;
+    }
+  }
+
+  @include tablet {
+    display: grid;
+    grid-template-columns: .3fr 1fr;
+    grid-template-rows: auto-flow min-content;
+    justify-items: center;
+    width: 80%;
+    margin: auto;
+    grid-gap: 1em;
+    max-width: 1600px;
+  }
 }
 
 ol {