vnCard style bug fixed

client/client/src/address-create/address-create.html

@@ -6,9 +6,8 @@
     save="post"
     form="form">
 </vn-watcher>
-<form name="form" ng-submit="watcher.submitGo('clientCard.addresses.list')" pad-medium>
+<form name="form" ng-submit="watcher.submitGo('clientCard.addresses.list')" margin-medium>
-    <vn-card >
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Address</vn-title>
         <vn-horizontal>
             <vn-check vn-one label="Default" field="$ctrl.address.isDefaultAddress"></vn-check> 
@@ -39,7 +38,6 @@
             <vn-textfield vn-one label="Phone"  field="$ctrl.address.phone"></vn-textfield>
             <vn-textfield vn-one label="Mobile"  field="$ctrl.address.mobile"></vn-textfield>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/client/src/address-edit/address-edit.html

@@ -10,17 +10,12 @@
     data="$ctrl.address"
     form="form">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.submit()" pad-medium>
+<form name="form" ng-submit="$ctrl.submit()" margin-medium>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Address</vn-title>
         <vn-horizontal>
-                <vn-one>
+            <vn-check vn-one label="Enabled" field="$ctrl.address.isActive"></vn-check>
-                    <vn-check label="Enabled" field="$ctrl.address.isActive"></vn-check>
+            <vn-check vn-one label="Is equalizated" field="$ctrl.address.isEqualizated" vn-acl="administrative"></vn-check> 
-                </vn-one>
-                <vn-one>
-                    <vn-check label="Is equalizated" field="$ctrl.address.isEqualizated" vn-acl="administrative"></vn-check> 
-                </vn-one>
         </vn-horizontal>
         <vn-horizontal>
             <vn-textfield vn-one label="Consignee" field="$ctrl.address.nickname" vn-focus></vn-textfield>
@@ -89,7 +84,6 @@
                 </vn-one>
             </vn-horizontal>
         </vn-one>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/client/src/addresses/addresses.html

@@ -1,10 +1,7 @@
 <mg-ajax path="/client/api/Clients/{{index.params.id}}/listAddresses" options="mgIndex"></mg-ajax>
 <vn-vertical pad-medium>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
-            <vn-horizontal>
         <vn-title vn-one>Addresses</vn-title>
-            </vn-horizontal>
         <vn-horizontal ng-repeat="address in index.model.items track by address.id" class="pad-medium-top" style="align-items: center;">
             <vn-one border-radius class="pad-small border-solid"
                 ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
@@ -39,7 +36,6 @@
                 </vn-horizontal>
             </vn-one>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-paging index="index" total="index.model.total"></vn-paging>
     <vn-float-button

client/client/src/basic-data/basic-data.html

@@ -5,9 +5,8 @@
     form="form"
     save="patch">
 </vn-watcher>
-<form name="form" ng-submit="watcher.submit()" pad-medium>
+<form name="form" ng-submit="watcher.submit()" margin-medium>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Basic data</vn-title>
         <vn-horizontal>
             <vn-textfield vn-one label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
@@ -40,7 +39,6 @@
                 label="Channel">
             </vn-autocomplete>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/client/src/billing-data/billing-data.html

@@ -6,8 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.submit()" pad-medium>
-    <vn-card margin-small-bottom>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Pay method</vn-title>
         <vn-horizontal>
             <vn-autocomplete vn-two
@@ -32,9 +31,7 @@
                 <vn-check label="Received B2B VNL" field="$ctrl.client.hasSepaVnl" vn-acl="administrative"></vn-check>
             </vn-one>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
-  
     <vn-button-bar>
         <vn-submit label="Save" vn-acl="administrative"></vn-submit>
     </vn-button-bar>

client/client/src/create/create.html

@@ -7,8 +7,7 @@
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
     <div style="max-width: 70em; margin: 0 auto;">
-        <vn-card>
+        <vn-card pad-large>
-            <vn-vertical pad-large>
             <vn-title>Create client</vn-title>
             <vn-horizontal>
                 <vn-textfield vn-one label="Name" field="$ctrl.client.name" vn-focus></vn-textfield>
@@ -30,7 +29,6 @@
                     filter-search="{where: {or: [{name: {regexp: 'search'}}, {name: {regexp: 'search'}}]}}">
                 </vn-autocomplete>
             </vn-horizontal>
