wip #3522 @5

diff --git a/public/images/icon-grid.svg b/public/images/icon-grid.svg
new file mode 100644 (file)
index 0000000..7cba497
--- /dev/null
+++ b/public/images/icon-grid.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 38 36">
+<g>
+       <path fill="#0EAADA" d="M25.4,12.2v3h-3v-3H25.4 M27.4,10.2h-7v7h7V10.2L27.4,10.2z"/>
+</g>
+    <g>
+       <path fill="#0EAADA" d="M15.9,12.2v3h-3v-3H15.9 M17.9,10.2h-7v7h7V10.2L17.9,10.2z"/>
+</g>
+    <g>
+       <path fill="#0EAADA" d="M25.4,21.2v3h-3v-3H25.4 M27.4,19.2h-7v7h7V19.2L27.4,19.2z"/>
+</g>
+    <g>
+       <path fill="#0EAADA" d="M15.9,21.2v3h-3v-3H15.9 M17.9,19.2h-7v7h7V19.2L17.9,19.2z"/>
+</g>
+</svg>

diff --git a/public/images/icon-list.svg b/public/images/icon-list.svg
new file mode 100644 (file)
index 0000000..58062dc
--- /dev/null
+++ b/public/images/icon-list.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 38 36">
+    <g>
+        <polygon fill="#0EAADA" points="28,11 10,11 10,13 28,13 28,11  "/>
+    </g>
+    <g>
+        <polygon fill="#0EAADA" points="28,17 10,17 10,19 28,19 28,17  "/>
+    </g>
+    <g>
+        <polygon fill="#0EAADA" points="28,23 10,23 10,25 28,25 28,23  "/>
+    </g>
+</svg>

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index c6b8208a66e6e6889e932ccc0c5f15e3aed885f6..8811bc49a38bf643f18ce8c2f1199867c1621222 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -60,7 +60,7 @@
 
             <!-- Grid summary header -->
             <div :class="{ 'top-60': !noResults }"
-                 class="products-grid-summary sticky sm:static z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
+                 class="products-grid-summary sticky sm:static z-20 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
 
                 <!-- Active filters -->
                 <div class="products-grid-active-filters flex-grow text-sm">
@@ -89,6 +89,44 @@
                 <div class="products-grid-result-count pl-4 md:pl-0 font-display whitespace-no-wrap">
                     {{ resultsCount }}
                 </div>
+
+                <div class="products-grid-switch">
+                    <a href="#" data-view="grid" class="switch" @click="changeViewStyle"
+                       v-bind:class="{active:viewStyle==='grid'}">
+                        <svg viewBox="0 0 38 36">
+                            <g>
+                                <path fill="currentColor"
+                                      d="M25.4,12.2v3h-3v-3H25.4 M27.4,10.2h-7v7h7V10.2L27.4,10.2z"/>
+                            </g>
+                            <g>
+                                <path fill="currentColor"
+                                      d="M15.9,12.2v3h-3v-3H15.9 M17.9,10.2h-7v7h7V10.2L17.9,10.2z"/>
+                            </g>
+                            <g>
+                                <path fill="currentColor"
+                                      d="M25.4,21.2v3h-3v-3H25.4 M27.4,19.2h-7v7h7V19.2L27.4,19.2z"/>
+                            </g>
+                            <g>
+                                <path fill="currentColor"
+                                      d="M15.9,21.2v3h-3v-3H15.9 M17.9,19.2h-7v7h7V19.2L17.9,19.2z"/>
+                            </g>
+                        </svg>
+                    </a><!--
+                    --><a href="#" data-view="list" class="switch" v-bind:class="{active:viewStyle==='list'}"
+                          @click="changeViewStyle">
+                    <svg viewBox="0 0 38 36">
+                        <g>
+                            <polygon fill="currentColor" points="28,11 10,11 10,13 28,13 28,11         "/>
+                        </g>
+                        <g>
+                            <polygon fill="currentColor" points="28,17 10,17 10,19 28,19 28,17         "/>
+                        </g>
+                        <g>
+                            <polygon fill="currentColor" points="28,23 10,23 10,25 28,25 28,23         "/>
+                        </g>
+                    </svg>
+                </a>
+                </div>
             </div>
 
             <!--
@@ -104,7 +142,8 @@
             </div>
 
             <!-- Product Grid -->
-            <div class="grid grid-cols-auto grid-gap-lg products-grid mt-6 sm:mt-2">
+            <div class="grid grid-cols-auto grid-gap-lg products-grid mt-6 sm:mt-2"
+                 v-bind:class="{'products-grid-aslist':viewStyle==='list'}">
                 <template v-for="product in products" v-if="productVisible(product.id)">
                     <div v-html="product.html" @click="productLoaded(product.id)"></div>
                 </template>
@@ -149,6 +188,7 @@
             }
         },
         data: () => ({
+            viewStyle: 'grid',
             filters: {},
             matches: {},
             products: [],
@@ -178,6 +218,10 @@
                     const safeQuerystring = this.filterQuerystring.replace(/filter\[(\d+)]/g, 'F$1');
                     history.replaceState(newFilters, '', '?' + safeQuerystring);
                 }
+            },
+
+            viewStyle(newStyle) {
+                localStorage.viewStyle = newStyle;
             }
         },
 
@@ -256,6 +300,10 @@
                 }
             });
 
+            if (localStorage.viewStyle) {
+                this.viewStyle = localStorage.viewStyle;
+            }
+
         },
 
         methods: {
@@ -324,6 +372,13 @@
                     this.updateFilters();
                 }
             },
