# HG changeset patch
# User Miguel de Juana <miguel.dejuana@openbravo.com>
# Date 1480678564 -3600
#      Fri Dec 02 12:36:04 2016 +0100
# Node ID 44371e783b965d2b3d33ed85b5f7cd4274b5c4bd
# Parent  e895746d255591996c8f7ce9428e30c308f7039e
Fixed issue 0034648: [UX] Ugly line breaks in the 'Receipt' with high prices

- Adapt components to use classes and to resize font
- Add classes to show properly depending the aspect ratio

diff --git a/web/org.openbravo.retail.posterminal/css/obpos-main.css b/web/org.openbravo.retail.posterminal/css/obpos-main.css
--- a/web/org.openbravo.retail.posterminal/css/obpos-main.css
+++ b/web/org.openbravo.retail.posterminal/css/obpos-main.css
@@ -601,4 +601,135 @@
 
 .blackecolor {
   color: black;
+}
+
+
+.orderline-quantity {
+  float: left;
+  width: 55px;
+  text-align: right;
+}
+
+.orderline-price,
+.orderline-gross {
+  float: left;
+  width: 105px;
+  text-align: right;
+}
+
+.orderline-productname {
+  float: left;
+  width: calc(100% - 265px);  /* The same than calc(100% - 55px - 2 * 105px); */
+  padding: 0px;
+}
+
+.orderline-characteristicsDescription {
+  width: calc(100% - 210px);  /* The same than calc(100% - 2 * 105px); */
+  color:grey;
+  padding-left: 0%;
+  padding-top: 4px;
+  font-size: 14px;
+  clear: both;
+}
+
+.order-total-label {
+  float: left;
+  width: calc(100% - 265px);  /* The same than calc(100% - 55px - 2 * 105px); */
+}
+
+.order-total-qty {
+  float: left;
+  width: 55px;
+  text-align: right;
+  font-weight: bold;
+}
+
+.order-total-gross {
+  float: left;
+  width: 210px;
+  text-align: right;
+  font-weight: bold;
+}
+
+.order-tax-label {
+  float: left;
+  width: calc(100% - 210px);  /* The same than calc(100% - 2 * 105px); */
+}
+
+.order-tax-base,
+.order-tax-total {
+  float: left;
+  width: 105px;
+  text-align: right;
+}
+
+/*
+   Media query for dynamic 'unit price' and 'gross price' widths from 80px to 105px when
+   the viewport aspect ratio goes from 5:4 (1.25) to 3:2 (1.5) respectively in landscape mode and
+   from 10:16 (0.625) to 3:4 (0.75) respectively in portrait mode.
+   The product name is also adapted to fill the remaining space.
+*/
+
+@media all and (min-width: 701px) and (max-aspect-ratio: 150/100), (max-width: 700px) and (max-aspect-ratio: 3/4) {
+  .orderline-price,
+  .orderline-gross {
+    width: calc((25/79 * 100%) - 39px);
+  }
+
+  .orderline-productname {
+    width: calc((29/79 * 100%) + 23px);  /* The same than calc(100% - 55px - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .orderline-characteristicsDescription {
+    width: calc((29/79 * 100%) + 78px);  /* The same than calc(100% - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-total-label {
+    width: calc((29/79 * 100%) + 23px);  /* The same than calc(100% - 55px - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-total-gross {
+    width: calc((50/79 * 100%) - 78px);  /* The same than calc(2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-tax-label {
+    width: calc((29/79 * 100%) + 78px);  /* The same than calc(100% - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-tax-base,
+  .order-tax-total {
+    width: calc((25/79 * 100%) - 39px);
+  }
+}
+
+@media all and (min-width: 701px) and (max-aspect-ratio: 125/100), (max-width: 700px) and (max-aspect-ratio: 10/16) {
+  .orderline-price,
+  .orderline-gross {
+    width: 80px;
+  }
+
+  .orderline-productname {
+    width: calc(100% - 215px);  /* The same than calc(100% - 55px - 2 * 80px); */
+  }
+
+  .orderline-characteristicsDescription {
+    width: calc(100% - 160px);  /* The same than calc(100% - 2 * 80px); */
+  }
+
+  .order-total-label {
+    width: calc(100% - 215px);  /* The same than calc(100% - 55px - 2 * 80px); */
+  }
+
+  .order-total-gross {
+    width: 160px;
+  }
+
+  .order-tax-label {
+    width: calc(100% - 160px);  /* The same than calc(100% - 2 * 80px); */
+  }
+
+  .order-tax-base,
+  .order-tax-total {
+    width: 80px;
+  }
 }
