Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix into dev

front/core/components/td-editable/index.html

@@ -1,4 +1,2 @@
-<vn-horizontal class="text-container">
-        <span class="text" ng-transclude="text" vn-one></span>
-</vn-horizontal>
 <div class="field"></div>
+<span class="text" ng-transclude="text"></span>

front/core/components/td-editable/index.js

@@ -1,38 +1,58 @@
 import ngModule from '../../module';
 import Component from '../../lib/component';
+import {focus} from '../../directives/focus';
 import './style.scss';
 
 export default class Controller extends Component {
-    constructor($element, $scope, $transclude) {
+    constructor($element, $scope, $transclude, $timeout) {
         super($element, $scope);
+        this.$timeout = $timeout;
         let element = $element[0];
         element.tabIndex = 0;
 
         element.addEventListener('focus', () => {
+            if (this.field) return;
             $transclude((tClone, tScope) => {
                 this.field = tClone;
                 this.tScope = tScope;
                 this.element.querySelector('.field').appendChild(this.field[0]);
+                element.tabIndex = -1;
+                this.timer = $timeout(() => {
+                    this.timer = null;
+                    focus(this.field[0]);
+                });
             }, null, 'field');
             element.classList.add('selected');
         });
 
         element.addEventListener('focusout', event => {
+            this.destroyTimer();
             this.lastEvent = event;
             let target = event.relatedTarget;
-            while (target && target.parentNode != element)
+            while (target && target != element)
                 target = target.parentNode;
 
             if (!target) {
                 this.tScope.$destroy();
                 this.field.remove();
+                this.field = null;
                 element.classList.remove('selected');
+                element.tabIndex = 0;
             }
         });
     }
-}
+    destroyTimer() {
+        if (this.timer) {
+            this.$timeout.cancel(this.timer);
+            this.timer = null;
+        }
+    }
 
-Controller.$inject = ['$element', '$scope', '$transclude'];
+    $onDestroy() {
+        this.destroyTimer();
+    }
+}
+Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
 
 ngModule.component('vnTdEditable', {
     template: require('./index.html'),

front/core/components/td-editable/style.scss

@@ -1,16 +1,40 @@
+@import "variables";
+
 vn-td-editable {
     cursor: pointer;
-    & > div.text-container{
+    outline: none;
-        width: 100%;
+    position: relative;
-    }
 
-    &.selected {
+    &.selected > .text {
-        & > .text-container{
+        visibility: hidden;
+    }
+    & > .field {
         display: none;
-        }
+        position: absolute;
-    }
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: .6em;
+        overflow: visible;
 
-    vn-icon {
+        & > field {
-        font-size: 1em;
+            flex: 1;
+            background-color: $color-bg-panel;
+            padding: .5em;
+            box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
+            border-radius: .1em;
+            min-width: 6em;
+    
+            & > * {
+                width: 100%;
+                max-width: initial;
+            }
+        }
+    }
+    &.selected > .field {
+        display: flex;
     }
 }

front/core/directives/focus.js

@@ -1,16 +1,6 @@
 import ngModule from '../module';
 
-/**
+export function focus(input) {
- * Sets the focus and selects the text on the input.
- *
- * @return {Object} The directive
- */
-export function directive() {
-    return {
-        restrict: 'A',
-        link: function($scope, $element, $attrs) {
-            $scope.$watch('', function() {
-                let input = $element[0];
     let selector = 'input, textarea, button, submit';
 
     if (!input.matches(selector))
@@ -25,7 +15,18 @@ export function directive() {
 
     if (input.select)
         input.select();
-            });
+}
+
+/**
+ * Sets the focus and selects the text on the input.
+ *
+ * @return {Object} The directive
+ */
+export function directive() {
+    return {
+        restrict: 'A',
+        link: function($scope, $element) {
+            $scope.$watch('', () => focus($element[0]));
         }
     };
 }

front/salix/styles/border.scss

@@ -1,43 +1,19 @@
 @import "./variables";
 
-html [border-none], .border-none {
-    border: 0;
-}
-
-/* Solid border */
-
 html [border-solid], .border-solid {
-    border: $border-thin solid $border-color;
+    border: $border-thin-light;
 }
 html [border-solid-top], .border-solid-top {
-    border-top: $border-thin solid $border-color;
+    border-top: $border-thin-light;
 }
 html [border-solid-left], .border-solid-left {
-    border-left: $border-thin solid $border-color;
+    border-left: $border-thin-light;
 }
 html [border-solid-right], .border-solid-right {
-    border-right: $border-thin solid $border-color;
+    border-right: $border-thin-light;
 }
 html [border-solid-bottom], .border-solid-bottom {
-    border-bottom: $border-thin solid $border-color;
+    border-bottom: $border-thin-light;
-}
-
-/* Dashed border */
-
-html [border-dashed], .border-dashed {
-    border: $border-thin dashed $border-color;
-}
-html [border-dashed-top], .border-dashed-top {
-    border-top: $border-thin dashed $border-color;
-}
-html [border-dashed-left], .border-dashed-left {
-    border-left: $border-thin dashed $border-color;
-}
-html [border-dashed-right], .border-dashed-right {
-    border-right: $border-thin dashed $border-color;
-}
-html [border-dashed-bottom], .border-dashed-bottom {
-    border-bottom: $border-thin dashed $border-color;
 }
 
 /* Border Radius */

front/salix/styles/index.js

@@ -12,4 +12,5 @@ import './effects.scss';
 import './order-product.scss';
 import './summary.scss';
 import './descriptor.scss';
+import './list.scss';
 import './modal-form.scss';

front/salix/styles/list.scss

@@ -0,0 +1,46 @@
+@import "./effects";
+
+.vn-list {
+    max-width: 36em;
+    margin: 0 auto;
+
+    a.vn-list-item {
+        @extend %clickable;
+    }
+    .vn-list-item {
+        border-bottom: $border-thin-light;
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    
+        & > vn-horizontal {
+            padding: $pad-medium;
+    
+            & > vn-one {
+                overflow: hidden;
+            }
+            & > .buttons {
+                align-items: center;
+    
+                vn-icon-button {
+                    opacity: .4;
+                    color: $color-main;
+                    margin-left: .5em;
+                    transition: opacity 250ms ease-out;
+                    padding: 0;
+                    font-size: 2em;
+    
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+    vn-empty-rows {
+        display: block;
+        text-align: center;
+        padding: 1.5em;
+        box-sizing: border-box;
+    }
+}

front/salix/styles/misc.scss

@@ -5,7 +5,6 @@ html, body {
     margin: 0;
     padding: 0;
 }
-
 a:focus,
 input:focus,
 button:focus {
@@ -23,8 +22,7 @@ input[type=reset]::-moz-focus-inner {
     -ms-user-select: none;
     user-select: none;
 }
-
+a, .link {
-a, .link{
     color: $color-font-link;
     text-decoration: none;
 }
@@ -35,23 +33,20 @@ a, .link{
         text-decoration: underline;
     }
 }
-
 .totalBox {
     border: 1px solid #CCC;
-    text-align: right!important;
+    text-align: right !important;
     justify-content: center;
     align-items: center;
     padding: 18px;
     margin-bottom: 10px;
 }
-
 .form {
     height: 100%;
     box-sizing: border-box;
     padding: $pad-large;
     max-width: 1000px;
 }
-
 html [fixed-bottom-right] {
     position: fixed;
     bottom: 2em;
@@ -60,87 +55,53 @@ html [fixed-bottom-right] {
 html [text-center], .text-center {
     text-align: center;
 }
-html [text-right], .text-right{
+html [text-right], .text-right {
     text-align: right;
 }
-html [text-left], .text-left{
+html [text-left], .text-left {
     text-align: left;
 }
-html [vn-right], .vn-right{
+html [vn-right], .vn-right {
      float: right;
 }
-html [vn-left], .vn-left{
+html [vn-left], .vn-left {
      float: left;
 }
-html [vn-center], .vn-center{
+html [vn-center], .vn-center {
      justify-content: center;
 }
-
+.list > vn-none {
-.list > vn-none{
     min-width: 60px;
 }
-
+.list-element {
-.list-element{
     padding: 8px 0 0 0;
     border-bottom: 1px solid $color-spacer;
+
     i {
         color: $color-main;
     }
 }
-.tooltip {
-    .list-header{
-        border-bottom: 3px solid $color-spacer;
-        font-family: vn-font-bold;
-        text-align: center
-    }
-    .list-element{
-        white-space: nowrap;
-    }
-}
-.list-footer{
-    font-family: vn-font-bold;
-    border-top: 3px solid $color-spacer;
-}
-.list-element.warning{
-    background-color: $color-main-medium;
-}
-.list-element.success{
-    background-color: $color-success-medium;
-    
-}
-.list-element.success:hover{
-    background-color: $color-success-light;
-}
-.list-element.warning:hover{
-    background-color: $color-main-light;
-}
 .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
     background-color: $color-main;
 }
-
 html [pointer], .pointer{
     cursor: pointer;
 }
-
 html [noDrop], .noDrop{
     cursor: no-drop;
 }
-
 html [compact], .compact{
-    max-width: 950px;
+    max-width: $width-compact;
     margin-left: auto;
     margin-right: auto;
 }
-
 button {
     @extend %clickable;
 }
-
 vn-button-bar {
     display: block;
     margin-top: $margin-small;
 }
-
 vn-tool-bar {
     display: flex;
 
@@ -149,51 +110,6 @@ vn-tool-bar {
     }
 }
 
-.vn-list {
-    max-width: 36em;
-    margin: 0 auto;
-
-    a.vn-list-item {
-        @extend %clickable;
-    }
-    .vn-list-item {
-        border-bottom: $border-thin solid $color-spacer;
-        display: block;
-        text-decoration: none;
-        color: inherit;
-    
-        & > vn-horizontal {
-            padding: $pad-medium;
-    
-            & > vn-one {
-                overflow: hidden;
-            }
-            & > .buttons {
-                align-items: center;
-    
-                vn-icon-button {
-                    opacity: .4;
-                    color: $color-main;
-                    margin-left: .5em;
-                    transition: opacity 250ms ease-out;
-                    padding: 0;
-                    font-size: 2em;
-    
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-    vn-empty-rows {
-        display: block;
-        text-align: center;
-        padding: 1.5em;
-        box-sizing: border-box;
-    }
-}
-
 /** START - FORM ELEMENTS DISABLED **/
 
 fieldset[disabled] .mdl-textfield .mdl-textfield__input,
@@ -215,7 +131,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
     white-space: nowrap;
     overflow: hidden;
 }
-
 .counter {
     @extend %active;
 
@@ -223,7 +138,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
         font-size: 0.7em
     }
 }
-
 .vn-grid {
     border-collapse: collapse;
     width: 100%;

front/salix/styles/order-product.scss

@@ -1,99 +1,89 @@
 @import "./variables";
 
-@media screen and (max-width: 1920px){
-    .catalog-list .product {
-        width: 25%;
-    }
-}
-
-@media screen and (max-width: 1800px){
-    .catalog-list .product {
-        width: 33.33%
-    }
-}
-
-@media screen and (max-width: 1600px){
-    .catalog-list .product {
-        width: 50%
-    }
-}
-
-@media screen and (max-width: 1280px){
-    .catalog-list .product {
-        width: 100%
-    }
-}
-
 .catalog-list {
-    justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: wrap;
+    justify-content: center;
 
-    .product {
+    & > .product {
         box-sizing: border-box;
-        padding: 4px;
+        padding: $pad-small;
+        width: 26em;
+        overflow: hidden;
 
-        & > vn-one {
+        & > vn-card > div {
-            border: 1px solid rgba($color-spacer, 0.5);
+            display: flex;
-            display: block
+            height: 11em;
-        }
 
             .image {
-            min-width: 10em;
+                width: 11em;
-            max-width: 10em;
+                height: 11em;
-            min-height: 10em;
-            max-height: 10em;
 
                 img {
                     width: 100%;
                     height: 100%
                 }
             }
-
             .description {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
                 box-sizing: border-box;
-
-            & > vn-vertical {
                 height: 100%;
+                width: 100%;
+                overflow: hidden;
+                padding: .8em;
 
-                & > h2 {
+                & > h3 {
-                    text-transform: uppercase;
                     font-family: vn-font;
-                    margin: 0 0 0.5em 0;
+                    margin: 0;
-                    font-weight: 100;
+                    margin-bottom: .3em;
-                    line-height: 1em;
+                    font-weight: normal;
-                    font-size: 0.9em;
+                    line-height: initial;
+                    font-size: 1.2em;
+                    max-height:2.4em;
+                    overflow: hidden;
                 }
-
+                & > h4 {
-                & > span {
                     color: $color-font-secondary;
                     text-transform: uppercase;
-                    margin-bottom: 0.5em;
+                    margin-bottom: .3em;
-                    font-weight: bold;
+                    line-height: initial;
-                    font-size: 0.8em
+                    font-size: 1em;
+                    flex: 1;
                 }
+                & > .tags {
+                    padding-bottom: .2em;
+                    height: 3em;
 
                     & > vn-label-value {
-                    font-size: 0.8em
+                        font-size: .8em
                     }
                 }  
             }
-
+            .footer {
-        .price {
+                display: flex;
                 align-items: center;
-            margin-top: auto;
+                justify-content: space-between;
-            font-size: 0.8em;
+                font-size: .8em;
 
-            & > vn-one span:first-child {
+                & > .price {
-                color: $color-font-secondary
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+
+                    & > span {
+                        flex: 1;
+
+                        &:first-child,
+                        &:last-child {
+                            font-size: 1.4em
                         }
-
-            & > vn-one span:first-child, & > vn-one span:last-child {
-                font-size: 1.2em
                     }
-
+                } 
-            vn-icon[icon="add_circle"] {
+                & > vn-icon-button {
-                color: $color-main
+                    padding: 0;
+                }
             }
         }
     }

front/salix/styles/variables.scss

@@ -3,6 +3,12 @@ $menu-width: 16em;
 $topbar-height: 4em;
 $mobile-width: 800px;
 
+// Width
+
+$width-small: 36em;
+$width-compact: 60em;
+$width-large: 80em;
+
 // Padding
 
 $pad-none: 0;
@@ -17,12 +23,6 @@ $margin-small: 8px;
 $margin-medium: 16px;
 $margin-large: 32px;
 
-// Border
-
-$border-color: #AAA;
-$border-thin: .1em;
-$border-thick: .15em;
-
 // Light theme
 
 $color-header: #3d3d3d;
@@ -97,3 +97,8 @@ $color-notice-light: darken($color-notice, 35%);
 $color-alert-medium: darken($color-alert, 20%);
 $color-alert-light: darken($color-alert, 35%);
 /**/
+
+// Border
+
+$border-thin: .1em solid $color-spacer;
+$border-thin-light: .1em solid $color-spacer-light;

modules/item/front/descriptor/index.html

@@ -95,7 +95,7 @@
                 <span translate>Regularize stock</span>
             </h5>
             <vn-textfield
-                label="Quantity"
+                label="Type the visible quantity"
                 model="$ctrl.quantity"
                 name="user"
                 vn-id="userField"

modules/item/front/descriptor/locale/es.yml

@@ -1 +1,2 @@
 Regularize stock: Regularizar stock
+Type the visible quantity: Introduce la cantidad visible

modules/order/front/catalog/index.html

@@ -4,16 +4,17 @@
     filter="$ctrl.filter"
     limit="50"
     data="items"
-    on-data-change="$ctrl.onDataChange()" >
+    on-data-change="$ctrl.onDataChange()">
 </vn-crud-model>
 <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,69 +34,65 @@
                     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">
-                <vn-one>
+        <vn-card>
-                    <vn-horizontal>
+            <div class="image">
-                        <vn-one 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/>
-                        </vn-one>
+            </div>
-                        <vn-one pad-small class="description ellipsize">
+            <div class="description">
-                            <vn-vertical>
+                <h3>
-                                <h2 class="ellipsize" vn-tooltip="{{::item.name}}">
                     {{::item.name}}
-                                </h2>
+                </h3>
-                                <span class="ellipsize" vn-tooltip="{{::item.subName}}">
+                <h4 class="ellipsize">
-                                    {{::item.subName}}
+                    <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
-                                </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>
-                                <vn-label-value 
+                </div>
-                                    label="{{::item.tag8}}"
+                <div class="footer">
-                                    value="{{::item.value8}}">
+                    <div class="price">
-                                </vn-label-value>
-                
-                                <vn-horizontal class="price">
-                                    <vn-one>
                         <span>{{::item.available}}</span> 
                         <span translate>from</span>
-                                        <span>{{::item.price | currency: 'EUR': 2}}</span>
+                        <span>{{::item.price | currency:'EUR':2}}</span>
-                                    </vn-one>
+                    </div>
-                                    <vn-auto>
+                    <vn-icon-button
-                                        <a href="" vn-tooltip="Add">
+                        icon="add_circle"
-                                            <vn-icon-button icon="add_circle" ng-click="$ctrl.preview($event, item)"></vn-icon-button>
+                        ng-click="$ctrl.preview($event, item)"
-                                        </a>
+                        vn-tooltip="Add">
-                                    </vn-auto>
+                    </vn-icon-button>
-                                </vn-horizontal>
+                </div>
-                            </vn-vertical>
+            </div>
-                        </vn-one>
+        </vn-card>
-                    </vn-horizontal>
-                </vn-one>
         </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,16 +1,31 @@
 @import "variables";
 
-vn-order-catalog .catalog-header {
+vn-order-catalog {
-    border-color: $color-spacer;
+    .catalog-header {
-    border-bottom: 1px solid rgba($color-spacer, 0.5);
+        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/order/front/filter/style.scss

@@ -6,7 +6,7 @@ vn-catalog-filter > div {
         padding-left: $pad-medium;
         padding-right: $pad-medium;
         border-color: $color-spacer;
-        border-bottom: 1px solid rgba($color-spacer, 0.5);
+        border-bottom: $border-thin;
     }
     .item-category {
         padding: $pad-small;

modules/order/front/line/style.scss

@@ -1,4 +1,6 @@
-vn-order-line{
+@import "./variables";
+
+vn-order-line {
     vn-table {
         img {
             border-radius: 50%;
@@ -8,7 +10,7 @@ vn-order-line{
     }
     .taxes {
         max-width: 10em;
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 

modules/order/front/summary/style.scss

@@ -1,8 +1,10 @@
+@import "./variables";
+
 vn-order-summary .summary > div > vn-horizontal > vn-one {
     min-width: 10em !important;
 
     &.taxes {
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 

modules/order/front/volume/style.scss

@@ -1,6 +1,8 @@
 
+@import "./variables";
+
 .totalBox {
-    border: 1px solid #CCC;
+    border: $border-thin-light;
     text-align: left;
     align-self: flex-end;
 }

modules/ticket/front/picture/index.html

@@ -8,28 +8,31 @@
     auto-load="true">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card
-        <vn-vertical>
+        ng-if="!model.data || model.data.length == 0"
-            <vn-horizontal class="catalog-list" pad-small>
+        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">
-                    <vn-one>
+        <vn-card>
-                        <vn-horizontal>
+            <div class="image">
-                            <vn-one 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/>
-                            </vn-one>
+            </div>
-                            <vn-one pad-small class="description ellipsize">
+            <div class="description">
-                                <vn-vertical>
+                <h3>
-                                    <h2 class="ellipsize link" vn-tooltip="{{::sale.item.name}}"
+                    <span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
-                                    ng-click="$ctrl.showDescriptor($event, sale.item.id)">
                         {{::sale.item.name}}
-                                    </h2>
-                                    <span class="ellipsize" vn-tooltip="{{::sale.item.subName}}">
-                                        {{::sale.item.subName}}
                     </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}}">
@@ -42,31 +45,18 @@
                         label="{{::sale.item.tag7}}"
                         value="{{::sale.item.value7}}">
                     </vn-label-value>
-                                    <vn-label-value 
+                </div>
-                                        label="{{::sale.item.tag8}}"
+                <div class="footer">
-                                        value="{{::sale.item.value8}}">
+                    <div class="price">
-                                    </vn-label-value>
-                    
-                                    <vn-horizontal class="price">
-                                        <vn-one>
                         <span>{{::sale.quantity}}</span> 
                         <span translate>by</span>
                         <span>{{::sale.price | currency: 'EUR': 2}}</span>
-                                        </vn-one>
+                    </div>
-                                    </vn-horizontal>
+                </div>
-                                </vn-vertical>
+            </div>
-                            </vn-one>
+        </vn-card>
-                        </vn-horizontal>
-                    </vn-one>
         </section>
     </vn-horizontal>
-            <vn-horizontal ng-if="model.data.length == 0">
-                <vn-one pad-small-v translate>
-                    No results
-                </vn-one>
-            </vn-horizontal>
-        </vn-vertical>
     <vn-pagination model="model"></vn-pagination>
-    </vn-card>
 </vn-vertical>
 <vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>

modules/ticket/front/sale-checked/index.html

@@ -20,7 +20,7 @@
                     </vn-thead>
                     <vn-tbody>
                         <vn-tr ng-repeat="sale in sales">
-                            <vn-td center>
+                            <vn-td center shrink>
                                 <vn-check 
                                     vn-one field="sale.isChecked.isChecked" 
                                     disabled="true">

modules/ticket/front/sale/style.scss

@@ -75,7 +75,7 @@ vn-ticket-sale {
         vn-button[label=Cancel]{
             display: none;
         }
-        vn-card.vn-ticket-create{
+        vn-card.vn-ticket-create {
             padding: 0!important;
         }
     }
@@ -89,7 +89,7 @@ vn-ticket-sale {
     }
     .taxes {
         max-width: 10em;
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 

modules/ticket/front/summary/style.scss

@@ -1,14 +1,20 @@
-vn-ticket-summary .summary > div > vn-horizontal > vn-one {
+@import "./variables";
-    min-width: 10em !important;
+
+vn-ticket-summary .summary {
+    max-width: $width-large;
+
+    & > div > vn-horizontal > vn-one {
+        min-width: 10em;
     
         &.taxes {
-        border: .1em solid #CCC;
+            border: $border-thin-light;
             text-align: right;
-        padding: .5em !important;
+            padding: .5em;
     
             & > p {
                 font-size: 1.2em;
                 margin: .2em;
             }
         }
+    }
 }