Done #2962 @1

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index a9ed958207d93bb65999661ba4c197c4d6873a0a..8d2ce38b65ad765d1ca7d172ecd82dbd00a29a88 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex relative items-start">
+    <div class="flex relative items-start sm:block">
 
         <!-- Filters column -->
-        <div class="products-filters-wrapper sticky top-0 mr-1v pt-4 whitespace-no-wrap">
+        <div class="products-filters-wrapper sticky sm:static top-0 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
@@ -11,7 +11,7 @@
 
                     <hr class="h-px bg-grey-250 my-4" v-if="index !== 0" />
 
-                    <h3 class="text-base mb-2">{{ filter.label }}</h3>
+                    <h3 class="text-base mb-2 whitespace-normal">{{ filter.label }}</h3>
 
                     <ul v-if="filter.type === 'list'">
                         <li v-for="(option, option_index) in filter.options" :key="option_index" class="flex justify-between py-1 text-sm">
@@ -54,7 +54,7 @@
         <div class="products-grid flex-grow">
 
             <!-- Grid summary header -->
-            <div class="products-grid-summary sticky top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between md:block">
+            <div class="products-grid-summary sticky sm:static top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
 
                 <!-- Active filters -->
                 <div class="products-grid-active-filters flex-grow text-sm">

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 629b5020ee45fff7b2106cd13be29c487791a653..dd5d0d77270aaf3ea200fc14bd2a4e0a19285724 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -9,7 +9,12 @@
     // on this min-width setting...
 
     &.grid-cols-auto
-      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))
+      grid-template-columns: repeat(auto-fill, minmax(275px, 1fr))
+
+      // On the smaller screens, 270px min-width is sometimes too wide
+      // when including the content padding so reduce it when getting close.
+      +below(960px)
+        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
 
 
     .product-highlights
@@ -32,4 +37,4 @@
     width: 70%
     height: 70%
     top: 15%
-    left: 15%
\ No newline at end of file
+    left: 15%

diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index e33aa0e01ef460206669118883453972a79e1ad9..db30dd49945dc9c09fbe68c4bc21ab590be1b956 100644 (file)
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -20,7 +20,7 @@
             @endif
 
                 {{-- Product Grid --}}
-                <grid cols="auto" class="products-grid mt-6">
+                <grid cols="auto" class="products-grid mt-6 sm:mt-2">
                     @foreach($products as $id => $product)
                         @include('partials.product-link', ['id' => $id, 'product' => $product])
                     @endforeach