added grid for all requested wines, also added new media-breakpoints

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;
+
+  @media #{$mobileOnly}{
+    display: flex;
+    justify-content: space-around;
+    flex-flow: row wrap;
+    row-gap: 1.5rem;
+    margin: 2rem;
+  }
+
+  @media #{$tabletOnly}{
+    margin: 1em;
+    grid: 1fr / 1fr 1fr;
+    justify-items: center;
+  }
+
+  @media #{$desktopOnly}{
+    margin: 1em;
+    grid: 1fr / repeat(4, 1fr);
+  }
+
+  @media #{$widescreenAndUp}{
+    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/styles/media-queries.scss

@@ -16,3 +16,24 @@ $mobile-width: 768px;
     @content;
   }
 }
+
+$sm: 320;
+$md: 756;
+$lg: 1200;
+$xl: 1704;
+
+$minMobileWidth: $sm + 0px;
+$maxMobileWidth: $md - 1px;
+$minTabletWidth: $md + 0px;
+$maxTabletWidth: $lg - 1px;
+$minDesktopWidth: $lg + 0px;
+$maxDesktopWidth: $xl - 1px;
+$minWidescreenWidth: $xl + 0px;
+
+$mobileOnly: "only screen and ( max-width: #{$maxMobileWidth} )";
+$tabletOnly: "only screen and( min-width: #{$minTabletWidth} ) and ( max-width: #{$maxTabletWidth} )";
+$desktopOnly: "only screen and ( min-width: #{$minDesktopWidth} ) and ( max-width: #{$maxDesktopWidth} )";
+$widescreenOnly: "only screen and ( min-width: #{$minWidescreenWidth} )";
+$tabletAndUp: "only screen and ( min-width: #{$minTabletWidth} )";
+$desktopAndUp: "only screen and ( min-width: #{$minDesktopWidth} )";
+$widescreenAndUp: "only screen and ( min-width: #{$minWidescreenWidth} )";

src/ui/RequestedWineCard.vue

@@ -66,6 +66,62 @@ export default {
 </script>
 
 <style lang="scss" scoped> 
-@import "../styles/requested-wine-card.scss";
+@import "../styles/global.scss";
+
+.requested-wine{
+  -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-right1"
+                       "middle-left middle-right2"
+                       "bottom1 bottom1"
+                       "bottom2 bottom2";
+  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-right1;
+    width: 90%;
+    word-break: keep-all;
+  }
+  
+  .wine-link{
+    grid-area: middle-right2;
+    color: #333333;
+    font-family: Arial;
+    text-decoration: none;
+    font-weight: bold;
+    border-bottom: 1px solid $link-color;
+    height: 1em;
+  }
+
+  .vin-button{
+    grid-area: bottom1;
+    margin-bottom: 1em;
+
+    &.danger{
+      grid-area: bottom2;
+      background-color: red;
+
+    }
+  }
+}
 
 </style>