Merge pull request #42 from KevinMidboe/enhancement/wine-css-fixes

Rework how the list of the top 10 wines looks

src/components/VinlottisPage.vue

@@ -183,13 +183,13 @@ h1 {
   @include desktop {
 
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top"
-                         "top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top"
-                         "middle-bot middle-bot aside"
-                         "bot-left bot-right aside";
+    grid-template-areas: "top-top top-top top-top top-top"
+                         "top-bot top-bot top-bot top-bot"
+                         "middle-top middle-top middle-top middle-top"
+                         "middle-bot middle-bot middle-bot aside"
+                         "bot-left bot-right bot-right aside";
     grid-gap: 1em;
     align-items: center;
 

src/ui/Wines.vue

@@ -5,29 +5,17 @@
         >Topp 10 viner <span class="vin-link">Se alle &gt;</span></router-link
       >
     </h3>
-    <ol>
-      <li v-for="(wine, index) in wines" :key="wine">
-        <div class="inline-wine-name">
-          <span class="truncate">
-            <span class="increment">{{ index + 1}}.</span>{{ wine.name }}
-          </span>
-        </div>
-        <span class="wine-win-info">{{ wine.rating ? wine.rating + "/5" : wine.price + " kr"}}
-          - {{ wine.occurences }} gang(er)
-        </span>
+    <ol class="list-container">
+      <li v-for="(wine, index) in wines" :key="wine" class="single-item">
+        <span class="wine-occurences">{{ index + 1}}.</span>
+        <span class="wine-name">{{ wine.name }}</span>
+        <span class="wine-win-info"> {{ wine.occurences }} {{amount(wine.occurences)}}</span>
         <a
           class="wine-link"
           :href="wine.vivinoLink"
-          @click="wineClick(wine, $event)"
           >Les mer</a>
       </li>
     </ol>
-    <div class="wine-window-outer" v-if="wineOpen" @click="closeWine">
-      <div class="wine-window">
-        <Wine :wine="clickedWine" :fullscreen="true" />
-        <div class="close-modal" @click="closeWine">X</div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -64,30 +52,9 @@ export default {
     this.wines = response.slice(0, 10);
   },
   methods: {
-    wineClick: function(wine, event) {
-      event.preventDefault();
-      this.clickedWine = wine;
-      this.wineOpen = true;
-
-      if (window.location.hostname == "localhost") {
-        return;
-      }
-      this.$ga.event({
-        eventCategory: "Wines",
-        eventAction: "click",
-        eventValue: `${wine.name} - ${wine.vivinoLink}`
-      });
+    amount(occurences){
+      return occurences > 1 ? "ganger" : "gang";
     },
-    closeWine: function(event) {
-      if (
-        event.toElement.className.includes("wine-window-outer") ||
-        event.toElement.className.includes("close-modal")
-      ) {
-        this.clickedWine = null;
-        this.wineOpen = false;
-      }
-    },
-
     predicate: function() {
       var fields = [],
         n_fields = arguments.length,
@@ -153,122 +120,44 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/variables";
+@import "./src/styles/variables.scss";
+@import "./src/styles/global.scss";
 @import "../styles/media-queries.scss";
-.wine-window-outer {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: #000000aa;
-  top: 0;
-  left: 0;
-}
-.wine-window {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-  position: fixed;
-  width: 95vw;
-  height: 95vh;
-  background: white;
-  border: 1px solid #3333333a;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  @include desktop {
-    width: 80vw;
-  }
-
-  > *:first-child {
-    display: flex;
-  }
-}
-
-.close-modal {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  font-size: 2rem;
-  cursor: pointer;
-}
 
 h3 {
-  text-align: left;
-
   & a {
     text-decoration: none;
     color: #333333;
+  }
+}
 
-    &:focus,
-    &:active,
-    &:visited {
-      text-decoration: none;
+.list-container{
+  display: grid;
+  grid: auto-flow min-content / 1fr;
+  row-gap: 5px;
+  padding: 0; 
+
+  .single-item{
+    display: grid;
+    grid: 1fr / .1fr 1fr .3fr .3fr;
+
+    .wine-occurences{
+      font-weight: bold;
+    }
+
+    .wine-name{
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .wine-link {
       color: #333333;
+      text-decoration: underline 1px solid $link-color;
+      font-weight: bold;
+      cursor: pointer;
     }
   }
 }
-
-ol {
-  margin-left: 0;
-  margin: 0 0 1.5em;
-  padding: 0;
-  & > li {
-    margin: 0 0 0.5rem - 1.25rem;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    display: flex;
-    justify-content: space-between;
-
-    @media (max-width: 1080px) {
-      padding: 5px 0;
-      margin-bottom: 0.3rem;
-      flex-wrap: wrap;
-      justify-content: unset;
-    }
-  }
-
-  @include desktop {
-    padding-left: 1rem !important;
-  }
-}
-
-.inline-wine-name {
-  display: inline-flex;
-  padding: 0;
-  flex-grow: 1;
-  max-width: 420px;
-
-  .increment {
-    font-weight: 600;
-    margin-right: 0.5rem;
-  }
-
-  @media (max-width: 1080px) {
-    width: 100%;
-    max-width: 75vw;
-  }
-}
-
-.wine-win-info {
-  margin-right: 0.75rem;
-}
-
-.wine-link {
-  color: #333333;
-  text-decoration: none;
-  font-weight: bold;
-  cursor: pointer;
-  border-bottom: 1px solid $link-color;
-}
-
-.truncate {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
 </style>