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,88 +9,90 @@
 <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" -->
-                    <vn-autocomplete vn-id="field" vn-one
+                    <span translate>More than</span> {{model.limit}} <span translate>results</span>
-                        data="$ctrl.fieldList"
-                        initial-data="$ctrl.field"
-                        field="$ctrl.field"
-                        translate-fields="['name']"
-                        order="name"
-                        show-field="name"
-                        value-field="field"
-                        label="Order by">
-                    </vn-autocomplete>
-                    <vn-autocomplete vn-one
-                        data="$ctrl.wayList"
-                        initial-data="$ctrl.way"
-                        field="$ctrl.way"
-                        translate-fields="['name']"
-                        show-field="name"
-                        value-field="way"
-                        label="Order">
-                    </vn-autocomplete>
-                </vn-horizontal>
-            </vn-one>
-        </vn-horizontal>
-        <vn-horizontal class="catalog-list" pad-small>
-            <section class="product" ng-repeat="item in items">
-            <div>
-                <div class="image">
-                    <img
-                        ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
-                        zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
-                        on-error-src/>
                 </div>
-                <div class="description">
-                    <h3>
-                        {{::item.name}}
-                    </h3>
-                    <h4 class="ellipsize">
-                        <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
-                    </h4>
-                    <div class="tags">
-                        <vn-label-value
-                            ng-if="::item.value5"
-                            label="{{::item.tag5}}"
-                            value="{{::item.value5}}">
-                        </vn-label-value>
-                        <vn-label-value
-                            ng-if="::item.value6"
-                            label="{{::item.tag6}}"
-                            value="{{::item.value6}}">
-                        </vn-label-value>
-                        <vn-label-value
-                            ng-if="::item.value7"
-                            label="{{::item.tag7}}"
-                            value="{{::item.value7}}">
-                        </vn-label-value>
-                    </div>
-                    <div class="footer">
-                        <div class="price">
-                            <span>{{::item.available}}</span> 
-                            <span translate>from</span>
-                            <span>{{::item.price | currency: 'EUR': 2}}</span>
-                        </div>
-                        <vn-icon-button
-                            icon="add_circle"
-                            ng-click="$ctrl.preview($event, item)"
-                            vn-tooltip="Add">
-                        </vn-icon-button>
-                    </div>
-                </div>
-            </div>
-            </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-auto>
+                <vn-autocomplete vn-id="field" vn-one
+                    data="$ctrl.fieldList"
+                    initial-data="$ctrl.field"
+                    field="$ctrl.field"
+                    translate-fields="['name']"
+                    order="name"
+                    show-field="name"
+                    value-field="field"
+                    label="Order by">
+                </vn-autocomplete>
+                <vn-autocomplete vn-one
+                    data="$ctrl.wayList"
+                    initial-data="$ctrl.way"
+                    field="$ctrl.way"
+                    translate-fields="['name']"
+                    show-field="name"
+                    value-field="way"
+                    label="Order">
+                </vn-autocomplete>
+            </vn-auto>
         </vn-horizontal>
     </vn-card>
