Merge pull request #753 from afoucret/fix-product-sorter-ui-25

UX improvement for the product sorter
Smile-SA · Feb 14, 2018 · dc4c57d · dc4c57d
2 parents a1fd0e3 + 56c9fa5
commit dc4c57d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less b/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less
@@ -14,7 +14,7 @@
 
 .elasticsuite-admin-product-sorter {
 
-    margin: 40px 0;
+    margin: 40px 20px;
 
     span.title {
         font-size: 1.7rem;
@@ -23,6 +23,7 @@
     }
 
     .bottom-links {
+        clear: both;
         width: 40%;
         margin: 10px auto;
         border: 1px solid #cccccc;
@@ -45,37 +46,34 @@
 
     .product-list {
 
-        margin: 20px 40px 0;
+        margin: 20px 0 0;
 
-        li.product-list-item, li.product-list-item-placeholder {
-
-            display: inline-block;
+        li {
+            box-sizing: border-box;
+            float: left;
             border: 1px solid #d6d6d6;
+            background: #FFFFFF;
             width: 200px;
-            margin: 5px;
+            min-height: 221px;
+            margin: 5px 0 0 5px;
             vertical-align: top;
             list-style-type: none;
 
-            h1 {
-                font-size: 1.2em;
-                font-weight: 600;
-                line-height: 1.9em;
-                margin: 0 0 2px;
-
-                span {
-                    width: 170px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: block;
-                }
+            &.product-list-item-placeholder {
+                background: #e3e3e3;
+            }
+
+            &.clear {
+                width: 0;
+                min-height: 0;
+                border: none;
+                clear: both;
             }
 
             .info {
                 position: relative;
                 background: rgba(44, 44, 44, 0.75);
-                width: 100%;
-                margin-top: -31px;
+                margin-top: -51px;
                 color: #FFF;
                 padding: 4px;
 
@@ -92,6 +90,23 @@
                 p.sku {
                     display: block;
                     width: 100%;
+                    margin-bottom: 5px;
+                }
+
+                h1 {
+                    font-size: 1.1em;
+                    font-weight: 600;
+                    line-height: 1.9em;
+                    margin: 0 10px;
+                    color: #FFF;
+
+                    span {
+                        width: 160px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: block;
+                    }
                 }
             }
 

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js b/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js
@@ -158,6 +158,7 @@ define([
                 update      : component.onSortUpdate.bind(component)
             });
             $(element).disableSelection();
+            $(element).append('<li class="clear"></li>');
         },
 
         onSortUpdate : function (event, ui)

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html b/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html
@@ -25,13 +25,11 @@
             ">
                 <div class="draggable-handle" data-bind="if: hasPosition()"></div>
 
-                <h1><span data-bind="html: getName(), attr: {title: getName()"></span></h1>
-
                 <div class="product-image"><img data-bind="attr: { src: getImageUrl() }" /></div>
 
                 <div class="info">
+                    <h1><span data-bind="html: getName(), attr: {title: getName()"></span></h1>
                     <p class="sku" data-bind="text: getSku()"></p>
-                    <br/>
                     <p class="price" data-bind="text: getFormattedPrice()"></p>
                     <p class="stock" data-bind="text: getStockLabel()"></p>
                 </div>