From a37c08880c2199e9ac297e02be2cd1a8709b1a6b Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Fri, 19 Feb 2021 00:00:30 +0100
Subject: [PATCH] Crazy breakpoints to always show filles rows.

Hides elements so we always show filled filled rows. The wine compoennt
does not load images before they are in the viewport, so it should not
decrease performance.
---
 frontend/ui/Wines.vue | 72 ++++++++++++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 21 deletions(-)

diff --git a/frontend/ui/Wines.vue b/frontend/ui/Wines.vue
index 6e9e200..43d4b7a 100644
--- a/frontend/ui/Wines.vue
+++ b/frontend/ui/Wines.vue
@@ -140,31 +140,61 @@ export default {
   justify-content: space-between;
 }
 
-.wine-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: 2rem;
+.requested-count {
+  display: flex;
+  align-items: center;
+  margin-top: -0.5rem;
+  background-color: rgb(244, 244, 244);
+  border-radius: 1.1rem;
+  padding: 0.25rem 1rem;
+  font-size: 1.25em;
 
-  .requested-count {
-    display: flex;
-    align-items: center;
-    margin-top: -0.5rem;
-    background-color: rgb(244,244,244);
-    border-radius: 1.1rem;
-    padding: 0.25rem 1rem;
-    font-size: 1.25em;
-
-    span {
-      padding-right: 0.5rem;
-      line-height: 1.25em;
-    }
-    .icon--heart{
-      font-size: 1.5rem;
-      color: $link-color;
-    }
+  span {
+    padding-right: 0.5rem;
+    line-height: 1.25em;
+  }
+  .icon--heart {
+    font-size: 1.5rem;
+    color: var(--link-color);
   }
 }
 
+// Call for help
+.wines-container {
+  @media (max-width: 1643px) {
+    *:nth-child(n + 7) {
+      display: none;
+    }
+  }
 
+  @media (max-width: 2066px) {
+    *:nth-child(n + 9) {
+      display: none;
+    }
+  }
 
+  @media (max-width: 2490px) {
+    *:nth-child(n + 11) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 2915px) {
+    *:nth-child(n + 13) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 3335px) {
+    *:nth-child(n + 15) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 3758px) {
+    *:nth-child(n + 17) {
+      display: none;
+    }
+  }
+}
 </style>