+    <vn-card
+        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">
+        <vn-card>
+            <div class="image">
+                <img
+                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
+                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
+                    on-error-src/>
+            </div>
+            <div class="description">
+                <h3>
+                    {{::item.name}}
+                </h3>
+                <h4 class="ellipsize">
+                    <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
+                </h4>
+                <div class="tags">
+                    <vn-label-value
+                        ng-if="::item.value5"
+                        label="{{::item.tag5}}"
+                        value="{{::item.value5}}">
+                    </vn-label-value>
+                    <vn-label-value
+                        ng-if="::item.value6"
+                        label="{{::item.tag6}}"
+                        value="{{::item.value6}}">
+                    </vn-label-value>
+                    <vn-label-value
+                        ng-if="::item.value7"
+                        label="{{::item.tag7}}"
+                        value="{{::item.value7}}">
+                    </vn-label-value>
+                </div>
+                <div class="footer">
+                    <div class="price">
+                        <span>{{::item.available}}</span> 
+                        <span translate>from</span>
+                        <span>{{::item.price | currency:'EUR':2}}</span>
+                    </div>
+                    <vn-icon-button
+                        icon="add_circle"
+                        ng-click="$ctrl.preview($event, item)"
+                        vn-tooltip="Add">
+                    </vn-icon-button>
+                </div>
+            </div>
+        </vn-card>
+        </section>
+    </vn-horizontal>
     <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 {
-    border-bottom: $border-thin;
+    .catalog-header {
+        border-bottom: $border-thin;
+        padding: $pad-medium;
+        align-items: center;
 
-    vn-one:first-child {
+        & > vn-one {
-        padding-top: 2em;
+            display: flex;
+            flex: 1;
+
+            span {
+                color: $color-font-secondary
+            }
+        }
+        & > vn-auto {
+            width: 28em;
+            display: flex;
+            overflow: hidden;
+
+            & > * {
+                padding-left: $pad-medium;
+            }
+        }
     }
-    vn-one:nth-child(2) {
+    .catalog-list {
-        padding-top: 0.5em;
+        padding-top: $pad-small;
-    }
-    span {
-        color: $color-font-secondary
     }
 }
+

modules/ticket/front/picture/index.html

@@ -8,56 +8,55 @@
     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"
-            <section class="product" ng-repeat="sale in sales">
+        style="text-align: center"
-            <div>
+        pad-medium>
-                <div class="image">
+        <span translate>No results</span>
-                    <img
+    </vn-card>
-                        ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" 
+    <vn-horizontal class="catalog-list">
-                        zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
+        <section class="product" ng-repeat="sale in sales">
-                        on-error-src/>
+        <vn-card>
+            <div class="image">
+                <img
+                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" 
+                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
+                    on-error-src/>
+            </div>
+            <div class="description">
+                <h3>
+                    <span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
+                        {{::sale.item.name}}
+                    </span>
+                </h3>
+                <h4 class="ellipsize">
+                    <span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
+                </h4>
+                <div class="tags">
+                    <vn-label-value 
+                        label="{{::sale.item.tag5}}"
+                        value="{{::sale.item.value5}}">
+                    </vn-label-value>
+                    <vn-label-value 
+                        label="{{::sale.item.tag6}}"
+                        value="{{::sale.item.value6}}">
+                    </vn-label-value>
+                    <vn-label-value 
+                        label="{{::sale.item.tag7}}"
+                        value="{{::sale.item.value7}}">
+                    </vn-label-value>
                 </div>
-                <div class="description">
+                <div class="footer">
-                    <h3>
+                    <div class="price">
-                        <span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
+                        <span>{{::sale.quantity}}</span> 
-                            {{::sale.item.name}}
+                        <span translate>by</span>
-                        </span>
+                        <span>{{::sale.price | currency: 'EUR': 2}}</span>
-                    </h3>
-                    <h4 class="ellipsize">
-                        <span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
-                    </h4>
-                    <div class="tags">
-                        <vn-label-value 
-                            label="{{::sale.item.tag5}}"
-                            value="{{::sale.item.value5}}">
-                        </vn-label-value>
-                        <vn-label-value 
-                            label="{{::sale.item.tag6}}"
-                            value="{{::sale.item.value6}}">
-                        </vn-label-value>
-                        <vn-label-value 
-                            label="{{::sale.item.tag7}}"
-                            value="{{::sale.item.value7}}">
-                        </vn-label-value>
-                    </div>
-                    <div class="footer">
-                        <div class="price">
-                            <span>{{::sale.quantity}}</span> 
-                            <span translate>by</span>
-                            <span>{{::sale.price | currency: 'EUR': 2}}</span>
-                        </div>
                     </div>
                 </div>
             </div>
-            </section>
+        </vn-card>
-        </vn-horizontal>
+        </section>
-        <vn-horizontal ng-if="model.data.length == 0">
+    </vn-horizontal>
-            <vn-one pad-small-v translate>
+    <vn-pagination model="model"></vn-pagination>
-                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>