Style fixes

front/salix/styles/order-product.scss

@@ -1,18 +1,18 @@
 @import "./variables";
 
 .catalog-list {
-    justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: wrap;
+    justify-content: center;
 
     & > .product {
         box-sizing: border-box;
         padding: $pad-small;
-        width: 33.33%;
+        width: 26em;
+        overflow: hidden;
 
-        & > div {
+        & > vn-card > div {
             display: flex;
-            border: $border-thin;
             height: 11em;
 
             .image {
@@ -32,28 +32,28 @@
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
-                padding: $pad-small;
+                padding: .8em;
 
                 & > h3 {
                     font-family: vn-font;
                     margin: 0;
-                    margin-bottom: .4em;
+                    margin-bottom: .3em;
                     font-weight: normal;
                     line-height: initial;
                     font-size: 1.2em;
-                    max-height:2.2em;
+                    max-height:2.4em;
                     overflow: hidden;
                 }
                 & > h4 {
                     color: $color-font-secondary;
                     text-transform: uppercase;
-                    margin-bottom: .4em;
+                    margin-bottom: .3em;
                     line-height: initial;
                     font-size: 1em;
                     flex: 1;
                 }
                 & > .tags {
-                    padding-bottom: .4em;
+                    padding-bottom: .2em;
                     height: 3em;
 
                     & > vn-label-value {
@@ -86,11 +86,5 @@
                 }
             }
         }
-        @media screen and (max-width: 1600px) {
-            width: 50%;
-        }
-        @media screen and (max-width: 1280px) {
-            width: 100%;
-        }
     }
 }

modules/order/front/catalog/index.html

@@ -9,11 +9,12 @@
 <div class="main-with-right-menu">
     <vn-card>
         <vn-horizontal class="catalog-header" pad-medium-h>
-            <vn-one ng-if="model.moreRows">
-                <span translate>More than</span> {{model.limit}} <span translate>results</span>
-            </vn-one>
             <vn-one>
-                <vn-horizontal>
+                <div> <!-- ng-if="model.moreRows" -->
+                    <span translate>More than</span> {{model.limit}} <span translate>results</span>
+                </div>
+            </vn-one>
+            <vn-auto>
                 <vn-autocomplete vn-id="field" vn-one
                     data="$ctrl.fieldList"
                     initial-data="$ctrl.field"
@@ -33,12 +34,19 @@
                     value-field="way"
                     label="Order">
                 </vn-autocomplete>
+            </vn-auto>
         </vn-horizontal>
-            </vn-one>
+    </vn-card>
-        </vn-horizontal>
+    <vn-card
-        <vn-horizontal class="catalog-list" pad-small>
+        ng-if="!model.data || model.data.length == 0"
+        style="text-align: center"
+        margin-medium-top
+        pad-medium>
+        <span translate>No results</span>
+    </vn-card>
+    <vn-horizontal class="catalog-list">
         <section class="product" ng-repeat="item in items">
-            <div>
+        <vn-card>
             <div class="image">
                 <img
                     ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
@@ -73,7 +81,7 @@
                     <div class="price">
                         <span>{{::item.available}}</span> 
                         <span translate>from</span>
-                            <span>{{::item.price | currency: 'EUR': 2}}</span>
+                        <span>{{::item.price | currency:'EUR':2}}</span>
                     </div>
                     <vn-icon-button
                         icon="add_circle"
@@ -82,15 +90,9 @@
                     </vn-icon-button>
                 </div>
             </div>
-            </div>
+        </vn-card>
         </section>
     </vn-horizontal>
-        <vn-horizontal ng-if="!model.data || model.data.length == 0">
-            <vn-one pad-small translate style="text-align: center">
-                No results
-            </vn-one>
-        </vn-horizontal>
-    </vn-card>
     <vn-pagination margin-small-v model="model"></vn-pagination>
 </div>
 <vn-side-menu side="right">

modules/order/front/catalog/style.scss

@@ -1,15 +1,31 @@
 @import "variables";
 
-vn-order-catalog .catalog-header {
+vn-order-catalog {
+    .catalog-header {
         border-bottom: $border-thin;
+        padding: $pad-medium;
+        align-items: center;
+
+        & > vn-one {
+            display: flex;
+            flex: 1;
 
-    vn-one:first-child {
-        padding-top: 2em;
-    }
-    vn-one:nth-child(2) {
-        padding-top: 0.5em;
-    }
             span {
                 color: $color-font-secondary
             }
+        }
+        & > vn-auto {
+            width: 28em;
+            display: flex;
+            overflow: hidden;
+
+            & > * {
+                padding-left: $pad-medium;
+            }
+        }
+    }
+    .catalog-list {
+        padding-top: $pad-small;
+    }
 }
+

modules/ticket/front/picture/index.html

@@ -8,10 +8,15 @@
     auto-load="true">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-medium>
+    <vn-card
-        <vn-horizontal class="catalog-list" pad-small>
+        ng-if="!model.data || model.data.length == 0"
+        style="text-align: center"
+        pad-medium>
+        <span translate>No results</span>
+    </vn-card>
+    <vn-horizontal class="catalog-list">
         <section class="product" ng-repeat="sale in sales">
-            <div>
+        <vn-card>
             <div class="image">
                 <img
                     ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" 
@@ -49,15 +54,9 @@
                     </div>
                 </div>
             </div>
-            </div>
+        </vn-card>
         </section>
     </vn-horizontal>
-        <vn-horizontal ng-if="model.data.length == 0">
-            <vn-one pad-small-v translate>
-                No results
-            </vn-one>
-        </vn-horizontal>
     <vn-pagination model="model"></vn-pagination>
-    </vn-card>
 </vn-vertical>
 <vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>