From 833cf649f3482e20e39202d6e85d7bbf510f420b Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Fri, 11 Sep 2020 13:42:15 +0200
Subject: [PATCH 1/3] renamed and removed some classes, added media breakpoint
 and aligned stuff

---
 src/components/HighscorePage.vue | 117 ++++++++++++++++++-------------
 1 file changed, 68 insertions(+), 49 deletions(-)

diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue
index 63d598a..addae87 100644
--- a/src/components/HighscorePage.vue
+++ b/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,34 +24,32 @@
       <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">
-            <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>
-              
-              <div class="color-box" :class="win.color"
-                   :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div>
-            </div>
-            <div class="left">
-              <Wine :wine="win.wine"></Wine>
-            </div>
+        <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">
+            <h3>Vunnet med:</h3>
+            
+            <div class="color-box" :class="win.color"
+                  :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div>
+          </div>
+          <div class="left">
+            <Wine :wine="win.wine"></Wine>
           </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,39 @@ 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: auto-flow min-content / .3fr 1fr;
+    justify-items: center;
+    width: 80%;
+    margin: auto;
+    grid-gap: 1em;
+  }
 }
 
 ol {

From 1e8a77ec3f25a7fc7d8dc0dc412547e020e516b9 Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Fri, 11 Sep 2020 13:47:01 +0200
Subject: [PATCH 2/3] added max-width

---
 src/components/HighscorePage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue
index addae87..b7e4284 100644
--- a/src/components/HighscorePage.vue
+++ b/src/components/HighscorePage.vue
@@ -218,6 +218,7 @@ input[type="text"] {
     width: 80%;
     margin: auto;
     grid-gap: 1em;
+    max-width: 1600px;
   }
 }
 

From b31bee8731a399b1a55ffb38b768665c9900452f Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Thu, 17 Sep 2020 12:34:59 +0200
Subject: [PATCH 3/3] fixed flow on safari

---
 src/components/HighscorePage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue
index b7e4284..e082bd3 100644
--- a/src/components/HighscorePage.vue
+++ b/src/components/HighscorePage.vue
@@ -213,7 +213,8 @@ input[type="text"] {
 
   @include tablet {
     display: grid;
-    grid: auto-flow min-content / .3fr 1fr;
+    grid-template-columns: .3fr 1fr;
+    grid-template-rows: auto-flow min-content;
     justify-items: center;
     width: 80%;
     margin: auto;