wip #2881 @1.5

diff --git a/public/images/product-details/product-placeholder.svg b/public/images/product-details/product-placeholder.svg
new file mode 100644 (file)
index 0000000..2832cec
--- /dev/null
+++ b/public/images/product-details/product-placeholder.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<style type="text/css">
+       .st0{fill:#D6D9E3;}
+</style>
+<g id="img-placeholder" transform="translate(-194.482 -185.829)">
+       <path id="Tracé_206" class="st0" d="M344.5,333.7l58.2-33.6l-58.2-33.6l-58.2,33.6L344.5,333.7z"/>
+       <path id="Tracé_207" class="st0" d="M284.5,301.2L284.5,301.2z"/>
+       <path id="Tracé_208" class="st0" d="M404.5,301.2L404.5,301.2z"/>
+       <path id="Tracé_209" class="st0" d="M284.5,301.2L284.5,301.2z"/>
+       <path id="Tracé_210" class="st0" d="M346.3,336.9v67.2l58.2-33.6v-67.2L346.3,336.9z"/>
+       <path id="Tracé_211" class="st0" d="M344.5,405.1L344.5,405.1z"/>
+       <path id="Tracé_212" class="st0" d="M344.5,405.1L344.5,405.1z"/>
+       <path id="Tracé_213" class="st0" d="M342.7,336.9l-58.2-33.6v67.2l58.2,33.6V336.9z"/>
+</g>
+</svg>

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 4bba0a1f1bdf3f3a59642e0ccd2c4f9626d4e31d..6e1e2982c46f4cdbd0be64e29098819f7b290f87 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -1,11 +1,25 @@
 .products
 
+
   // Grid view of products
+
   &-grid
     // 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
     // automatically change the number of columns based
     // on this min-width setting...
+
     &.grid-cols-auto
       grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))
+
+
+    .product-highlights
+      height 147px // 7 lines
+      overflow hidden
+      li
+        margin-bottom: 0 // all lines have the same size, it allows the last line not to be half croped
+
+    h3
+      height 39px
+      overflow hidden

diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 359f7addca55444a67685a0567b47af55ce6be28..0ecb03dfb841f374f488a985d11deffa74ccd37f 100644 (file)
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -1,3 +1,7 @@
+@php
+    $technical_sheet=$product->getMediaUrl('technical_sheet',false)
+@endphp
+
 @extends('layouts/app')
 
 @section('content')
@@ -16,7 +20,7 @@
             <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px">
                 <div
                     class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-cover mb-3"
-                    style="background-image: url({{ $product->getImageUrl('images') }});">
+                    style="background-image: url({{ $product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }});">
                 </div>
 
                 <grid cols="3" gap="sm">
@@ -37,11 +41,13 @@
             <text-block class="product-detail-text sm:mt-6">
                 @markdown($product->highlights)
 
-                <p class="mt-4">
-                    <a href="{{$product->getMediaUrl('technical_sheet','#emtpy')}}">
-                        {{ __('Télécharger la fiche produit') }}
-                    </a>
-                </p>
+                @if($technical_sheet)
+                    <p class="mt-4">
+                        <a href="{{$technical_sheet}}">
+                            {{ __('Télécharger la fiche produit') }}
+                        </a>
+                    </p>
+                @endif
 
 
                 @if(config('features.quote'))

diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index 847e8d6139fd40bca447909fc5ddd650ddd03302..e603c78bf90919819559c2b3b7cad27cd7cb6866 100644 (file)
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -96,14 +96,14 @@
                     @foreach($products as $id=>$product)
                         <div class="product-grid-item bg-grey-200">
                             {{-- Image holder --}}
-                            <div class="bg-white pb-100p bg-contain bg-center bg-no-repeat"
-                                 style="background-image: url({{ asset("storage/products/1.png") }})">
+                            <div class="bg-white pb-100p bg-cover bg-center bg-no-repeat"
+                                 style="background-image: url({{$product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }})">
                             </div>
 
                             {{-- Product details --}}
                             <div class="p-4">
                                 <h3>{{ $product->get('name') }}</h3>
-                                <div class="text-sm">
+                                <div class="product-highlights text-sm">
                                     @markdown($product->highlights)
                                 </div>
                                 <p class="mt-4">