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

Better styling for request wine related pages

src/components/AllRequestedWines.vue

@@ -39,14 +39,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
+.requested-wines-container{
+  display: grid;
+  grid-gap: 1.5rem;
+  justify-items: center;
+
+  @include mobile {
+    display: flex;
+    justify-content: space-around;
+    flex-flow: row wrap;
+    row-gap: 1.5rem;
+    margin: 2rem;
+  }
+
+  @include tablet {
+    margin: 1em;
+    grid: 1fr / 1fr 1fr;
+    justify-items: center;
+  }
+
+  @include desktop {
+    margin: 1em;
+    grid: 1fr / repeat(4, 1fr);
+  }
+
+  @include widescreen {
+    width: 80%;
+    margin: auto;
+    grid: 1fr / repeat(5, 1fr);
+    justify-items: center;
+  }
+}
+
 h1{
   text-align: center;
 }
 
-.requested-wines-container{
-  display: flex;
-  justify-content: space-around;
-  flex-flow: row wrap;
-  align-items: stretch
-}
 </style>

src/components/RequestWine.vue

@@ -1,20 +1,20 @@
 <template>
-  <main>
+  <section class="main-container">
-    <h1>
-      Foreslå en vin!
-    </h1>
     <Modal 
       v-if="showModal" 
       modalText="Ønsket ditt har blitt lagt til" 
       :buttons="modalButtons"
       @click="emitFromModalButton"
     ></Modal>
-    <section>
+    <h1>
+      Foreslå en vin!
+    </h1>
+    <section class="search-container">
       <section class="search-section">
-        <input type="text" v-model="searchString" @keyup.enter="fetchWineFromVin()" placeholder="Søk etter en vin du liker her!🍷">
+        <input type="text" v-model="searchString" @keyup.enter="fetchWineFromVin()" placeholder="Søk etter en vin du liker her!🍷" class="search-input-field">
         <button :disabled="!searchString" @click="fetchWineFromVin()" class="vin-button">Søk</button>
       </section>
-      <section v-for="(wine, index) in this.wines" :key="index" class="search-results-container">
+      <section v-for="(wine, index) in this.wines" :key="index" class="single-result">
         <img
           v-if="wine.image"
           :src="wine.image"
@@ -25,26 +25,24 @@
         <section class="wine-info">
           <h2 v-if="wine.name">{{ wine.name }}</h2>
           <h2 v-else>(no name)</h2>
-          <div class="__details">
+          <div class="details">
             <span v-if="wine.rating">{{ wine.rating }}%</span>
             <span v-if="wine.price">{{ wine.price }} NOK</span>
             <span v-if="wine.country">{{ wine.country }}</span>
           </div>
         </section>
-        <section class="buttons">
           <button class="vin-button" @click="request(wine)">Foreslå denne</button>
           <a
           v-if="wine.vivinoLink"
           :href="wine.vivinoLink"
           class="wine-link"
-        >Les mer på polet</a>
+        >Les mer</a>
-        </section>
       </section>
       <p v-if="this.wines && this.wines.length == 0">
         Fant ingen viner med det navnet!
       </p>
     </section>
-  </main>
+  </section>
 </template>
 
 <script>
