0034648: [UX] Ugly line breaks in the 'Receipt' with high prices

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
@@ -262,4 +262,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
@@ -241,13 +241,13 @@
   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;'
+    classes: 'order-total-qty'
   }, {
     name: 'totalgross',
-    style: 'float: left; width: 40%; text-align:right; font-weight:bold;'
+    classes: 'order-total-gross'
   }, {
     style: 'clear: both;'
   }],
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',
@@ -57,19 +57,13 @@
     }]
   }, {
     name: 'quantity',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-quantity'
   }, {
     name: 'price',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-price'
   }, {
     name: 'gross',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-gross'
   }, {
     style: 'clear: both;'
   }],
@@ -98,9 +92,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 +327,13 @@
   },
   components: [{
     name: 'tax',
-    attributes: {
-      style: 'float: left; width: 60%;'
-    }
+    classes: 'order-tax-label'
   }, {
     name: 'base',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'order-tax-base'
   }, {
     name: 'totaltax',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'order-tax-total'
   }, {
     style: 'clear: both;'
   }],

diff --git a/web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js b/web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
--- a/web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
+++ b/web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
@@ -706,8 +706,8 @@
   }
 };
 
-/* Adapt component font for dom object with id = objId */
-OB.UTIL.adaptFontSize = function (objId, minFntSz, maxFntSz, maxHgt, minLnCalc) {
+/* Adapt component font for dom object, passing the obj itself or its id as first argument */
+OB.UTIL.adaptFontSize = function (obj, minFntSz, maxFntSz, maxHgt, minLnCalc) {
 
   var maxWidth = false,
       currentWidth = false,
@@ -737,7 +737,11 @@
       currentTextObj.style.fontSize = finalFontSize + 'px';
     }
   }
-  currentBox = document.getElementById(objId);
+  if (typeof obj === 'string') {
+    currentBox = document.getElementById(obj);
+  } else if (typeof obj === 'object') {
+    currentBox = obj;
+  }
   if (!currentBox) {
     return;
   }
@@ -757,58 +761,18 @@
 
 /* Adapt all component's font for components with 'fitText' or 'buttonText' class */
 OB.UTIL.adaptAllFontSizes = function () {
+  var classNameArr = ['fitText', 'buttonText'],
+      minFontSize, maxFontSize, maxHeight, minLengthForCalc;
 
-  var maxWidth = false,
-      currentWidth = false,
-      currentBox = false,
-      currentTextObj = false,
-      classNameArr = ['fitText', 'buttonText'],
-      minFontSize = false,
-      maxFontSize = false,
-      maxHeight = false,
-      minLengthForCalc = 10;
-
-  function fit(maxFontSize) {
-    //to number
-    var tmpFontSize = OB.DEC.add(currentTextObj.style.fontSize.replace('px', ''), 0, 0);
-    currentTextObj.style.fontSize = tmpFontSize + 1 + 'px';
-    var tmpWidth = currentTextObj.offsetWidth,
-        tmpHeight = currentTextObj.offsetHeight,
-        finalFontSize = 0;
-    if (tmpWidth >= currentWidth && tmpWidth < maxWidth && tmpHeight < maxHeight && tmpFontSize < maxFontSize) {
-      currentWidth = currentTextObj.offsetWidth;
-      fit(maxFontSize);
-    } else {
-      finalFontSize = OB.DEC.add(currentTextObj.style.fontSize.replace('px', ''), 0, 0) - OB.DEC.One;
-      if (maxFontSize && maxFontSize < finalFontSize) {
-        finalFontSize = maxFontSize;
-      }
-      currentTextObj.style.fontSize = finalFontSize + 'px';
-    }
-  }
   _.each(classNameArr, function (className) {
     var objs = document.getElementsByClassName(className);
     if (objs.length !== 0) {
       minFontSize = className === 'buttonText' ? 15 : 9;
       maxFontSize = className === 'buttonText' ? 30 : 16;
       maxHeight = className === 'buttonText' ? 57 : 18;
+      minLengthForCalc = 10;
       _.each(objs, function (obj) {
-        currentBox = obj;
-        if (!currentBox) {
-          return;
-        }
-        currentTextObj = currentBox.getElementsByTagName('SPAN')[0];
-        currentTextObj.style.fontSize = maxFontSize + 'px';
-        maxWidth = currentBox.offsetWidth;
-        if (currentTextObj.offsetWidth !== 0 && currentTextObj.textContent.length >= minLengthForCalc) {
-          // start with the minFontSize(9px or 16px) to reduce iterations
-          // 9px is the minimum font size for the text and 16px is the minimun font size for the button
-          currentTextObj.style.fontSize = minFontSize + 'px';
-          currentWidth = currentTextObj.offsetWidth;
-          fit(maxFontSize);
-        } else {
-          currentTextObj.style.fontSize = maxFontSize + 'px';
-        }
+        OB.UTIL.adaptFontSize = function (obj, minFontSize, maxFontSize, maxHeight, minLengthForCalc);
       });
     }
   });