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.subName}}
-{{item.tag5}} | {{item.value5}} | @@ -429,12 +429,12 @@ editable="true"/>