@@ -103,91 +101,136 @@ export default {
 @import "./src/styles/global";
 @import "./src/styles/variables";
 
-main{
+
-  margin: auto;
+h1{
-  width: 80%;
   text-align: center;
-  z-index: 0;
+}
+
+
+.main-container{
+  margin: auto;
+  max-width: 1200px;
 }
 
 input[type="text"] {
-  width: 100%;
+  width: 90%;
   color: black;
   border-radius: 4px;
-  padding: 0.5rem 1rem;
+  padding: 1rem 1rem;
   border: 1px solid black;
-  max-width: 80%;
+  max-width: 90%;
+}
+
+
+.search-container{
+  margin: 1rem;
 }
 
 .search-section{
-  display: flex;
+  display: grid;
-  justify-content: space-around;
+  grid: 1fr / 1fr .2fr;
-  flex-flow: row;
+
+  @include mobile{
+    .vin-button{
+      display: none;
+    }
+    .search-input-field{
+      grid-column: 1 / -1;
+    }
+  }
 }
 
-.search-results-container{
+.single-result{
-  display: flex;
+  margin-top: 1rem;
-  padding: 3px;
+  display: grid;
-  border-radius: 1px;
+  grid: 1fr / .5fr 2fr .5fr .5fr;
-  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);   
+  grid-template-areas: "picture details button-left button-right";
-  margin: 1rem 0;
+  justify-items: center;
-  justify-content: space-around;
+  align-items: center;
-  flex-flow: row wrap;
+  grid-gap: 1em;
-  align-items: stretch;
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+  box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
+
+  @include mobile{
+
+    grid: 1fr .5fr / .5fr 1fr;
+    grid-template-areas: "picture details"
+                         "button-left button-right";
+    grid-gap: .5em;
+
+    .vin-button{
+      grid-area: button-right;
+      padding: .5em;
+      font-size: 1em;
+      line-height: 1em;
+      height: 2em;
+    }
+
+    .wine-link{
+      grid-area: button-left;
+    }
+
+    h2{
+      font-size: 1em;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis
+    }
+
+  }
  
 
   .wine-image {
     height: 100px;
+    grid-area: picture;
   }
 
   .wine-placeholder {
     height: 100px;
     width: 70px;
+    grid-area: picture;
   }
 
   .wine-info{
-    display: flex;
+    grid-area: details;
-    flex-direction: column;
+    width: 100%;
-    .__details{
+    
+    h2{
+      margin: 0;
+    }
+    .details{
+      top: 0;
       display: flex;
       flex-direction: column;
     }
   }
   .wine-link {
+    grid-area: button-left;
     color: #333333;
     font-family: Arial;
     text-decoration: none;
     font-weight: bold;
     border-bottom: 1px solid $link-color;
-    width: fit-content;
+    height: 1.2em;
+    width: max-content;
   }
 
-  .buttons{
+  .vin-button{
-    display: flex;
+    grid-area: button-right;
-    align-items: center;
-    order: 2;
-    justify-content: space-between;
-    width: 40%;
-    margin-right: 1rem;
   }
-  @include mobile {
+  
-    display: flex;
+  @include tablet{
-    flex-direction: column;
+    h2{
-    .wine-image {
+      font-size: 1.2em;
-      height: 100px;
-      width: 50px;
-      align-self: center;
-    }
-    .buttons{
-      display: flex;
-      flex-direction: column;
-      align-self: center;
-      margin: 1em;
-      .wine-link{
-        margin-top: 1em;
     }
   }
   
+  @include desktop{
+    h2{
+      font-size: 1.6em;
+    }
   }
 }
 

src/styles/media-queries.scss

@@ -1,18 +1,29 @@
-$phone-xs-width: 480px;
-$tablet-p-width: 768px;
-$tablet-l-width: 1024px;
-$desktop-width:  1200px;
-$desktop-l-width: 1600px;
 $mobile-width: 768px;
+$tablet-max: 1200px;
+$desktop-max: 1704;
 
-@mixin desktop {
-  @media (min-width: #{$mobile-width + 1px}) {
-    @content;
-  }
-}
 
 @mixin mobile {
   @media (max-width: #{$mobile-width}) {
     @content;
   }
 }
+
+@mixin tablet {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
+
+
+@mixin desktop {
+  @media (min-width: #{$tablet-max + 1px}) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media (min-width: #{$desktop-max + 1px}){
+    @content;
+  }
+}

src/ui/RequestedWineCard.vue

@@ -7,22 +7,20 @@
       :class="{ 'fullscreen': fullscreen }"
     />
     <img v-else class="wine-placeholder" alt="Wine image" />
-    <section class="wine-info">
     <h3 v-if="wine.name">{{ wine.name }}</h3>
     <h3 v-else>(no name)</h3>
-      <p>Antall ganger denne har blitt foreslått: {{requestedElement.count}}</p>
+    <p class="requested-amount">Foreslått: <strong>{{requestedElement.count}}</strong></p>
-      <section class="buttons">
+
     <button class="vin-button" @click="request(wine)" v-if="!locallyRequested">Foreslå denne</button>
     <a
     v-if="wine.vivinoLink"
     :href="wine.vivinoLink"
-          class="wine-link"
+    class="wine-link">
-        >Les mer på polet</a>
+      Les mer
-        </section>
+    </a>
-        <button @click="deleteWine(wine)" v-if="showDeleteButton == true">
+    <button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button danger">
       Slett vinen
     </button>
-      </section>
     </div>
 </template>
 
@@ -68,13 +66,62 @@ export default {
 </script>
 
 <style lang="scss" scoped> 
+@import "../styles/global.scss";
 
 .requested-wine{
-  padding: 20px;
-  border-radius: 1px;
-  margin: 1rem 0;
   -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
   -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
   box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  text-align: center;
+  display: grid;
+  grid: auto-flow min-content / 2fr 1fr;
+  grid-template-areas: "top top"
+                       "middle-left middle-right-top"
+                       "middle-left middle-right-bot"
+                       "bottom-top bottom-top"
+                       "bottom-bot bottom-bot";
+  grid-gap: 1em;
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+  
+  h3{
+    grid-area: top;
+    word-break: keep-all;
+    width: 90%;
+  }
+
+  img{
+    height: 13em;
+    grid-area: middle-left;
+  }
+
+  .requested-amount{
+    grid-area: middle-right-top;
+    width: 90%;
+    word-break: keep-all;
+  }
+  
+  .wine-link{
+    grid-area: middle-right-bot;
+    color: #333333;
+    font-family: Arial;
+    text-decoration: none;
+    font-weight: bold;
+    border-bottom: 1px solid $link-color;
+    height: 1em;
+  }
+
+  .vin-button{
+    grid-area: bottom-top;
+    margin-bottom: 1em;
+
+    &.danger{
+      grid-area: bottom-bot;
+      background-color: $light-red;
+      color: $red;
+    }
+  }
 }
+
 </style>