+
+            changeViewStyle(event) {
+                if (event) {
+                    event.preventDefault()
+                }
+                this.viewStyle = this.viewStyle === 'list' ? 'grid' : 'list';
+            },
         },
 
     }

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 6c1eb4347e0e81dcb4f4bc1b10bf84487e3c3415..3195b57f26c729fce84e785b792f7b6139e51189 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -3,6 +3,32 @@
   // Grid view of products
 
   &-grid
+    &-switch
+      +below(960px)
+        display: none;
+
+      margin-left: 1rem;
+      position relative
+      top -0.25rem
+      display inline-block
+      height: 38px;
+      border 1px solid theme('colors.primary')
+
+      a
+        display inline-block
+        width 38px;
+        height: 36px;
+        color theme('colors.primary')
+        background-color #fff
+
+        &.active, &:hover
+          color #fff
+          background-color theme('colors.primary')
+
+        svg
+          width 100%
+          height 100%
+
     // When in auto grid mode, make the minimum width a bit
     // larger so we end up with 3 cols at the largest size.
     // We don't need breakpoints because CSS Grid will
@@ -17,6 +43,63 @@
       +below(960px)
         grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
 
+      &.products-grid-aslist
+        +above(960px)
+          grid-gap 20px
+          grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
+
+          .product-grid-item
+            height 100px
+
+            > a
+              display inline-block
+              vertical-align: top;
+
+            .product-img-holder
+              width 100px
+              height 100px
+              padding-bottom: 0;
+
+              .product-img
+                width: 90%
+                height: 90%
+                top: 5%
+                left: 5%
+
+
+            .product-content
+              display: inline-block;
+              vertical-align: top;
+              position: relative;
+              width: calc(100% - 100px);
+
+              .btn
+                margin-top: 0;
+                position absolute
+                right 25px
+                top: 25px
+                width: auto;
+
+              .product-highlights
+                white-space nowrap
+                height auto
+                overflow hidden
+                width: calc(100% - 300px)
+                text-overflow ellipsis
+
+              .links
+                margin-top: 0.25em;
+
+                .link
+                  width: auto;
+
+                  &:first-child:after
+                    content: "|"
+                    margin 0 0.5em
+
+              h3
+                margin-bottom: 0.25em;
+
     .btn
       width 100%;
       padding-top 0.7rem

diff --git a/resources/views/components/grid.blade.php b/resources/views/components/grid.blade.php
index 078086e6d3e925bed0a2326800c0b0033fe1660d..59dee351cec0d6b6bbb3afc596c1e9e4aabf91e1 100644 (file)
--- a/resources/views/components/grid.blade.php
+++ b/resources/views/components/grid.blade.php
@@ -18,6 +18,6 @@
     $gap = isset($gap) ? 'grid-gap-'.$gap : 'grid-gap-lg'; // Can be overridden by passing an empty string
 @endphp
 
-<div class="grid {{ $cols }} {{ $gap }} {{ $class }}">
+<div class="grid list {{ $cols }} {{ $gap }} {{ $class }}">
     {{ $slot }}
 </div>

diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index f00197b3d3b54cf486a5830f777aed7ee4b8aa57..362b051e234261eae583e8081f76e3040247e445 100644 (file)
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -17,16 +17,16 @@
                                     'results' => __('résultats'),
                                     'no_results' => __('Aucun produit ne correspond aux filtres sélectionnés')
                                 ])'>
-            @endif
+                    @endif
 
-                {{-- Product Grid --}}
-                <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
-                </grid>
+                    {{-- Product Grid --}}
+                    <grid cols="auto" class="products-grid mt-6 sm:mt-2 list">
+                        @foreach($products as $id => $product)
+                            @include('partials.product-link', ['id' => $id, 'product' => $product])
+                        @endforeach
+                    </grid>
 
-            @if ($filters && $filter_results)
+                    @if ($filters && $filter_results)
                 </products-filters>
             @endif
 

diff --git a/resources/views/partials/product-link.blade.php b/resources/views/partials/product-link.blade.php
index 3f6bead2a05f6983da21b72f4356732dba92783e..032663e3dbcbafc36c489093baf1e992d354cc3a 100644 (file)
--- a/resources/views/partials/product-link.blade.php
+++ b/resources/views/partials/product-link.blade.php
@@ -10,10 +10,10 @@
                      alt="{{$product->getEntity()->image_alt}}"/>
             </div>
         </div>
-    </a>
-
+    </a><!--
+    There shoulln't be any space between closing of a and opening of div
     {{-- Product details --}}
-    <div class="p-4">
+    --><div class="product-content p-4">
         <h3><a class="text-navy" href="{{ $product->getEntity()->URL }}">{{ $product->get('reference') }}</a>
         </h3>
         <div class="product-highlights text-sm">

diff --git a/webpack.mix.js b/webpack.mix.js
index 2c0b7a113e52504ed4d2d0486b0f4ebc922ed0db..e896330d5dbd66c0f469b392942d0838ef53d52f 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -64,16 +64,16 @@ mix.stylus('resources/styles/app.styl', 'public/css', {
     // }
 });
 
-mix.stylus('resources/styles/michsci.styl', 'public/css', {
-        use: [
-            require('rupture')()
-        ]
-    },
-    [   // postCssPlugins
-        tailwindcss('tailwind-michsci.config.js'),
-        require('lost'),
-    ]
-);
+// mix.stylus('resources/styles/michsci.styl', 'public/css', {
+//         use: [
+//             require('rupture')()
+//         ]
+//     },
+//     [   // postCssPlugins
+//         tailwindcss('tailwind-michsci.config.js'),
+//         require('lost'),
+//     ]
+// );
 
 //=== PurgeCSS to remove unused selectors
 mix.purgeCss({