From 995d25df2e891e32ee332056da90638022382bdb Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 2 Apr 2020 14:59:17 +0200 Subject: [PATCH] wip #3522 @5 --- public/images/icon-grid.svg | 14 ++++ public/images/icon-list.svg | 11 +++ resources/js/components/ProductsFilters.vue | 59 ++++++++++++- resources/styles/components/products.styl | 83 +++++++++++++++++++ resources/views/components/grid.blade.php | 2 +- resources/views/pages/products.blade.php | 16 ++-- .../views/partials/product-link.blade.php | 6 +- webpack.mix.js | 20 ++--- 8 files changed, 187 insertions(+), 24 deletions(-) create mode 100644 public/images/icon-grid.svg create mode 100644 public/images/icon-list.svg diff --git a/public/images/icon-grid.svg b/public/images/icon-grid.svg new file mode 100644 index 0000000..7cba497 --- /dev/null +++ b/public/images/icon-grid.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/icon-list.svg b/public/images/icon-list.svg new file mode 100644 index 0000000..58062dc --- /dev/null +++ b/public/images/icon-list.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue index c6b8208..8811bc4 100644 --- a/resources/js/components/ProductsFilters.vue +++ b/resources/js/components/ProductsFilters.vue @@ -60,7 +60,7 @@
+ class="products-grid-summary sticky sm:static z-20 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
@@ -89,6 +89,44 @@
{{ resultsCount }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
@@ -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 6c1eb43..3195b57 100644 --- 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 078086e..59dee35 100644 --- 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 -
+
{{ $slot }}
diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php index f00197b..362b051 100644 --- 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 --}} - - @foreach($products as $id => $product) - @include('partials.product-link', ['id' => $id, 'product' => $product]) - @endforeach - + {{-- Product Grid --}} + + @foreach($products as $id => $product) + @include('partials.product-link', ['id' => $id, 'product' => $product]) + @endforeach + - @if ($filters && $filter_results) + @if ($filters && $filter_results) @endif diff --git a/resources/views/partials/product-link.blade.php b/resources/views/partials/product-link.blade.php index 3f6bead..032663e 100644 --- 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}}"/>
- - +

{{ $product->get('reference') }}

diff --git a/webpack.mix.js b/webpack.mix.js index 2c0b7a1..e896330 100644 --- 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({ -- 2.39.5