-            </vn-vertical>
         </vn-card>
         <vn-button-bar>
             <vn-submit label="Create"></vn-submit>

client/client/src/credit-create/credit-create.html

@@ -6,18 +6,13 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submitGo('clientCard.credit.list')" pad-medium>
-<vn-card >
+    <vn-card pad-large>
-    <vn-vertical pad-large>
         <vn-title>Add credit</vn-title>
-        
         <vn-horizontal>
             <vn-textfield vn-one label="Credit" field="$ctrl.client.credit" type="number" vn-focus></vn-textfield>
-            <vn-one></vn-one>
         </vn-horizontal>
-      
+    </vn-card>
-    </vn-vertical>
+    <vn-button-bar>
-</vn-card>
-<vn-button-bar>
         <vn-submit label="Save"></vn-submit>
-</vn-button-bar>
+    </vn-button-bar>
 </form>

client/client/src/credit-list/credit-list.html

@@ -1,7 +1,8 @@
 <mg-ajax path="/client/api/ClientCredits/filter" options="vnIndexNonAuto"></mg-ajax>
-<vn-card pad-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-large>
+    <vn-card pad-large>
-        <vn-title vn-one margin-large-bottom>Credit</vn-title>
+    <vn-vertical>
+        <vn-title>Credit</vn-title>
         <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-column-header vn-one pad-medium-h field="amount" text="Credit"></vn-column-header>
             <vn-column-header vn-two pad-medium-h field="created" text="Since" default-order="ASC"></vn-column-header>
@@ -21,7 +22,8 @@
         <vn-horizontal vn-one class="list list-footer"></vn-horizontal>
         <vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>
 <a ui-sref="clientCard.credit.create" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/descriptor/descriptor.html

@@ -5,7 +5,7 @@
         </a>
         <vn-icon icon="person"></vn-icon>
         <a translate-attr="{title: 'Preview'}" ui-sref="clientCard.summary">
-            <vn-icon icon="computer"></vn-icon>
+            <vn-icon icon="desktop_windows"></vn-icon>
         </a>
     </vn-horizontal>
     <div pad-medium>

client/client/src/fiscal-data/fiscal-data.html

@@ -6,8 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.submit()" pad-medium>
-    <vn-card margin-small-bottom>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Fiscal data</vn-title>
         <vn-horizontal>
             <vn-textfield
@@ -16,24 +15,21 @@
                 label="Social name"
                 field="$ctrl.client.socialName"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-textfield>
             <vn-textfield
                 vn-one
                 label="Tax number"
                 field="$ctrl.client.fi"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-textfield>
             <vn-check
                 vn-one
                 label="Is equalizated"
                 field="$ctrl.client.isEqualizated"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-check>
         </vn-horizontal>
         <vn-horizontal>
@@ -42,16 +38,14 @@
                 label="Street"
                 field="$ctrl.client.street"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-textfield>
             <vn-textfield
                 vn-one
                 label="City"
                 field="$ctrl.client.city"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-textfield> 
         </vn-horizontal>
         <vn-horizontal>
@@ -60,8 +54,7 @@
                 label="Postcode"
                 field="$ctrl.client.postcode"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-textfield>
             <vn-autocomplete
                 vn-one
@@ -72,8 +65,7 @@
                 value-field="id"
                 label="Province"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-autocomplete>
             <vn-autocomplete
                 vn-one
@@ -84,71 +76,61 @@
                 value-field="id"
                 label="Country"
                 vn-acl="administrative, salesPerson"
-                    acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                    >
             </vn-autocomplete>
         </vn-horizontal>
         <vn-horizontal margin-small-bottom>
-                <vn-one>
             <vn-check
+                vn-one
                 label="Active"
                 field="$ctrl.client.isActive"
                 vn-acl="administrative, salesPerson"
-                        acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                        >
             </vn-check>
-                </vn-one>
-                <vn-one>
             <vn-check
+                vn-one
                 label="Invoice by address"
                 field="$ctrl.client.hasToInvoiceByAddress"
                 vn-acl="administrative, salesPerson"
-                        acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                        >
             </vn-check>
-                </vn-one>
-                <vn-one>
             <vn-check
