From 22ce6425de5bca8cda2170467daa0504fa4d20a8 Mon Sep 17 00:00:00 2001 From: Juan Ferrer Toribio Date: Tue, 15 Nov 2022 22:26:48 +0100 Subject: [PATCH] refs #3971 Style fixes --- debian/changelog | 2 +- forms/cms/home/style.css | 20 ++++-------- forms/ecomerce/basket/basket.js | 27 +++++++--------- forms/ecomerce/basket/style.css | 12 ++++--- forms/ecomerce/basket/ui.xml | 2 +- forms/ecomerce/ticket/style.css | 10 +++--- forms/ecomerce/ticket/ui.xml | 6 ++-- js/hedera/gui.js | 16 ++++++--- js/hedera/gui.scss | 34 +++++++++----------- js/htk/button/style.scss | 5 +++ js/htk/search-entry/style.scss | 4 ++- js/htk/style/responsive.scss | 57 +++++++-------------------------- package.json | 2 +- 13 files changed, 86 insertions(+), 111 deletions(-) diff --git a/debian/changelog b/debian/changelog index 36df4706..ffe054f3 100644 --- a/debian/changelog +++ b/debian/changelog @@ -1,4 +1,4 @@ -hedera-web (22.44.14) stable; urgency=low +hedera-web (22.44.15) stable; urgency=low * Initial Release. diff --git a/forms/cms/home/style.css b/forms/cms/home/style.css index 2093251d..15ecc290 100644 --- a/forms/cms/home/style.css +++ b/forms/cms/home/style.css @@ -1,13 +1,13 @@ .home { - padding: 0 !important; + padding: 6px !important; } /* News panel */ .column { - margin: .5em; - max-width: 120em; + margin: 0 auto; + max-width: 1680px; } .action-bar button.start-order { border: 1px solid white; @@ -21,7 +21,7 @@ .new { text-align: left; - margin: .5em; + margin: 6px; } .new img { display: block; @@ -29,7 +29,7 @@ width: 100%; } .new .top { - padding: 1.5em; + padding: 18px; padding-bottom: 1px; } .new h2 { @@ -39,14 +39,8 @@ padding: 0; } -.new-info { - font-size: 0.9rem; - color: #444; - text-align: right; - margin: .8em 0; -} .new-text { - margin: 1.5em 0; + margin: 18px 0; font-family: 'Open Sans'; } .new-text a { @@ -56,5 +50,5 @@ text-decoration: underline; } .new-text li { - margin: 0.4em 0; + margin: 4px 0; } \ No newline at end of file diff --git a/forms/ecomerce/basket/basket.js b/forms/ecomerce/basket/basket.js index e967ef52..95d636aa 100644 --- a/forms/ecomerce/basket/basket.js +++ b/forms/ecomerce/basket/basket.js @@ -1,38 +1,35 @@ Hedera.Basket = new Class({ - Extends: Hedera.Form + Extends: Hedera.Form, - ,open: function() { + open() { this.close(); this.isOpen = true; Hedera.BasketChecker.check(this.conn, this.hash, this.onBasketCheck.bind(this)); - } + }, - ,onBasketCheck: function(isOk) { + onBasketCheck(isOk) { if (isOk) this.loadUi(); - } + }, - ,activate: function() { + activate() { this.$.items.setInfo('bi', 'myBasketItem', 'hedera'); - } + }, - ,onConfigureClick: function() { + onConfigureClick() { Htk.Toast.showWarning(_('RememberReconfiguringImpact')); this.hash.setAll({form: 'ecomerce/checkout'}); - } + }, - ,onDeleteClick: function(form) { + onDeleteClick(form) { if (confirm(_('ReallyDelete'))) form.deleteRow(); - } + }, - ,subtotal: function(form) { + subtotal(form) { return form.$.amount * form.$.price; } }); - - - diff --git a/forms/ecomerce/basket/style.css b/forms/ecomerce/basket/style.css index a573580b..3d47f636 100644 --- a/forms/ecomerce/basket/style.css +++ b/forms/ecomerce/basket/style.css @@ -20,21 +20,25 @@ .basket .line { display: flex; + align-items: center; gap: 12px; - margin: 20px 0; - height: 68px; + margin: 10px 0; + height: 80px; +} +.basket .line:first-child { + margin-top: 0; } .basket .line:last-child { margin-bottom: 0; } .basket .line > .delete { - align-self: center; margin: 0 -8px; } .basket .line > .photo { flex: none; border-radius: 50%; width: 68px; + height: 68px; gap: 0; } .basket .line > .info { @@ -49,7 +53,7 @@ .basket .line > .info > h2 { font-size: .9rem; font-weight: normal; - margin-bottom: 2px; + margin: 0; } .basket .line > .info > p { margin: 0; diff --git a/forms/ecomerce/basket/ui.xml b/forms/ecomerce/basket/ui.xml index 1988c3e6..fd23a819 100644 --- a/forms/ecomerce/basket/ui.xml +++ b/forms/ecomerce/basket/ui.xml @@ -26,7 +26,7 @@

