fix #2927

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 6e1e2982c46f4cdbd0be64e29098819f7b290f87..1d263de08faa7ea605f9d6fd353e313e73d80e26 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -15,11 +15,39 @@
 
 
     .product-highlights
-      height 147px // 7 lines
+      height 42px // 3 lines
       overflow hidden
+
       li
-        margin-bottom: 0 // all lines have the same size, it allows the last line not to be half croped
+        margin-bottom: 0
+
+    // all lines have the same size, it allows the last line not to be half croped
 
     h3
-      height 39px
+      height 21px
       overflow hidden
+
+.product-img-holder
+  @apply bg-white
+  position: relative
+
+  &:before
+    content: "";
+    display: block
+    padding-top: 100%
+
+  > *
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    text-align: center;
+
+  .product-img
+    @apply bg-contain bg-center bg-no-repeat
+    width: 70%
+    height: 70%
+    top: 15%;
+    left: 15%;

diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 0ecb03dfb841f374f488a985d11deffa74ccd37f..4f1a06453d8c62fd8b3b81d8546890f3209f7d1b 100644 (file)
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -19,7 +19,7 @@
             {{-- Product images --}}
             <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"
+                    class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain mb-3"
                     style="background-image: url({{ $product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }});">
                 </div>
 

diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index e603c78bf90919819559c2b3b7cad27cd7cb6866..2ac19fe46c78cbe914f89e842b4ba85183cebb20 100644 (file)
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -96,15 +96,16 @@
                     @foreach($products as $id=>$product)
                         <div class="product-grid-item bg-grey-200">
                             {{-- Image holder --}}
-                            <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 class="product-img-holder">
+                                <div class="product-img"
+                                     style="background-image: url({{$product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }})"></div>
                             </div>
 
                             {{-- Product details --}}
                             <div class="p-4">
-                                <h3>{{ $product->get('name') }}</h3>
+                                <h3>{{ $product->get('reference') }}</h3>
                                 <div class="product-highlights text-sm">
-                                    @markdown($product->highlights)
+                                    {{$product->get('name')}}
                                 </div>
                                 <p class="mt-4">
                                     <a href="{{ $nav->getHrefById('product/'.$product->id) }}">

diff --git a/tailwind.config.js b/tailwind.config.js
index f6fcd7a8e37f205a9ddc8d07712ec9e08cf9d736..3650b54132944dc7dea71a6f4a3b420292a59b09 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,7 @@ module.exports = {
             },
             padding: {
                 '100p': '100%', // Used for proportional padding to make a square
+                '25p':'25%',
             }
         },
     },