+                vn-one
                 label="Verified data"
                 field="$ctrl.client.isTaxDataChecked"
-                        vn-acl="administrative"
+                vn-acl="administrative">
-                        >
             </vn-check>
-                </vn-one>
         </vn-horizontal>
         <vn-horizontal>
-                <vn-one>                    
             <vn-check
+                vn-one
                 label="Has to invoice"
                 field="$ctrl.client.hasToInvoice"
                 vn-acl="administrative, salesPerson"
-                        acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                        >
             </vn-check>
-                </vn-one>
-                <vn-one>
             <vn-check
+                vn-one
                 label="Invoice by mail"
                 field="$ctrl.client.isToBeMailed"
                 vn-acl="administrative, salesPerson"
-                        acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                        >
             </vn-check>
-                </vn-one>
-                <vn-one>
             <vn-check
+                vn-one
                 label="Vies"
                 field="$ctrl.client.isVies"
                 vn-acl="administrative, salesPerson"
-                        acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-                        >
             </vn-check>
-                </vn-one>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
-        <vn-submit label="Save" vn-acl="administrative, salesPerson" acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"></vn-submit>
+        <vn-submit
+            label="Save"
+            vn-acl="administrative, salesPerson"
+            acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
+        </vn-submit>
     </vn-button-bar>
 </form>
 <vn-confirm 

client/client/src/greuge-create/greuge-create.html

@@ -5,13 +5,18 @@
     form="form"
     save="post">
 </vn-watcher>
-
+<form name="form" ng-submit="$ctrl.onSubmit()" pad-medium>
-<form pad-medium name="form" ng-submit="$ctrl.onSubmit()">
+    <vn-card pad-large>
-    <vn-card>
+        <vn-title>Add Greuge</vn-title>
-        <vn-vertical pad-medium>
-            <vn-title vn-one margin-large-bottom>Add Greuge</vn-title>
         <vn-horizontal>
-                <vn-textfield vn-one margin-medium-right label="Amount" field="$ctrl.greuge.amount" step="1" vn-focus></vn-textfield>
+            <vn-textfield
+                vn-one
+                margin-medium-right
+                label="Amount"
+                field="$ctrl.greuge.amount"
+                step="1"
+                vn-focus>
+            </vn-textfield>
             <vn-date-picker vn-one 
                 label="Date" 
                 model="$ctrl.greuge.shipped"
@@ -19,15 +24,19 @@
             </vn-date-picker>
         </vn-horizontal>
         <vn-horizontal>
-                <vn-textfield vn-one margin-medium-right label="Comment" field="$ctrl.greuge.description"></vn-textfield>
+            <vn-textfield
-                <vn-autocomplete vn-one
+                vn-one 
+                argin-medium-right
+                label="Comment"
+                field="$ctrl.greuge.description">
+            </vn-textfield>
+            <vn-autocomplete
+                vn-one
                 field="$ctrl.greuge.greugeTypeFk"
                 url="/client/api/greugeTypes"
-                    label="Type"
+                label="Type">
-                >
             </vn-autocomplete>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/client/src/greuge-list/greuge-list.html

@@ -1,8 +1,9 @@
 <mg-ajax path="/client/api/greuges/filter" options="vnIndexNonAuto"></mg-ajax>
 <mg-ajax path="/client/api/greuges/{{edit.params.id}}/sumAmount" options="mgEdit"></mg-ajax>
-<vn-card pad-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-medium>
+    <vn-card pad-large>
-        <vn-title vn-one margin-large-bottom>Greuge</vn-title>
+    <vn-vertical>
+        <vn-title>Greuge</vn-title>
         <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-column-header vn-one pad-medium-h field="shipped" text="Date" default-order="ASC"></vn-column-header>
             <vn-column-header vn-two pad-medium-h field="description" text="Comment"></vn-column-header>
@@ -29,7 +30,8 @@
         </vn-horizontal>
         <vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>
 <a ui-sref="clientCard.greuge.create" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/invoices/invoices.html

@@ -1,8 +1,9 @@
 <mg-ajax path="/client/api/InvoiceOuts/filter" options="vnIndexNonAuto"></mg-ajax>
 <mg-ajax path="/client/api/InvoiceOuts/{{edit.params.id}}/sumAmount" options="mgEdit"></mg-ajax>