-
+
SELECT bi.id, bi.amount, bi.price, i.longName item, diff --git a/forms/ecomerce/ticket/style.css b/forms/ecomerce/ticket/style.css index 5dc22bd5..f3b6ac24 100644 --- a/forms/ecomerce/ticket/style.css +++ b/forms/ecomerce/ticket/style.css @@ -34,9 +34,10 @@ .ticket .line { display: flex; + align-items: center; gap: 12px; - margin: 24px 0; - height: 68px; + margin: 10px 0; + height: 80px; } .ticket .line:last-child { margin-bottom: 0; @@ -45,6 +46,8 @@ flex: none; border-radius: 50%; width: 68px; + height: 68px; + gap: 0; } .ticket .line > .info { flex: 1; @@ -69,9 +72,6 @@ .ticket .line > .info .discount { color: green; } -.ticket .line > .info > .amount { - float: left; -} .ticket .line > .info > .subtotal { float: right; } diff --git a/forms/ecomerce/ticket/ui.xml b/forms/ecomerce/ticket/ui.xml index 000b6efb..c31e5f4e 100644 --- a/forms/ecomerce/ticket/ui.xml +++ b/forms/ecomerce/ticket/ui.xml @@ -66,9 +66,6 @@

{{iter.value5}} {{iter.value6}} {{iter.value7}}

-

- {{iter.quantity}} x {{Vn.Value.format(iter.price, '%.2d€')}} -

{{Vn.Value.format(this.discountSubtotal(iter), '%.2d€')}} - @@ -76,6 +73,9 @@ {{Vn.Value.format(this.subtotal(iter), '%.2d€')}}

+

+ {{iter.quantity}} x {{Vn.Value.format(iter.price, '%.2d€')}} +

diff --git a/js/hedera/gui.js b/js/hedera/gui.js index 355ea778..7e13dcfa 100644 --- a/js/hedera/gui.js +++ b/js/hedera/gui.js @@ -400,16 +400,24 @@ module.exports = new Class({ } ,setForm: function(form) { - Vn.Node.removeChilds(this.$.formHolder); + const holder = this.$.formHolder; + Vn.Node.removeChilds(holder); if (form) { - this.$.formHolder.appendChild(form); - setTimeout(this._onSetFormTimeout.bind(this), 0); + holder.appendChild(form); + holder.classList.add('move-start'); + setTimeout(() => this._onSetFormTimeout(), 10); } } ,_onSetFormTimeout: function() { - Vn.Node.addClass(this.$.formHolder, 'show'); + const holder = this.$.formHolder; + holder.classList.remove('move-start'); + holder.classList.add('move-end'); + holder.addEventListener('transitionend', + () => holder.classList.remove('move-end'), + {once: true} + ); } ,setTitle: function(title) { diff --git a/js/hedera/gui.scss b/js/hedera/gui.scss index 6ee4f165..b2374167 100644 --- a/js/hedera/gui.scss +++ b/js/hedera/gui.scss @@ -46,12 +46,12 @@ $navbar-height: 64px; } } & > .title-wraper { - flex: auto; display: flex; align-items: center; gap: 12px; overflow: hidden; padding-left: 12px; + flex-shrink: 2; & > .title { overflow: hidden; @@ -67,20 +67,17 @@ $navbar-height: 64px; } } & > .action-bar { - flex: none; + flex: auto; height: 100%; & > div { - height: 100%; display: flex; + justify-content: flex-end; + height: 100%; align-items: center; padding-right: 12px; padding-left: 4px; gap: 2px; - - & > * { - float: right; - } } button { margin: 0; @@ -283,18 +280,19 @@ $navbar-height: 64px; position: relative; height: inherit; - opacity: 0; - transform: translateZ(0) translateX(-2em); - -webkit-transform: translateZ(0) translateX(-2em); - - transition-property: opacity, transform; - transition-duration: 200ms; - transition-timing-function: ease-out; - - &.show { + &.move-start { + opacity: 0; + transform: translate3d(-2em, 0, 0); + -webkit-transform: translate3d(-2em, 0, 0); + } + &.move-end { opacity: 1; - transform: translateZ(0) translateX(0em); - -webkit-transform: translateZ(0) translateX(0em); + transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + + transition-property: opacity, transform; + transition-duration: 200ms; + transition-timing-function: ease-out; } & > * { padding: $spacing-md; diff --git a/js/htk/button/style.scss b/js/htk/button/style.scss index 4ac5ef43..d0863010 100644 --- a/js/htk/button/style.scss +++ b/js/htk/button/style.scss @@ -7,4 +7,9 @@ & > .htk-icon { display: block; } + & > .text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } } \ No newline at end of file diff --git a/js/htk/search-entry/style.scss b/js/htk/search-entry/style.scss index 071f7d32..10c9601c 100644 --- a/js/htk/search-entry/style.scss +++ b/js/htk/search-entry/style.scss @@ -8,6 +8,8 @@ border-radius: 20px; padding: 0 12px; overflow: hidden; + flex: auto; + max-width: 300px; & > * { display: inline-block; @@ -19,9 +21,9 @@ color: gray; } & > .entry { + flex: auto; margin: 0; border: none; - width: 80px; box-shadow: none; padding-right: 0; padding-left: 0; diff --git a/js/htk/style/responsive.scss b/js/htk/style/responsive.scss index 5dcf2f51..bb7b61ef 100644 --- a/js/htk/style/responsive.scss +++ b/js/htk/style/responsive.scss @@ -5,48 +5,15 @@ /* Standard */ body { font-size: 14px; } -/* Desktop - Laptop 1360x768 */ -@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px) { - body { font-size: 14px; } -} - -/* Desktop - FHD 1920x1080 */ -@media (max-resolution: 119dpi) and (min-device-width: 1900px) { - body { font-size: 14px; } -} - -/* Mobile - Low DPI */ -@media - (min-resolution: 120dpi), - (-webkit-min-device-pixel-ratio: 1.5) { - body { font-size: 13px; } -} -@media - (min-resolution: 144dpi), - (-webkit-min-device-pixel-ratio: 1.5) { - body { font-size: 13px; } -} - -/* Mobile - Normal DPI */ -@media - (max-device-width: 383px) and (min-resolution: 192dpi), - (max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2) { - body { font-size: 13px; } -} -@media - (min-device-width: 384px) and (min-resolution: 192dpi), - (min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2) { - body { font-size: 13px; } -} - -/* Mobile - High DPI */ -@media - (max-device-width: 411px) and (min-resolution: 249dpi), - (max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3) { - body { font-size: 13px; } -} -@media - (min-device-width: 414px) and (min-resolution: 249dpi), - (min-device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) { - body { font-size: 13px; } -} +/* smartphone, portrait */ +@media (min-width:320px) { body { font-size: 13px; } } +/* smartphone, landscape */ +@media (min-width:480px) { body { font-size: 13px; } } +/* tablet, portrait */ +@media (min-width:600px) { body { font-size: 13px; } } +/* tablet, landscape */ +@media (min-width:801px) { body { font-size: 13px; } } +/* big landscape tablets, laptop and desktop */ +@media (min-width:1025px) { body { font-size: 14px; } } +/* hi-res laptop and desktop */ +@media (min-width:1281px) { body { font-size: 14px; } } diff --git a/package.json b/package.json index 08bc4cf1..9f5056b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hedera-web", - "version": "22.44.14", + "version": "22.44.15", "description": "Verdnatura web page", "license": "GPL-3.0", "repository": {