Descriptor style fixes

2019-01-21 15:21:24 +01:00 · 2019-01-21 15:21:24 +01:00 · 09811d322a
parent 6e43b11e16
commit 09811d322a
18 changed files with 375 additions and 343 deletions
--- a/e2e/helpers/nightmare.js
+++ b/e2e/helpers/nightmare.js
@ -2,12 +2,19 @@
 import Nightmare from 'nightmare';

 export default function createNightmare(width = 1280, height = 720) {
-    const nightmare = new Nightmare({show: process.env.E2E_SHOW, typeInterval: 10, x: 0, y: 0, waitTimeout: 2000})
-        .viewport(width, height);
+    const nightmare = new Nightmare({
+        show: process.env.E2E_SHOW,
+        typeInterval: 10,
+        x: 0,
+        y: 0,
+        waitTimeout: 2000
+    }).viewport(width, height);

-    nightmare.on('console', (type, message) => {
+    nightmare.on('console', (type, message, ...args) => {
        if (type === 'error')
            fail(message);
+        else
+            console[type](message, ...args);
    });

    nightmare.header('Accept-Language', 'en');
--- a/e2e/helpers/selectors.js
+++ b/e2e/helpers/selectors.js
@ -35,7 +35,7 @@ export default {
        cancelButton: `vn-button[href="#!/client/index"]`
    },
    clientDescriptor: {
-        moreMenu: `vn-client-descriptor > vn-card > div vn-icon-menu > div > vn-icon`,
+        moreMenu: `vn-client-descriptor vn-icon-menu > div > vn-icon`,
        simpleTicketButton: 'vn-client-descriptor vn-popover > div > div.content > div > div.list > ul > li'
    },
    clientBasicData: {
@ -189,7 +189,7 @@ export default {
        cancelButton: `button[ui-sref="item.index"]`
    },
    itemDescriptor: {
-        moreMenu: `vn-item-descriptor > vn-card > div vn-icon-menu > div > vn-icon`,
+        moreMenu: `vn-item-descriptor vn-icon-menu > div > vn-icon`,
        moreMenuRegularizeButton: `vn-item-descriptor vn-icon-menu > div > vn-drop-down > vn-popover ul > li:nth-child(1)`,
        regularizeQuantityInput: `vn-item-descriptor > vn-dialog > div > form > div.body > tpl-body > div > vn-textfield > div > div > div.infix > input`,
        regularizeWarehouseAutocomplete: `#warehouse`,
@ -303,7 +303,7 @@ export default {
        createButton: `${components.vnSubmit}`
    },
    ticketDescriptor: {
-        moreMenu: `vn-ticket-descriptor > vn-card > div vn-icon-menu > div > vn-icon`,
+        moreMenu: `vn-ticket-descriptor vn-icon-menu > div > vn-icon`,
        moreMenuAddToTurn: `vn-ticket-descriptor vn-icon-menu > div > vn-drop-down > vn-popover ul > li:nth-child(1)`,
        moreMenuDeleteTicket: `vn-ticket-descriptor vn-icon-menu > div > vn-drop-down > vn-popover ul > li:nth-child(2)`,
        acceptDeleteTicketButton: `vn-ticket-descriptor button[response="ACCEPT"]`,
@ -338,7 +338,7 @@ export default {
        saleDescriptorPopover: 'vn-ticket-sale vn-item-descriptor-popover > vn-popover',
        saleDescriptorPopoverSummaryButton: 'vn-item-descriptor-popover a[href="#!/item/1/summary"]',
        saleButton: `vn-left-menu a[ui-sref="ticket.card.sale"]`,
-        descriptorItemDiaryButton: `vn-item-descriptor > vn-card > div > vn-horizontal.quicklinks.ng-scope > vn-horizontal > a > vn-icon > i`,
+        descriptorItemDiaryButton: `vn-item-descriptor .quicklinks.ng-scope > vn-horizontal > a > vn-icon > i`,
        newItemButton: 'vn-float-button[icon="add"]',
        firstSaleText: `vn-table div > vn-tbody > vn-tr:nth-child(1)`,
        firstSaleThumbnailImage: 'vn-ticket-sale:nth-child(1) vn-td:nth-child(3) > img',
--- a/front/core/components/array-model/array-model.js
+++ b/front/core/components/array-model/array-model.js
@ -154,7 +154,7 @@ export default class ArrayModel extends ModelProxy {

        let aType = typeof a;

-        if (aType === typeof b)
+        if (aType === typeof b) {
            switch (aType) {
            case 'string':
                return a.localeCompare(b);
@ -166,6 +166,7 @@ export default class ArrayModel extends ModelProxy {
                if (a instanceof Date && b instanceof Date)
                    return a.getTime() - b.getTime();
            }
+        }

        if (a === undefined)
            return -1;
@ -183,11 +184,12 @@ export default class ArrayModel extends ModelProxy {
        let mergedWhere = [];
        let wheres = [dst.where, src.where];

-        for (let where of wheres)
+        for (let where of wheres) {
            if (Array.isArray(where))
                mergedWhere = mergedWhere.concat(where);
            else if (where)
                mergedWhere.push(where);
+        }

        switch (mergedWhere.length) {
        case 0:
--- a/front/core/components/button-menu/button-menu.html
+++ b/front/core/components/button-menu/button-menu.html
@ -1,13 +1,13 @@
 <div class="button-menu">
    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored button-menu__button"
-        ng-click="$ctrl.onClick($event)">
+        class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored button-menu__button">
        <vn-label vn-none translate>{{::$ctrl.label}}</vn-label>
        <vn-icon vn-none icon="{{::$ctrl.icon}}"></vn-icon>
        <vn-icon vn-none class="button-menu__arrow_down" icon="keyboard_arrow_down"></vn-icon>
    </button>
    <vn-drop-down
        vn-id="drop-down"
-        on-select="$ctrl.onDropDownSelect(value)">
+        on-select="$ctrl.onDropDownSelect(value)"
+        ng-click="$ctrl.onDropDownClick($event)">
    </vn-drop-down>
 </div>
--- a/front/core/components/button-menu/button-menu.js
+++ b/front/core/components/button-menu/button-menu.js
@ -8,6 +8,7 @@ export default class ButtonMenu extends Input {
        super($element, $scope);
        this.$transclude = $transclude;
        this.input = this.element.querySelector('.mdl-button');
+        $element.on('click', e => this.onClick(e));
    }

    get model() {
@ -42,11 +43,16 @@ export default class ButtonMenu extends Input {
    }

    onClick(event) {
+        if (event.defaultPrevented) return;
        event.preventDefault();
        this.emit('open');
        this.showDropDown();
    }

+    onDropDownClick(event) {
+        event.preventDefault();
+    }
+
    onDropDownSelect(value) {
        this.field = value;
        this.emit('change', {value});
@ -70,7 +76,7 @@ export default class ButtonMenu extends Input {
            'limit',
            'searchFunction'
        ]);
-        this.$.dropDown.show(this.input);
+        this.$.dropDown.show(this.element);
    }
 }
 ButtonMenu.$inject = ['$element', '$scope', '$transclude'];
--- a/front/core/components/button-menu/style.scss
+++ b/front/core/components/button-menu/style.scss
@ -1,5 +1,7 @@
 vn-button-menu {
    position: relative;
+    cursor: pointer;
+
    .button-menu__button {
        padding: 0 10px;
    }
--- a/front/core/components/drop-down/drop-down.js
+++ b/front/core/components/drop-down/drop-down.js
@ -110,8 +110,8 @@ export default class DropDown extends Component {
    show(parent, search) {
        this._activeOption = -1;
        this.search = search;
-        this.buildList();
        this.$.popover.show(parent || this.parent);
+        this.buildList();
    }

    /**
@ -218,6 +218,7 @@ export default class DropDown extends Component {
    }

    onLoadMoreClick(event) {
+        if (event.defaultPrevented) return;
        event.preventDefault();
        this.model.loadMore();
    }
@ -225,7 +226,10 @@ export default class DropDown extends Component {
    onContainerClick(event) {
        if (event.defaultPrevented) return;
        let index = getPosition(this.ul, event);
-        if (index != -1) this.selectOption(index);
+        if (index != -1) {
+            event.preventDefault();
+            this.selectOption(index);
+        }
    }

    onDocKeyDown(event) {
--- a/front/core/components/icon-menu/icon-menu.html
+++ b/front/core/components/icon-menu/icon-menu.html
@ -1,14 +1,11 @@
 <div class="icon-menu">
    <vn-icon
-            pointer
        class="button"
-            ng-click="$ctrl.onClick($event)"
-            vn-none
        icon="{{::$ctrl.icon}}">
    </vn-icon>
-
    <vn-drop-down
        vn-id="drop-down"
-        on-select="$ctrl.onDropDownSelect(value)">
+        on-select="$ctrl.onDropDownSelect(value)"
+        ng-click="$ctrl.onDropDownClick($event)">
    </vn-drop-down>
 </div>
--- a/front/core/components/icon-menu/style.scss
+++ b/front/core/components/icon-menu/style.scss
@ -1,4 +1,6 @@
 vn-icon-menu {
+    cursor: pointer;
+
    vn-drop-down {
        font-family: 'vn-font'
    }
--- a/front/core/components/popover/style.scss
+++ b/front/core/components/popover/style.scss
@ -6,6 +6,7 @@
    left: 0;
    right: 0;
    bottom: 0;
+    color: initial;

    opacity: 0;
    transform: translateY(-.6em);
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@ -188,63 +188,74 @@ vn-main-block {
 }

 .vn-descriptor {
-    .header {
+    box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
+
+    & > .header {
+        display: flex;
        background: $main-01;
        color: white;
        justify-content: space-between;
        align-items: stretch;
+        color: white;

-        & > vn-icon {
-            padding: .1em;
-            font-size: 2.5em;
-        }
-        & > a , & > vn-icon-menu {
+        & > * {
+            min-width: 1.8em;
            @extend %clickable;
            display: flex;
            align-items: center;
+            justify-content: center;
            padding: .5em;
-            color: white;
-            text-decoration: none;

            & > vn-icon {
                font-size: 1.8em;
            }
+        }
+    }
+    & > .body {
+        @extend .pad-small;

-            & vn-drop-down{
-                color: initial;
+        & > * {
+            @extend .pad-small;
        }
-        }
-    }
-    .footer {
-        text-align: center;
+        & > .icons {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+    
            & > vn-icon {
+                @extend .pad-small;
                color: #666;
                opacity: .4;
-            padding: 0 5% 0 5%;
                font-size: 1.5em;
-        }
-        & > vn-icon.bright {
+    
+                &.bright {
                    color: $main-01;
                    opacity: 1;
                }
            }
-
-    .quicklinks {
-        justify-content: center;
+        }
+        & > .quicklinks {
+            display: flex;
            align-items: center;
+            justify-content: center;
+            padding: 0;
            
            & > a {
+                @extend .pad-small;
+    
                & > vn-icon {
                    font-size: 1.8em;
                    padding: 0;
-            }
    
-            & > vn-icon i {
+                    & > i {
                        line-height: 36px
                    }
                }
            }
        }
+    }
+}

 .vn-list {
    max-width: 36em;
--- a/front/salix/styles/summary.scss
+++ b/front/salix/styles/summary.scss
@ -49,17 +49,12 @@
            vn-label-value > section {
                margin-bottom: .3em;

-                & > vn-label {
-                    display: block;
-                    font-size: .9em;
-
-                    &::after {
+                & > vn-label::after {
                    content: initial;
                }
            }
        }
    }
-    }
    p:after {
        content: ' ';
        overflow: hidden;
--- a/modules/agency/front/descriptor/index.html
+++ b/modules/agency/front/descriptor/index.html
@ -1,4 +1,4 @@
-<vn-card class="vn-descriptor">
+<div class="vn-descriptor">
    <vn-horizontal class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="zone.index">
            <vn-icon icon="chevron_left"></vn-icon>
@ -14,7 +14,7 @@
            on-change="$ctrl.onMoreChange(value)">
        </vn-icon-menu>
    </vn-horizontal>
-    <vn-horizontal pad-medium>
+    <div class="body">
        <vn-one>    
            <vn-label-value label="Id" 
                value="{{::$ctrl.zone.id}}">
@ -43,9 +43,8 @@
                value="{{::$ctrl.zone.price | currency: '€': 2}}">
            </vn-label-value>
        </vn-one>
-    </vn-horizontal>
-</vn-card>
-
+    </div>
+</div>
 <vn-confirm
    vn-id="delete-zone"
    on-response="$ctrl.returnDialog(response)"
--- a/modules/claim/front/descriptor/index.html
+++ b/modules/claim/front/descriptor/index.html
@ -1,15 +1,15 @@
-<vn-card class="vn-descriptor">
-    <vn-horizontal class="header">
+<div class="vn-descriptor">
+    <div class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="claim.index">
            <vn-icon icon="chevron_left"></vn-icon>
        </a>
-        <vn-icon icon=""></vn-icon>
        <a translate-attr="{title: 'Preview'}" ui-sref="claim.card.summary({id: $ctrl.claim.id})">
            <vn-icon icon="desktop_windows"></vn-icon>
        </a>
-    </vn-horizontal>
-    <vn-vertical>
-        <vn-auto pad-medium>
+        <div></div>
+    </div>
+    <div class="body">
+        <div class="attributes">
            <h5>{{$ctrl.claim.id}}</h5>
            <vn-label-value label="Client" 
                    value="{{::$ctrl.claim.client.name}}">
@ -29,10 +29,9 @@
            <vn-label-value label="Ticket" ui-sref="ticket.card.summary({id: $ctrl.claim.ticketFk})" class="link"
            value="{{$ctrl.claim.ticketFk}}">
            </vn-label-value>
-        </vn-auto>
-    </vn-vertical>
-    <vn-horizontal pad-small class="quicklinks">
-        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        </div>
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
                <vn-icon 
@ -40,7 +39,7 @@
                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnTwo"
                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
                <vn-icon 
@ -48,7 +47,7 @@
                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnThree"
                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
                <vn-icon 
@ -56,5 +55,6 @@
                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
                </vn-icon>
            </a>
-    </vn-horizontal>
-</vn-card>
+        </div>
+    </div>
+</div>
--- a/modules/client/front/descriptor/index.html
+++ b/modules/client/front/descriptor/index.html
@ -1,5 +1,5 @@
-<vn-card class="vn-descriptor">
-    <vn-horizontal class="header">
+<div class="vn-descriptor">
+    <div class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="client.index">
            <vn-icon icon="chevron_left"></vn-icon>
        </a>
@ -16,8 +16,9 @@
            on-change="$ctrl.onMoreChange(value)"
            on-open="$ctrl.onMoreOpen()">
        </vn-icon-menu>
-    </vn-horizontal>
-    <div pad-medium>
+    </div>
+    <div class="body">
+        <div class="attributes">
            <h5>{{$ctrl.client.name}}</h5>
            <vn-label-value label="Id" 
                value="{{$ctrl.client.id}}">
@ -35,7 +36,7 @@
                value="{{$ctrl.client.salesPerson.firstName}} {{$ctrl.client.salesPerson.name}}">
            </vn-label-value>
        </div>
-    <vn-horizontal pad-medium class="footer">
+        <div class="icons">
            <vn-icon
                vn-tooltip="Client inactive"
                icon="icon-disabled"
@ -61,9 +62,9 @@
                icon="icon-no036"
                ng-class="{bright: $ctrl.client.isTaxDataChecked == false}">
            </vn-icon>
-    </vn-horizontal>
-    <vn-horizontal pad-small class="quicklinks">
-        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        </div>
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
                <vn-icon 
@ -71,7 +72,7 @@
                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnTwo"
                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
                <vn-icon 
@ -79,7 +80,7 @@
                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnThree"
                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
                <vn-icon 
@ -87,5 +88,6 @@
                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
                </vn-icon>
            </a>
-    </vn-horizontal>
-</vn-card>
+        </div>
+    </div>
+</div>
--- a/modules/item/front/descriptor/index.html
+++ b/modules/item/front/descriptor/index.html
@ -1,5 +1,5 @@
-<vn-card class="vn-descriptor">
-    <vn-horizontal class="header">
+<div class="vn-descriptor">
+    <div class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="item.index">
            <vn-icon icon="chevron_left"></vn-icon>
        </a>
@ -16,9 +16,9 @@
            on-change="$ctrl.onMoreChange(value)"
            on-open="$ctrl.onMoreOpen()">
        </vn-icon-menu>
-    </vn-horizontal>
-    <vn-vertical>
-        <vn-auto style="position: relative" text-center>
+    </div>
+    <div>
+        <div style="position: relative" text-center>
            <img 
                ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" 
                zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{$ctrl.item.image}}"
@ -30,7 +30,7 @@
                    vn-visible-by="marketing, buyer">
                </vn-float-button>
            </a>
-        </vn-auto>
+        </div>
        <vn-horizontal class="state">
            <vn-one>
                <p translate>Visible</p>
@ -41,7 +41,9 @@
                <p>{{$ctrl.item.available}}</p>
            </vn-one>
        </vn-horizontal>
-        <vn-auto pad-medium>
+    </div>
+    <div class="body">
+        <div class="attributes">
            <h5>{{$ctrl.item.id}}</h5>
            <vn-label-value label="Name" 
                    value="{{::$ctrl.item.name}}">
@ -54,11 +56,9 @@
                    label="{{tag.tag.name}}" 
                    value="{{tag.value}}">
            </vn-label-value>
-        </vn-auto>
-    </vn-vertical>
-    <vn-horizontal pad-small class="quicklinks">
-        <vn-horizontal pad-small class="quicklinks">
-            <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        </div>
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
                <vn-icon 
@ -66,7 +66,7 @@
                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
                </vn-icon>
            </a>
-            <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnTwo"
                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
                <vn-icon 
@ -74,7 +74,7 @@
                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
                </vn-icon>
            </a>
-            <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnThree"
                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
                <vn-icon 
@ -82,9 +82,9 @@
                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
                </vn-icon>
            </a>
-    </vn-horizontal>
-</vn-card>
-
+        </div>
+    </div>
+</div>
 <vn-dialog
    vn-id="regularize"
    on-open="$ctrl.clearRegularizeDialog()"
--- a/modules/item/front/ticket-descriptor/index.html
+++ b/modules/item/front/ticket-descriptor/index.html
@ -1,5 +1,5 @@
-<vn-card class="vn-descriptor">
-    <vn-horizontal class="header">
+<div class="vn-descriptor">
+    <div class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="ticket.index">
            <vn-icon icon="chevron_left"></vn-icon>
        </a>
@ -16,8 +16,9 @@
            on-change="$ctrl.onMoreChange(value)"
            on-open="$ctrl.onMoreOpen()">
        </vn-icon-menu>
-    </vn-horizontal>
-    <div pad-medium>
+    </div>
+    <div class="body">
+        <div class="attributes">
            <h5>{{::$ctrl.client.name}}</h5>
            <vn-label-value label="Id" 
                value="{{$ctrl.ticket.id}}">
@ -44,7 +45,7 @@
                value="{{$ctrl.ticket.nickname}}">
            </vn-label-value>
        </div>
-    <vn-horizontal pad-medium-bottom class="footer">
+        <div class="icons">
            <vn-icon vn-one
                vn-tooltip="Client inactive"
                icon="icon-disabled"
@ -65,9 +66,9 @@
                icon="icon-no036"
                ng-class="{bright: $ctrl.ticket.client.isTaxDataChecked == false}">
            </vn-icon>
-    </vn-horizontal>
-    <vn-horizontal pad-small class="quicklinks">
-        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        </div>
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
                <vn-icon 
@ -75,7 +76,7 @@
                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnTwo"
                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
                <vn-icon 
@ -83,7 +84,7 @@
                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnThree"
                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
                <vn-icon 
@ -102,8 +103,9 @@
                data="$ctrl.ticket.ship"
                on-change="$ctrl.goToTicket(value)">
            </vn-button-menu>
-    </vn-horizontal>
-</vn-card>
+        </div>
+    </div>
+</div>
 <vn-dialog class="dialog-summary"
    vn-id="addTurn">
    <tpl-body>
--- a/modules/order/front/descriptor/index.html
+++ b/modules/order/front/descriptor/index.html
@ -1,14 +1,15 @@
-<vn-card class="vn-descriptor">
-    <vn-horizontal class="header">
+<div class="vn-descriptor">
+    <div class="header">
        <a translate-attr="{title: 'Return to module index'}" ui-sref="order.index">
            <vn-icon icon="chevron_left"></vn-icon>
        </a>
-        <vn-icon icon="shopping_cart"></vn-icon>
        <a translate-attr="{title: 'Preview'}" ui-sref="order.card.summary">
            <vn-icon icon="desktop_windows"></vn-icon>
        </a>
-    </vn-horizontal>
-    <div pad-medium>
+        <div></div>
+    </div>
+    <div class="body">
+        <div class="attributes">
            <vn-label-value label="ID" 
                value="{{$ctrl.order.id}}">
            </vn-label-value>
@ -37,8 +38,8 @@
                value="{{$ctrl.order.total | currency: ' €': 2}}">
            </vn-label-value>
        </div>
-    <vn-horizontal pad-small class="quicklinks">
-        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
                <vn-icon 
@ -46,7 +47,7 @@
                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnTwo"
                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
                <vn-icon 
@ -54,7 +55,7 @@
                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
                </vn-icon>
            </a>
-        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            <a ng-if="$ctrl.quicklinks.btnThree"
                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
                <vn-icon 
@ -62,5 +63,6 @@
                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
                </vn-icon>
            </a>
-    </vn-horizontal>
-</vn-card>
+        </div>
+    </div>
+</div>