-<vn-card margin-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-large>
+    <vn-card pad-large>
-        <vn-title margin-large-bottom>Invoices</vn-title>
+    <vn-vertical>
+        <vn-title>Invoices</vn-title>
         <vn-vertical style="text-align: center;">
             <vn-grid-header on-order="$ctrl.onOrder(field, order)">
                 <vn-column-header vn-one field="ref" text="Reference" default-order="ASC"></vn-column-header>
@@ -37,4 +38,5 @@
         </vn-vertical>
         <vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>

client/client/src/mandate/mandate.html

@@ -1,8 +1,8 @@
 <mg-ajax path="/client/api/Mandates/filter" options="vnIndexNonAuto"></mg-ajax>
-<vn-card pad-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-medium>
+    <vn-card pad-large>
-        <vn-title vn-one margin-large-bottom>Mandate</vn-title>
+    <vn-vertical>
-
+        <vn-title>Mandate</vn-title>
         <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-column-header vn-one pad-medium-h field="id" text="Id"></vn-column-header>
             <vn-column-header vn-one pad-medium-h field="companyFk" text="Company"></vn-column-header>
@@ -14,8 +14,7 @@
             <vn-horizontal 
                 vn-one class="list list-element text-center" 
                 pad-small-bottom 
-                ng-repeat="mandate in index.model.instances track by mandate.id"
+                ng-repeat="mandate in index.model.instances track by mandate.id">
-                >
                 <vn-one pad-medium-h>{{::mandate.id}}</vn-one>
                 <vn-one pad-medium-h>{{::mandate.company.code}}</vn-one>
                 <vn-one pad-medium-h>{{::mandate.mandateType.name}}</vn-one>
@@ -26,6 +25,6 @@
         <vn-one class="text-center pad-small-v" ng-if="index.model.count === 0" translate>No results</vn-one>
         <vn-horizontal vn-one class="list list-footer"></vn-horizontal>
         <vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
-
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>

client/client/src/note-create/note-create.html

@@ -7,11 +7,17 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submitGo('clientCard.notes.list')" pad-medium>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>New note</vn-title>
-            <vn-textarea label="Note" model="$ctrl.note.text" vn-focus padd-medium-top></vn-textarea>
+        <vn-horizontal>
-        </vn-vertical>
+            <vn-textarea
+                vn-one
+                label="Note"
+                model="$ctrl.note.text"
+                vn-focus
+                padd-medium-top>
+            </vn-textarea>
+        </vn-horizontal>
     </vn-card>
     <vn-button-bar> 
         <vn-submit label="Save"></vn-submit>

client/client/src/notes/notes.html

@@ -1,21 +1,22 @@
-<vn-card ng-show="$ctrl.observations.length" pad-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-large>
+    <vn-card ng-show="$ctrl.observations.length" pad-large>
         <vn-title>Notes</vn-title>
-        <vn-one 
+        <vn-vertical 
             ng-repeat="n in $ctrl.observations" 
