From a83f4729a6b7d2cfda1ecba3b0e991338a16f4bb Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 9 Nov 2023 01:35:49 +0100
Subject: [PATCH] [UI] Extracted `grid` into `layout.scss`.

---
 .../src/components/panels/Media/Results.vue   | 30 +-----------------
 .../backend/http/webapp/src/style/layout.scss | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
index 235c68620..ff71f17af 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
@@ -5,7 +5,7 @@
       No search results
     </NoItems>
 
-    <div class="media-grid" v-else>
+    <div class="grid" v-else>
       <Item v-for="(item, i) in results"
             :key="i"
             :item="item"
@@ -77,34 +77,6 @@ export default {
   background: $background-color;
   overflow: auto;
 
-  .media-grid {
-    width: 100%;
-    display: grid;
-    row-gap: 1em;
-    column-gap: 1.5em;
-    padding: 1em;
-
-    @include until($tablet) {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    @media (min-width: 640px) and (max-width: $tablet) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    @include between($tablet, $desktop) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    @include between($desktop, $widescreen) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    @include from($widescreen) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
-
   .info-container {
     width: 100%;
     cursor: initial;
diff --git a/platypush/backend/http/webapp/src/style/layout.scss b/platypush/backend/http/webapp/src/style/layout.scss
index ee90e3056..5de1664fd 100644
--- a/platypush/backend/http/webapp/src/style/layout.scss
+++ b/platypush/backend/http/webapp/src/style/layout.scss
@@ -1,5 +1,6 @@
 @use "sass:math";
 
+$tablet-small: 640px;
 $tablet: 769px;
 $desktop: 1024px;
 $widescreen: 1216px;
@@ -13,6 +14,7 @@ $widths: (
 );
 
 $width-ranges: (
+    tablet-small: ($tablet-small, $tablet),
     tablet:     ($tablet, $desktop),
     desktop:    ($desktop, $widescreen),
     widescreen: ($widescreen, $fullhd),
@@ -227,3 +229,32 @@ $width-ranges: (
   justify-content: center;
 }
 
+// Grid layout
+.grid {
+  width: 100%;
+  display: grid;
+  row-gap: 1em;
+  column-gap: 1.5em;
+  padding: 1em;
+
+  @include until($tablet-small) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  @include between($tablet-small, $tablet) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include between($tablet, $desktop) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include between($desktop, $widescreen) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  @include from($widescreen) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+