responsive fetched-tags component #323 CR: Juan

client/ticket/src/fetched-tags/index.html

@@ -1,8 +1,11 @@
-<vn-vertical style="text-align:center">
+<vn-horizontal style="vertical-align:middle;">
     <vn-one>{{::$ctrl.sale.concept}}</vn-one>
-    <vn-one>   
-        <vn-one ng-repeat="fetchedTag in $ctrl.sale.item.tags track by $index">
-            <vn-label>{{::fetchedTag.tag.name}}</vn-label> {{::fetchedTag.value}}
-        </vn-one>
+    <vn-two>   
+        <section 
+            class="inline-tag ellipsize" ng-class="{'empty': !fetchedTag.value}" 
+            ng-repeat="fetchedTag in $ctrl.sale.item.tags track by $index" 
+            title="{{::fetchedTag.tag.name}}: {{::fetchedTag.value}}">
+            {{::fetchedTag.value}}
+        </section>
     </vn-one>
-</vn-vertical>
+</vn-horizontal>

client/ticket/src/fetched-tags/index.js

@@ -1,4 +1,5 @@
 import ngModule from '../module';
+import './style.scss';
 
 ngModule.component('vnFetchedTags', {
     template: require('./index.html'),

client/ticket/src/fetched-tags/style.scss

@@ -0,0 +1,42 @@
+@import "colors";
+
+vn-fetched-tags {
+    @media screen and (max-width: 1700px){
+        & vn-horizontal {
+            flex-direction: column;
+            text-align: center;
+
+            & .inline-tag {
+                display: inline-block;
+                float: none
+            }
+        }
+    }
+    
+    & vn-one:first-child {
+        padding-top: 0.36em
+    }
+
+    & .inline-tag {
+        background-color: $secondary-font-color;
+        margin: 0.4em 0.4em 0 0;
+        color: $color-white;
+        text-align: center;
+        font-size: 0.8em;
+        height: 1.25em;
+        padding: 0.4em;
+        float: left;
+        width: 5em
+    }
+
+    & .inline-tag.empty {
+        background-color: $main-bg
+    }
+
+    & .inline-tag.empty:after {
+        overflow: hidden;
+        display: block;
+        content: ' ';
+        clear: both
+    }
+}

client/ticket/src/sale-checked/index.html

@@ -8,7 +8,7 @@
                     <tr>
                         <th style="text-align:center" translate>Is checked</th>
                         <th number translate>Item</th>
-                        <th translate style="text-align:center">Description</th>
+                        <th translate>Description</th>
                         <th number translate>Quantity</th>
                     </tr>
                 </thead>

client/ticket/src/sale/index.html

@@ -29,7 +29,7 @@
                             <vn-multi-check data="index.model.instances"></vn-multi-check>
                         </th>
                         <th number translate>Item</th>
-                        <th translate style="text-align:center">Description</th>
+                        <th translate>Description</th>
                         <th number translate>Quantity</th>
                         <th number translate>Price</th>
                         <th number translate>Discount</th>

client/ticket/src/summary/index.html

@@ -58,7 +58,7 @@
                     <tr>
                         <th></th>
                         <th number translate>Item</th>
-                        <th translate style="text-align:center">Description</th>
+                        <th translate>Description</th>
                         <th number translate>Quantity</th>
                         <th number translate>Price</th>
                         <th number translate>Discount</th>

client/ticket/src/volume/index.html

@@ -16,7 +16,7 @@
                 <thead>
                     <tr>
                         <th number translate>Item</th>
-                        <th translate style="text-align:center">Description</th>
+                        <th translate>Description</th>
                         <th number translate>Quantity</th>
                         <th number translate>m³ per quantity</th>
                     </tr>