-            pad-small border-solid
+            pad-small
+            border-solid
             border-radius
             margin-small-bottom>
             <vn-horizontal margin-small-bottom style="color: #666">
                 <vn-one>{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
                 <vn-auto>{{::n.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
             </vn-horizontal>   
-            <vn-horizontal>
+            <vn-horizontal class="text">
                 {{::n.text}}
             </vn-horizontal>
-        </vn-one>
         </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>
 <vn-float-button
     fixed-bottom-right
     ng-click="$ctrl.newObservation()"

client/client/src/recovery-create/recovery-create.html

@@ -5,28 +5,36 @@
     form="form"
     save="post">
 </vn-watcher>
-
 <form pad-medium name="form" ng-submit="$ctrl.onSubmit()">
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Add recovery</vn-title>
         <vn-horizontal>
-                <vn-date-picker vn-one 
+            <vn-date-picker
+                vn-one 
                 label="Since" 
                 model="$ctrl.recovery.started"
                 ini-options="{dateFormat: 'd-m-Y'}"
                 vn-focus>
-
             </vn-date-picker>
-                <vn-date-picker vn-one 
+            <vn-date-picker
+                vn-one 
                 label="To" 
                 model="$ctrl.recovery.finished"
                 ini-options="{dateFormat: 'd-m-Y'}">
             </vn-date-picker>
-                <vn-textfield vn-one label="Amount" field="$ctrl.recovery.amount" type="number"></vn-textfield>
+            <vn-textfield
-                <vn-textfield vn-one label="Period" field="$ctrl.recovery.period" type="number"></vn-textfield>
+                vn-one
+                label="Amount"
+                field="$ctrl.recovery.amount"
+                type="number">
+            </vn-textfield>
+            <vn-textfield
+                vn-one
+                label="Period"
+                field="$ctrl.recovery.period"
+                type="number">
+            </vn-textfield>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/client/src/recovery-list/recovery-list.html

@@ -1,6 +1,7 @@
 <mg-ajax path="/client/api/Recoveries/filter" options="vnIndexNonAuto"></mg-ajax>
-<vn-card pad-medium>
+<vn-vertical pad-medium>
-    <vn-vertical pad-large>
+    <vn-card pad-large>
+    <vn-vertical>
         <vn-title vn-one margin-large-bottom>Recovery</vn-title>
         <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-column-header vn-one pad-medium-h field="started" text="Since" default-order="DESC"></vn-column-header>
@@ -23,7 +24,8 @@
         <vn-horizontal vn-one class="list list-footer"></vn-horizontal>
         <vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>
 <a ui-sref="clientCard.recovery.create" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/web-access/web-access.html

@@ -6,18 +6,24 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" pad-medium>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
-            <vn-one>
         <vn-title>Web access</vn-title>
-            </vn-one>
+        <vn-horizontal>
-            <vn-one>
+            <vn-check
-                <vn-check label="Enable web access" field="$ctrl.account.active"></vn-check>
+                vn-one
-            </vn-one>
+                label="Enable web access"
-            <vn-one>
+                field="$ctrl.account.active">
-                <vn-textfield label="User" class="margin-medium-top" field="$ctrl.account.name" vn-focus></vn-textfield>
+            </vn-check>
-            </vn-one>
+        </vn-horizontal>
-        </vn-vertical>
+        <vn-horizontal>
+            <vn-textfield
+                vn-one
+                margin-medium-top
+                label="User"
+                field="$ctrl.account.name"
+                vn-focus>
+            </vn-textfield>
+        </vn-horizontal>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/core/src/components/card/card.html

@@ -1 +1 @@
-<div class="demo-card-wide mdl-shadow--2dp bg-panel" *[foo]* ng-transclude></div>
+<div ng-transclude></div>

client/core/src/components/card/card.js

@@ -1,14 +1,15 @@
 import ngModule from '../../module';
-import template from './card.html';
+require('./style.scss');
-require('./style.css');
 
 directive.$inject = ['vnTemplate'];
 export default function directive(vnTemplate) {
     return {
         restrict: 'E',
         transclude: true,
-        template: (_, $attrs) =>
+        template: require('./card.html'),
-            vnTemplate.get(template, $attrs)
+        link: function(_, $element) {
+            $element.addClass('demo-card-wide mdl-shadow--2dp bg-panel');
+        }
     };
 }
 ngModule.directive('vnCard', directive);

client/item/src/barcode/item-barcode.html

@@ -1,10 +1,13 @@
 <form name="form" ng-submit="$ctrl.submit()">
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
-            <vn-one margin-medium-top>
         <vn-title>Item Barcodes</vn-title>
         <vn-horizontal ng-repeat="barcode in $ctrl.barcodes track by $index">
-                        <vn-textfield vn-three label="code" model="barcode.code" vn-acl="buyer, replenisher"></vn-textfield>
+            <vn-textfield
+                vn-three
+                label="code"
+                model="barcode.code"
+                vn-acl="buyer, replenisher">
+            </vn-textfield>
             <vn-one pad-medium-top>
                 <vn-icon
                     vn-acl="buyer, replenisher"
@@ -24,8 +27,6 @@
                 ></vn-icon>  
             </vn-one>
         </vn-horizontal>
-                </vn-one>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/item/src/botanical/item-botanical.html

@@ -11,14 +11,18 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" ng-cloak>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Botanical</vn-title>
         <vn-horizontal>
-                <vn-textfield vn-one label="Botanical" model="$ctrl.botanical.botanical"></vn-textfield>
+            <vn-textfield
+                vn-one
+                label="Botanical"
+                model="$ctrl.botanical.botanical">
+            </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-                <vn-autocomplete vn-one
+            <vn-autocomplete
+                vn-one
                 initial-data="$ctrl.botanical.genus"
                 field="$ctrl.botanical.genusFk"
                 url="/item/api/genera"
@@ -26,7 +30,8 @@
                 value-field="genus_id"
                 label="Genus">
             </vn-autocomplete>
-                <vn-autocomplete vn-one
+            <vn-autocomplete
+                vn-one
                 initial-data="$ctrl.botanical.specie"
                 field="$ctrl.botanical.specieFk"
                 url="/item/api/species"
@@ -35,7 +40,6 @@
                 label="Species">
             </vn-autocomplete>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/item/src/create/item-create.html

@@ -7,8 +7,7 @@
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
     <div style="max-width: 70em; margin: 0 auto;">
-        <vn-card>
+        <vn-card pad-large>
-            <vn-vertical pad-large>
             <vn-title>New item</vn-title>
             <vn-horizontal>
                 <vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
@@ -19,8 +18,7 @@
                     label="Type"
                     show-field="name"
                     value-field="id"
-                        field="$ctrl.item.typeFk"
+                    field="$ctrl.item.typeFk">
-                    >
                 </vn-autocomplete>
                 <vn-autocomplete vn-one
                     url="/item/api/Intrastats"
@@ -29,8 +27,7 @@
                     value-field="id"
                     field="$ctrl.item.intrastatFk"
                     order="description ASC"
-                        filter-search="{where: {description: {regexp: 'search'}} }"
+                    filter-search="{where: {description: {regexp: 'search'}} }">
-                    >
                 <tpl-item>{{$parent.$parent.item.description}}</tpl-item>
                 </vn-autocomplete>
             </vn-horizontal>
@@ -40,16 +37,15 @@
                     label="Origin"
                     show-field="name"
                     value-field="id"
-                        field="$ctrl.item.originFk"
+                    field="$ctrl.item.originFk">
-                    ></vn-autocomplete>
+                </vn-autocomplete>
                 <vn-autocomplete vn-one
                     url="/item/api/Expences"
                     label="Expence"
                     field="$ctrl.item.expenceFk"
-                        initial-data="$ctrl.item.expence"
+                    initial-data="$ctrl.item.expence">
-                    ></vn-autocomplete>
+                </vn-autocomplete>
             </vn-horizontal>
-            </vn-vertical>
         </vn-card>
         <vn-button-bar>
             <vn-submit label="Create"></vn-submit>

client/item/src/data/item-data.html

@@ -10,8 +10,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" ng-cloak>
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Basic data</vn-title>
         <vn-horizontal>
             <vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
@@ -54,7 +53,6 @@
                 initial-data="$ctrl.item.expence">
             </vn-autocomplete>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
             <vn-submit label="Save"></vn-submit>

client/item/src/descriptor/item-descriptor.html

@@ -5,7 +5,7 @@
         </a>
         <vn-icon icon="inbox"></vn-icon>
         <a translate-attr="{title: 'Preview'}" ui-sref="item.card.summary">
-            <vn-icon icon="computer"></vn-icon>
+            <vn-icon icon="desktop_windows"></vn-icon>
         </a>
     </vn-horizontal>
     <vn-vertical>

client/item/src/history/item-history.html

@@ -1,7 +1,8 @@
 <mg-ajax path="/item/api/ItemLogs/getLog" options="vnIndexNonAuto"></mg-ajax>
-<vn-card>
+<vn-vertical pad-medium>
-    <vn-vertical pad-large>
+    <vn-card pad-large>
-        <vn-title vn-one margin-large-bottom>Item history</vn-title>
+    <vn-vertical>
+        <vn-title>Item history</vn-title>
         <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-column-header vn-two pad-medium-h field="description" text="Description"></vn-column-header>
             <vn-column-header vn-one pad-medium-h field="action" text="Action"></vn-column-header>
@@ -26,4 +27,5 @@
         </vn-horizontal>
         <vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
     </vn-vertical>
-</vn-card>
+    </vn-card>
+</vn-vertical>

client/item/src/niche/item-niche.html

@@ -4,9 +4,7 @@
     form = "form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.submit()">
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
-            <vn-one margin-medium-top>
         <vn-title>Item Niches</vn-title>
         <vn-horizontal ng-repeat="itemNiche in $ctrl.niches track by $index">
             <vn-autocomplete
@@ -46,8 +44,6 @@
                 </vn-icon>  
             </vn-one>
         </vn-horizontal>
-            </vn-one>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/item/src/tags/item-tags.html

@@ -1,22 +1,20 @@
+<mg-ajax path="/item/api/Tags" options="mgIndex as tags"></mg-ajax>
 <vn-watcher
     vn-id="watcher"
-    form = "form">
+    form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.submit()">
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
-            <vn-one margin-medium-top>
         <vn-title>Item tags</vn-title>
-                <mg-ajax path="/item/api/Tags" options="mgIndex as tags"></mg-ajax>
         <vn-horizontal ng-repeat="itemTag in $ctrl.itemTags track by $index">
             <vn-autocomplete
                 vn-three
-                        initial-data = "itemTag.tag"
+                initial-data="itemTag.tag"
-                        field = "itemTag.tagFk"
+                field="itemTag.tagFk"
-                        data = "tags.model"
+                data="tags.model"
-                        show-field = "name"
+                show-field="name"
-                        label = "Tag"
+                label="Tag"
-                        order = "name ASC"
+                order="name ASC"
                 vn-acl="buyer">
             </vn-autocomplete>
             <vn-textfield
@@ -39,13 +37,12 @@
                     margin-medium-left
                     orange
                     icon="add_circle"
-                            ng-if = "itemTag.showAddIcon && tags.model.length > $ctrl.itemTags.length" 
+                    ng-if="itemTag.showAddIcon && tags.model.length > $ctrl.itemTags.length" 
                     ng-click="$ctrl.addItemTag()"
                     vn-acl="buyer">
                 </vn-icon>  
             </vn-one>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

client/item/src/tax/item-tax.html

@@ -1,6 +1,5 @@
 <form name="form" ng-submit="$ctrl.submit()">
-    <vn-card>
+    <vn-card pad-large>
-        <vn-vertical pad-large>
         <vn-title>Item tax</vn-title>
         <vn-horizontal ng-repeat="tax in $ctrl.taxes track by $index">
             <vn-textfield vn-one
@@ -17,7 +16,6 @@
                 show-field="description">
             </vn-autocomplete>
         </vn-horizontal>
-        </vn-vertical>
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>

e2e/helpers/selectors.js

@@ -91,8 +91,8 @@ export default {
         agenctySecondOption: `${components.vnAutocomplete}[field="$ctrl.address.agencyModeFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(2)`,
         phoneInput: `${components.vnTextfield}[name="phone"]`,
         mobileInput: `${components.vnTextfield}[name="mobile"]`,
-        defaultAddress: 'vn-client-addresses > vn-vertical > vn-card > div > vn-vertical > vn-horizontal:nth-child(2) > vn-one > vn-horizontal > vn-one > div:nth-child(2)',
+        defaultAddress: 'vn-client-addresses > vn-vertical > vn-card > div > vn-horizontal:nth-child(2) > vn-one > vn-horizontal > vn-one > div:nth-child(2)',
-        secondMakeDefaultStar: 'vn-client-addresses > vn-vertical > vn-card > div > vn-vertical > vn-horizontal:nth-child(3) > vn-one > vn-horizontal > vn-none > i',
+        secondMakeDefaultStar: 'vn-client-addresses > vn-vertical > vn-card > div > vn-horizontal:nth-child(3) > vn-one > vn-horizontal > vn-none > i',
         firstEditButton: `${components.vnIconButton}[icon='edit']`,
         secondEditButton: `vn-horizontal:nth-child(3) > vn-one > vn-horizontal > a > ${components.vnIconButton}[icon='edit']`,
         activeCheckbox: `${components.vnCheck}[label='Enabled'] > label > input`,
@@ -120,14 +120,14 @@ export default {
         addNoteFloatButton: `${components.vnFloatButton}`,
         noteInput: `${components.vnTextarea}[label="Note"]`,
         saveButton: `${components.vnSubmit}`,
-        firstNoteText: 'vn-client-notes > vn-card > div > vn-vertical > vn-one:nth-child(2) > vn-horizontal.ng-binding'
+        firstNoteText: 'vn-client-notes .text'
     },
     clientCredit: {
         creditButton: `${components.vnMenuItem}[ui-sref="clientCard.credit.list"]`,
         addCreditFloatButton: `${components.vnFloatButton}`,
         creditInput: `${components.vnTextfield}[name="credit"]`,
         saveButton: `${components.vnSubmit}`,
-        firstCreditText: 'vn-client-credit-list > vn-card > div > vn-vertical > vn-one > vn-horizontal:nth-child(1) > vn-one'
+        firstCreditText: 'vn-client-credit-list .list-element > vn-one'
     },
     clientGreuge: {
         greugeButton: `${components.vnMenuItem}[ui-sref="clientCard.greuge.list"]`,
@@ -137,11 +137,11 @@ export default {
         typeInput: `${components.vnAutocomplete}[field="$ctrl.greuge.greugeTypeFk"] > vn-vertical > ${components.vnTextfield}`,
         typeSecondOption: `${components.vnAutocomplete}[field="$ctrl.greuge.greugeTypeFk"] > vn-vertical > vn-drop-down > vn-vertical > vn-auto:nth-child(2) > ul > li`,
         saveButton: `${components.vnSubmit}`,
-        firstGreugeText: 'vn-client-greuge-list > vn-card > div > vn-vertical > vn-one > vn-horizontal'
+        firstGreugeText: 'vn-client-greuge-list .list-element'
     },
     clientMandate: {
         mandateButton: `${components.vnMenuItem}[ui-sref="clientCard.mandate"]`,
-        firstMandateText: 'vn-client-mandate > vn-card > div > vn-vertical > vn-one > vn-horizontal'
+        firstMandateText: 'vn-client-mandate .list-element'
     },
     itemsIndex: {
         createItemButton: `${components.vnFloatButton}`,
@@ -184,23 +184,23 @@ export default {
     itemTags: {
         goToItemIndexButton: 'vn-item-descriptor [ui-sref="item.index"]',
         tagsButton: `${components.vnMenuItem}[ui-sref="item.card.tags"]`,
-        firstTagSelect: `vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
+        firstTagSelect: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
-        firstTagSelectOptionOne: `vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
+        firstTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        firstValueInput: `vn-horizontal:nth-child(3) > ${components.vnTextfield}`,
+        firstValueInput: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnTextfield}`,
-        secondTagSelect: `vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
+        secondTagSelect: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
-        secondTagSelectOptionOne: `vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
+        secondTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        secondValueInput: `vn-horizontal:nth-child(4) > ${components.vnTextfield}`,
+        secondValueInput: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnTextfield}`,
-        thirdTagSelect: `vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
+        thirdTagSelect: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
-        thirdTagSelectOptionOne: `vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
+        thirdTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        thirdValueInput: `vn-horizontal:nth-child(5) > ${components.vnTextfield}`,
+        thirdValueInput: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnTextfield}`,
-        fourthTagSelect: `vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
+        fourthTagSelect: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
-        fourthTagSelectOptionOne: `vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
+        fourthTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        fourthValueInput: `vn-horizontal:nth-child(6) > ${components.vnTextfield}`,
+        fourthValueInput: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnTextfield}`,
-        fifthRemoveTagButton: `vn-horizontal:nth-child(7) > vn-one > ${components.vnIcon}[icon="remove_circle_outline"]`,
+        fifthRemoveTagButton: `vn-item-tags vn-horizontal:nth-child(6) > vn-one > ${components.vnIcon}[icon="remove_circle_outline"]`,
         addItemTagButton: `${components.vnIcon}[icon="add_circle"]`,
-        fifthTagSelect: `vn-horizontal:nth-child(7) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
+        fifthTagSelect: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
-        fifthTagSelectOptionFive: `vn-horizontal:nth-child(7) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(5)`,
+        fifthTagSelectOptionFive: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(5)`,
-        fifthValueInput: `vn-horizontal:nth-child(7) > ${components.vnTextfield}`,
+        fifthValueInput: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnTextfield}`,
         submitItemTagsButton: `${components.vnSubmit}`
     },
     itemTax: {