\ No newline at end of file
diff --git a/web/org.openbravo.retail.posterminal/js/components/order.js b/web/org.openbravo.retail.posterminal/js/components/order.js
--- a/web/org.openbravo.retail.posterminal/js/components/order.js
+++ b/web/org.openbravo.retail.posterminal/js/components/order.js
@@ -244,21 +244,32 @@
   style: 'position: relative; padding: 10px; height: 35px',
   components: [{
     name: 'lblTotal',
-    style: 'float: left; width: 40%;'
+    classes: 'order-total-label'
   }, {
-    name: 'totalqty',
-    style: 'float: left; width: 20%; text-align:right; font-weight:bold;'
+    kind: 'OB.UI.FitText',
+    classes: 'order-total-qty fitText',
+    components: [{
+      tag: 'span',
+      name: 'totalqty'
+    }]
   }, {
-    name: 'totalgross',
-    style: 'float: left; width: 40%; text-align:right; font-weight:bold;'
+    kind: 'OB.UI.FitText',
+    classes: 'order-total-gross fitText',
+    components: [{
+      tag: 'span',
+      name: 'totalgross'
+    }]
   }, {
     style: 'clear: both;'
   }],
   renderTotal: function (newTotal) {
-    this.$.totalgross.setContent(OB.I18N.formatCurrency(newTotal));
-    OB.UTIL.HookManager.executeHooks('OBPOS_UpdateTotalReceiptLine', {
-      totalline: this
-    });
+    if (newTotal !== this.$.totalgross.getContent()) {
+      this.$.totalgross.setContent(OB.I18N.formatCurrency(newTotal));
+      OB.UTIL.HookManager.executeHooks('OBPOS_UpdateTotalReceiptLine', {
+        totalline: this
+      });
+      OB.UTIL.calculateFontSizes();
+    }
   },
   renderQty: function (newQty) {
     this.$.totalqty.setContent(newQty);
diff --git a/web/org.openbravo.retail.posterminal/js/components/renderorderline.js b/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
--- a/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
+++ b/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
@@ -46,7 +46,7 @@
   }, {
     name: 'nameContainner',
     tag: 'div',
-    style: 'float: left;width: 40%; padding: 0px;',
+    classes: 'orderline-productname',
     components: [{
       name: 'serviceIcon',
       kind: 'Image',
@@ -56,20 +56,28 @@
       name: 'product'
     }]
   }, {
-    name: 'quantity',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    kind: 'OB.UI.FitText',
+    classes: 'orderline-quantity fitText',
+    components: [{
+      tag: 'span',
+      name: 'quantity'
+
+    }]
   }, {
-    name: 'price',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    kind: 'OB.UI.FitText',
+    classes: 'orderline-price fitText',
+    components: [{
+      tag: 'span',
+      name: 'price'
+
+    }]
   }, {
-    name: 'gross',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    kind: 'OB.UI.FitText',
+    classes: 'orderline-gross fitText',
+    components: [{
+      tag: 'span',
+      name: 'gross'
+    }]
   }, {
     style: 'clear: both;'
   }],
@@ -98,9 +106,7 @@
         components: [{
           name: 'characteristicsDescription',
           content: OB.UTIL.getCharacteristicValues(this.model.get('product').get('characteristicDescription')),
-          attributes: {
-            style: 'width: 60.1%; color:grey; padding-left: 0%; clear: both; '
-          }
+          classes: 'orderline-characteristicsDescription'
         }, {
           style: 'clear: both;'
         }]
@@ -335,19 +341,23 @@
   },
   components: [{
     name: 'tax',
-    attributes: {
-      style: 'float: left; width: 60%;'
-    }
+    classes: 'order-tax-label'
   }, {
-    name: 'base',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    kind: 'OB.UI.FitText',
+    classes: 'order-tax-base fitText',
+    components: [{
+      tag: 'span',
+      name: 'base'
+
+    }]
   }, {
-    name: 'totaltax',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    kind: 'OB.UI.FitText',
+    classes: 'order-tax-total fitText',
+    components: [{
+      tag: 'span',
+      name: 'totaltax'
+
+    }]
   }, {
     style: 'clear: both;'
   }],