diff --git a/debian/changelog b/debian/changelog index 1ef5617f..54cab960 100644 --- a/debian/changelog +++ b/debian/changelog @@ -1,4 +1,4 @@ -hedera-web (22.46.7) stable; urgency=low +hedera-web (22.46.8) stable; urgency=low * Initial Release. diff --git a/forms/ecomerce/catalog/style.scss b/forms/ecomerce/catalog/style.scss index 84702861..ae618905 100644 --- a/forms/ecomerce/catalog/style.scss +++ b/forms/ecomerce/catalog/style.scss @@ -1,6 +1,14 @@ + +@import "../../../js/htk/style/classes"; + .catalog { margin-right: 18em; } +.catalog-actions { + .htk-search-entry { + margin-right: 4px; + } +} .title ._subtitle { font-size: .7rem; color: #bbb; @@ -19,80 +27,82 @@ width: 18em; overflow: auto; background-color: #fafafa; -} -.right-panel .basket-info { - background-color: #8cc63f; - color: white; - padding: 1.2em 2em; - border-radius: .5em; - margin: 1em; - text-align: center; -} -.right-panel .basket-info > button { - color: white; - background-color: rgba(0, 0, 0, .1); - margin: 0 auto; - display: block; - margin-top: 10px; - padding: 10px 15px; -} -.right-panel .basket-info > button:hover { - background-color: white; - color: #60872c; -} -.right-panel .basket-info > p { - margin: 0; - padding: .4em 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.right-panel .filter { - margin: 1em; -} -.right-panel .categories, -.right-panel .filters, -.right-panel .order { - margin: 1.5em 0; -} -.right-panel .filters, -.right-panel .order { - display: none; -} -.right-panel .realm-msg { - margin-top: 1em; -} -.right-panel .realm-msg > h5 { - font-weight: normal; - text-align: center; - padding: 2.5em 0; - color: #777; -} -.right-panel h2 { - font-weight: normal; - color: #777; - font-size: 1.1rem; -} -.right-panel .realms > div > div { - text-align: center; -} -.right-panel .realms a { - display: inline-block; - width: 25%; - padding: .6em; - box-sizing: border-box; - border-radius: 50%; -} -.right-panel .realms a:hover { - background-color: rgba(1, 1, 1, .05); -} -.right-panel .realms a > img { - display: block; - padding: 0; - width: 100%; -} -.right-panel .filters > button { - margin-top: 1em; + + .basket-info { + background-color: #8cc63f; + color: white; + padding: 17px 28px; + border-radius: .5em; + margin: 14px; + text-align: center; + + & > button { + color: white; + background-color: rgba(0, 0, 0, .1); + margin: 0 auto; + display: block; + margin-top: 10px; + padding: 10px 15px; + } + & > button:hover { + background-color: white; + color: #60872c; + } + & > p { + margin: 0; + padding: .4em 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + .filter { + margin: 14px; + } + .categories, + .filters, + .order { + margin: 20px 0; + } + .filters, + .order { + display: none; + } + .realm-msg { + margin-top: 14px; + } + .realm-msg > h5 { + font-weight: normal; + text-align: center; + padding: 34px 0; + color: #777; + } + h2 { + font-weight: normal; + color: #777; + font-size: 1.1rem; + } + .realms > div > div { + text-align: center; + } + .realms a { + display: inline-block; + width: 25%; + padding: .6em; + box-sizing: border-box; + border-radius: 50%; + } + .realms a:hover { + background-color: rgba(1, 1, 1, .05); + } + .realms a > img { + display: block; + padding: 0; + width: 100%; + } + .filters > button { + margin-top: 1em; + } } /* Items */ @@ -100,143 +110,170 @@ .item-box { display: flex; box-sizing: border-box; + + & > .htk-image { + flex: none; + } + & > .item-info { + flex: auto; + position: relative; + + .second-category { + font-weight: bold; + color: orange; + } + .third-category { + font-weight: bold; + color: red; + } + & > h2 { + text-overflow: ellipsis; + overflow: hidden; + } + .item-id { + float: right; + } + & > .available-price { + position: absolute; + bottom: 0; + right: 0; + white-space: nowrap; + font-size: .95em; + text-align: right; + align-items: middle; + column-gap: .2em; + display: flex; + + & > * { + border-radius: .2em; + padding: .1em .3em; + border: .1em transparent solid; + box-sizing: border-box; + } + } + .grouping { + width: 38px; + background-color: #ddd; + } + .available { + width: 65px; + border-color: #bbb; + color: #777; + } + .price { + width: 75px; + border-color: #9cbc28; + color: #748c1e; + } + } } -.item-box > .htk-image { - flex: none; + +.item-info { + & > h2 { + font-weight: normal; + font-size: 1rem; + margin-bottom: .15em; + } + & > .sub-name { + margin: 0; + padding: 0; + color: #777; + font-size: .9rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-transform: uppercase; + margin-bottom: .2em; + } + .item-id { + font-size: .9rem; + color: #777; + } + & > p { + margin: 0; + margin-bottom: .2em; + } } -.item-box > .item-info { - flex: auto; - position: relative; + +/* Tags */ + +.grid-view, +.list-view, +.item-card { + .item-tags { + font-size: .8em; + display: table; + color: #333; + margin: 0; + width: auto; + border-collapse: collapse; + + td:first-child { + color: #999; + padding-right: .5em; + } + } } -.item-info .second-category { - font-weight: bold; - color: orange; -} -.item-info .third-category { - font-weight: bold; - color: red; -} -.item-info > h2 { - padding: 0; - margin-bottom: .15em; - font-weight: normal; - font-size: 1rem; - text-overflow: ellipsis; - overflow: hidden; - max-height: 3em; -} -.item-info > p { - margin: 0; - padding: 0; - color: #777; - font-size: .8em; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.item-info .sub-name { - text-transform: uppercase; - padding: 0; - margin-bottom: .2em; - font-size: .9em; -} -.item-info > .htk-button { - margin: -0.3em; - padding: .3em; -} -.item-info > .htk-button > img { - vertical-align: middle; -} -.item-info .item-id { - float: right; - font-size: .8rem; - line-height: 1.8em; - color: #777; -} -.item-info .available-price { - position: absolute; - bottom: 0; - right: 0; - white-space: nowrap; - font-size: .95em; - text-align: right; - align-items: middle; - column-gap: .2em; - display: flex; -} -.item-info .available-price > * { - border-radius: .2em; - padding: .1em .3em; - border: .1em transparent solid; - box-sizing: border-box; -} -.item-info .grouping { - width: 38px; - background-color: #ddd; -} -.item-info .available { - width: 65px; - border-color: #bbb; - color: #777; -} -.item-info .price { - width: 75px; - border-color: #9cbc28; - color: #748c1e; -} -.tags { - font-size: .8em; - display: table; - color: #333; - margin: 0; - width: auto; - border-collapse: collapse; -} -.tags td:first-child { - color: #999; - padding-right: .5em; +.grid-view, +.item-card { + .item-tags { + td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 14px; + } + td:first-child { + max-width: 90px; + width: 90px; + } + td:last-child { + max-width: 120px; + width: 120px; + } + } } /* Grid view */ -.grid-view > * { - display: flex; - gap: 16px; - flex-wrap: wrap; - justify-content: center; -} -.grid-view .item-box { - border-radius: .6em; - box-shadow: .05em .05em .2em rgba(0, 0, 0, .1); - overflow: hidden; - background-color: white; +.grid-view { + & > * { + display: flex; + gap: 16px; + flex-wrap: wrap; + justify-content: center; + } + .item-box { + border-radius: .6em; + box-shadow: .05em .05em .2em rgba(0, 0, 0, .1); + overflow: hidden; + background-color: white; + flex-direction: column; + width: 260px; + overflow: hidden; - flex-direction: column; - width: 260px; - overflow: hidden; -} -.grid-view .item-box:hover { - background-color: #efefef; -} -.grid-view .item-info { - margin: 10px; - height: 142px; -} -.grid-view .item-box > .htk-image { - width: 100%; - min-height: 260px; -} -.grid-view .item-box > .item-info { - flex: auto; - overflow: hidden; -} -.grid-view .item-info .tags td { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 6em; - width: 6em; - line-height: 1.1em; + &:hover { + background-color: #efefef; + } + & > .htk-image { + width: 100%; + min-height: 260px; + } + & > .item-info { + flex: auto; + overflow: hidden; + margin: 10px; + height: 158px; + + & > h2 { + max-height: 48px; + } + & > .item-tags { + position: absolute; + top: 74px; + } + } + } } /* List view */ @@ -246,54 +283,57 @@ box-shadow: .05em .05em .2em rgba(0, 0, 0, .1); overflow: hidden; background-color: white; - max-width: 544px; margin: 0 auto; -} -.list-view .item-box { - gap: 10px; - margin: 0; - padding: 10px; - height: 130px; - overflow: visible; - border-bottom: 1px solid #DDD; -} -.list-view .item-box:last-child { - border-bottom: none; -} -.list-view .item-box > .htk-image { - width: 110px; - height: 110px; - border-radius: 50%; -} -.list-view .item-info { - overflow: hidden; -} -.list-view .item-info > h2 { - font-size: 1rem; - white-space: nowrap; -} -.list-view .item-info > .color { - display: none; -} -.list-view .item-info > .htk-button { - float: right; -} -.list-view .item-info .tags { - display: block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.list-view .item-info .tags > tr { - display: inline-block; -} -.list-view .item-info .tags td { - display: inline-block; - padding-right: .5em; -} -.list-view .item-info .tags td:first-child { - display: none; + + .item-box { + gap: 10px; + margin: 0; + padding: 10px; + height: 130px; + overflow: visible; + border-bottom: 1px solid #DDD; + + &:last-child { + border-bottom: none; + } + & > .htk-image { + width: 110px; + height: 110px; + border-radius: 50%; + } + & > .item-info { + overflow: hidden; + + & > h2 { + white-space: nowrap; + } + & > .color { + display: none; + } + & > .htk-button { + float: right; + } + & > .item-tags { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + & > tr { + display: inline-block; + } + td { + display: inline-block; + padding-right: .5em; + + &:first-child { + display: none; + } + } + } + } + } } /* Card */ @@ -302,63 +342,69 @@ overflow: auto; } .item-card { - font-size: .9em; + font-size: .9rem; width: 20em; -} -.item-card .top { - padding: 1em; -} -.item-card .item-info { - margin-left: 9em; - height: 8em; -} -.item-card .htk-image { - height: 8em; - width: 8em; - float: left; - border-radius: .3em; -} -.item-card .desc { - clear: both; - margin-top: 1em 0; - font-size: .9em; -} -.item-card .lots-grid { - border-top: 1px solid #DDD; -} -.item-card .lots-grid tr { - height: 3em; -} -.item-card .lots-grid .cell-spin { - max-width: initial; - width: 3em; -} -.item-card .lots-grid .price-kg { - font-size: .8em; - color: #999; - width: 1px; -} -.item-card .lots-grid .cell-text { - max-width: initial; - width: auto; -} -.item-card .lots-grid .cell-button { - max-width: initial; - width: 1em; -} -.item-card .footer { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #1a1a1a; - color: white; - padding: 10px; -} -.item-card .footer > button:hover { - background-color: rgba(255, 255, 255, .1); -} -.item-card .footer > button > .htk-icon { - display: block; + + & > .top { + padding: 1em; + + & > .item-info { + margin-left: 9em; + height: 8em; + } + & > .htk-image { + height: 8em; + width: 8em; + float: left; + border-radius: .3em; + } + & > .desc { + clear: both; + margin-top: 15px 0; + font-size: .9rem; + } + } + & > .lots-grid { + border-top: 1px solid #DDD; + + tr { + height: 45px; + } + .cell-spin { + max-width: initial; + width: 42px; + } + .price-kg { + font-size: .8rem; + color: #999; + width: 1px; + } + .cell-text { + max-width: initial; + width: auto; + } + .cell-button { + max-width: initial; + width: 14px; + } + } + & > .footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #1a1a1a; + color: white; + padding: 10px; + + & > button { + &:hover { + background-color: rgba(255, 255, 255, .1); + } + & > .htk-icon { + display: block; + } + } + } } /* Mobile */ @@ -370,7 +416,7 @@ display: block; } -@media (max-width: 960px) { +@include mobile { .catalog-actions > button.menu { display: block; } @@ -393,8 +439,9 @@ .grid-view .item-box { width: 100%; max-width: 450px; - } - .grid-view .item-box > .htk-image { - min-height: initial; + + & > .htk-image { + min-height: initial; + } } } diff --git a/forms/ecomerce/catalog/ui.xml b/forms/ecomerce/catalog/ui.xml index 5a33f867..3b519ecd 100644 --- a/forms/ecomerce/catalog/ui.xml +++ b/forms/ecomerce/catalog/ui.xml @@ -160,15 +160,15 @@ title="_Zoom image"/>

- - #{{item.id}} - {{item.item}}

+ + #{{item.id}} + {{item.subName}}

- +
@@ -429,12 +429,12 @@ editable="true"/>

{{card.item}}

-

{{card.subname}}

-

#{{card.id}}

+

{{card.subName}}

+

#{{card.id}}

{{Vn.Value.format(card.stems, _('%.0d Units'))}}

{{extendedCard.description}}

- + .navbar { padding-left: 12px; left: 0; diff --git a/js/htk/assistant-bar/index.js b/js/htk/assistant-bar/index.js index aac2059a..fd96eaa8 100644 --- a/js/htk/assistant-bar/index.js +++ b/js/htk/assistant-bar/index.js @@ -41,7 +41,7 @@ module.exports = new Class({ var node = this.createRoot('div'); var previousButton = new Htk.Button({ - icon: 'arrow_back_ios', + icon: 'arrow_back', tip: 'Previous' }).node; previousButton.classList.add('previous'); @@ -53,7 +53,7 @@ module.exports = new Class({ node.appendChild(steps); var nextButton = new Htk.Button({ - icon: 'arrow_forward_ios', + icon: 'arrow_forward', tip: 'Next' }).node; nextButton.classList.add('next'); diff --git a/js/htk/columns/button/style.scss b/js/htk/columns/button/style.scss index e9e60890..2cec77cb 100644 --- a/js/htk/columns/button/style.scss +++ b/js/htk/columns/button/style.scss @@ -8,12 +8,12 @@ td.cell-button { & > a { @extend %clickable; display: block; - height: 44px; - width: 44px; + height: 40px; + width: 40px; margin: 0 auto; border: none; border-radius: 50%; - padding: 10px; + padding: 8px; background-color: transparent; box-sizing: border-box; diff --git a/js/htk/list/style.scss b/js/htk/list/style.scss index 66f4290f..adc60d14 100644 --- a/js/htk/list/style.scss +++ b/js/htk/list/style.scss @@ -56,7 +56,7 @@ /* Mobile */ - @media (max-width: 960px) { + @include mobile { .item > .actions { display: initial; } diff --git a/js/htk/select/style.scss b/js/htk/select/style.scss index a19ecd92..ec3afe59 100644 --- a/js/htk/select/style.scss +++ b/js/htk/select/style.scss @@ -1,4 +1,5 @@ @import "../style/variables"; +@import "../style/classes"; .htk-combo { display: flex; @@ -17,14 +18,21 @@ color: #666; &.erase { - display: none + display: none; } } &:not(.filled) > span { color: #666; } - &.filled:hover > .htk-icon.erase { - display: block; + &.filled { + &:hover > .erase { + display: block; + } + @include mobile { + & > .erase { + display: initial; + } + } } } .htk-select-menu { diff --git a/js/htk/style/classes.scss b/js/htk/style/classes.scss index c29384c7..2dc505bf 100644 --- a/js/htk/style/classes.scss +++ b/js/htk/style/classes.scss @@ -18,3 +18,9 @@ outline: none; } } + +@mixin mobile { + @media screen and (max-width: 960px) { + @content; + } +} diff --git a/js/htk/style/responsive.scss b/js/htk/style/responsive.scss index bb7b61ef..1bf3fb5b 100644 --- a/js/htk/style/responsive.scss +++ b/js/htk/style/responsive.scss @@ -1,19 +1,16 @@ - -/* Responsive */ - -/* Standard */ +// Standard body { font-size: 14px; } -/* 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; } } +// Smartphone, portrait +@media screen and (min-width:320px) { body { font-size: 13px; } } +// Smartphone, landscape +@media screen and (min-width:480px) { body { font-size: 13px; } } +// Tablet, portrait +@media screen and (min-width:600px) { body { font-size: 13px; } } +// Tablet, landscape +@media screen and (min-width:801px) { body { font-size: 13px; } } +// Big screen and landscape tablets, laptop and desktop +@media screen and (min-width:1025px) { body { font-size: 14px; } } +// Hi-res laptop and desktop +@media screen and (min-width:1281px) { body { font-size: 14px; } } diff --git a/js/htk/style/spacing.scss b/js/htk/style/spacing.scss index 35e3fa10..21ad73d3 100644 --- a/js/htk/style/spacing.scss +++ b/js/htk/style/spacing.scss @@ -23,7 +23,7 @@ * xl (extra large) */ - @import "./variables"; +@import "./variables"; //++++++++++++++++++++++++++++++++++++++++++++++++ Padding diff --git a/package.json b/package.json index eaede25f..3e5eba98 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hedera-web", - "version": "22.46.7", + "version": "22.46.8", "description": "Verdnatura web page", "license": "GPL-3.0", "repository": {
{{item.tag5}} {{item.value5}}