From 54b8dfcc030cac66083f5f949cfb3aeb8d214097 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Mon, 26 Feb 2024 17:36:15 +0800 Subject: [PATCH] Make fonts sizes more consistent and fiz minor paddings issues Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 13 +++- static/css/order-hardware.css | 66 +++++++++++--------- static/js/shop/SummaryCrateCard.jsx | 6 +- static/js/shop/SummaryCratePricedOptions.jsx | 5 +- 4 files changed, 47 insertions(+), 43 deletions(-) diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 1e066d6..d4330b3 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -72,6 +72,8 @@ button { overflow-y: scroll; overflow-x: hidden; position: relative; + max-width: calc(3/10 * 100%); + min-width: calc(1/4 * 100%); /*padding-bottom: 4rem!important;*/ } @@ -79,7 +81,8 @@ button { position: fixed; bottom: 0; height: 100px; - width: calc(2 / 6 * 100%); + max-width: calc(3/10 * 100%); + min-width: 0; content: ""; background: linear-gradient( to top, @@ -91,7 +94,7 @@ button { > section.main { flex: 4; - max-width: calc(4 / 6 * 100%); + max-width: calc(3/4 * 100%); overflow-y: scroll; } } @@ -100,7 +103,7 @@ button { display: flex; color: white; - padding: 3rem 2rem 1rem; + padding: 1rem 0rem 1rem 1.5rem; .content { flex: 1; @@ -119,6 +122,7 @@ button { h3 { color: white; + font-size: 1.5rem; } button { @@ -282,6 +286,9 @@ button { .item-card-name { font-weight: 700; + &.tabbed { + padding-left: 16px; + } } .price { diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index 3a009e7..550172e 100644 --- a/static/css/order-hardware.css +++ b/static/css/order-hardware.css @@ -55,7 +55,7 @@ color: white; font-weight: bold; font-size: 1.75rem; - padding: .75rem 2rem; + padding: .75rem 1.5rem; } #accordion_categories .accordion-body { @@ -94,6 +94,10 @@ height: calc(100vh - 10px - 2.5rem); /* .navbar vertical padding + line height (.navbar-brand.font-size.rem * body.font-size * body.line-height)*/ } + #root-shop .layout>aside.aside { + min-width: max(300px, 30%); + } + #root-shop .productItem { padding: 2rem 1rem 1rem; } @@ -111,7 +115,7 @@ } #root-shop .productItem .content ul { - font-size: .6rem; + font-size: .75rem; } #root-shop .panel .control { @@ -133,7 +137,7 @@ } #root-shop .panel .summary>.summary-price table { - font-size: 1rem; + font-size: 0.8rem; } #root-shop .panel .summary>.summary-form form, @@ -163,7 +167,7 @@ } #root-shop table tr { - padding: .8em 0; + padding: .2em 0; display: flex !important; justify-content: space-between; } @@ -192,7 +196,7 @@ } body { - font-size: .7rem; + font-size: .8rem; } #root-shop, #root-shop>div { @@ -217,7 +221,7 @@ } #root-shop table tr { - padding: .8em 0; + padding: .2em 0; display: flex !important; justify-content: space-between; } @@ -227,7 +231,7 @@ } #root-shop .panel .summary>.summary-price table { - font-size: .7rem; + font-size: .8rem; } #root-shop .panel .summary>.summary-form form, @@ -236,7 +240,7 @@ } #root-shop .panel .summary>.summary-price tfoot { - font-size: .85rem; + font-size: 1.0rem; } /*#root-shop .panel .summary>.summary-form form input[type="submit"] { @@ -288,7 +292,7 @@ } body { - font-size: .7rem; + font-size: .8rem; } #root-shop, #root-shop>div { @@ -308,11 +312,11 @@ } #root-shop .productItem .content h3 { - font-size: 1rem; + font-size: 1.25rem; } #root-shop .productItem .content ul { - font-size: .5rem; + font-size: .75rem; } #root-shop .panel { @@ -345,7 +349,7 @@ } #root-shop .panel .summary>.summary-price table { - font-size: .7rem; + font-size: .8rem; } #root-shop .panel .summary>.summary-form form, @@ -354,7 +358,7 @@ } #root-shop .panel .summary>.summary-price tfoot { - font-size: .85rem; + font-size: 1rem; } /*#root-shop .panel .summary>.summary-form form input[type="submit"] { @@ -367,7 +371,6 @@ border-top-right-radius: 30px; width: 80px; padding: 5px 0 5px 10px; - margin-bottom: -25px; margin-left: -1.3rem; position: relative; z-index: 1; @@ -386,7 +389,7 @@ } #root-shop table tr { - padding: .8em 0; + padding: .2em 0; display: flex !important; justify-content: space-between; } @@ -394,14 +397,15 @@ #root-shop .layout>aside.aside.menu-opened { /*transform: translate3d(0, 0, 0);*/ transition: left .3s; - width: 310px; + width: min(310px, 60vw); + max-width: 60%; left: 0; } #root-shop .layout>aside.aside.menu-opened + section.main { /*transform: translate3d(310px, 0, 0);*/ transition: left .3s; - left: 310px; + left: min(310px, 60vw); position: relative; z-index: 0; } @@ -422,8 +426,8 @@ transition: left .3s; position: fixed; z-index: 1; - left: -310px; - width: 310px; + left: max(-310px, -60vw); + width: min(310px, 60vw); height: 100%; } @@ -460,7 +464,7 @@ } #accordion_categories button { - font-size: 1rem; + font-size: 1.5rem; padding: .5rem 0.5rem; } } @@ -500,7 +504,7 @@ } body { - font-size: .7rem; + font-size: .8rem; } #root-shop, #root-shop>div { @@ -516,20 +520,21 @@ } #root-shop .productItem .content h3 { - font-size: 1rem; + font-size: 1.25rem; } #root-shop .layout>aside.aside.menu-opened { /*transform: translate3d(0, 0, 0);*/ transition: left .3s; - width: 310px; + width: min(310px, 90vw); + max-width: 90%; left: 0; } #root-shop .layout>aside.aside.menu-opened + section.main { /*transform: translate3d(310px, 0, 0);*/ transition: left .3s; - left: 310px; + left: min(310px, 90vw); position: relative; z-index: 0; } @@ -549,8 +554,8 @@ transition: left .3s; position: fixed; z-index: 1; - left: -310px; - width: 310px; + left: max(-310px, -90vw); + width: min(310px, 90vw); height: 100%; } @@ -611,7 +616,7 @@ } #root-shop .panel .summary>.summary-price table { - font-size: .7rem; + font-size: .8rem; } #root-shop .panel .summary>.summary-form form, @@ -620,7 +625,7 @@ } #root-shop .panel .summary>.summary-price tfoot { - font-size: .85rem; + font-size: 1rem; } /*#root-shop .panel .summary>.summary-form form input[type="submit"] { @@ -633,7 +638,6 @@ border-top-right-radius: 30px; width: 80px; padding: 5px 0 5px 10px; - margin-bottom: 15px; margin-left: -1.3rem; } @@ -650,7 +654,7 @@ } #root-shop table tr { - padding: .8em 0; + padding: .2em 0; display: flex !important; justify-content: space-between; } @@ -669,7 +673,7 @@ } #accordion_categories button { - font-size: 1rem; + font-size: 1.5rem; padding: .5rem 0.5rem; } } \ No newline at end of file diff --git a/static/js/shop/SummaryCrateCard.jsx b/static/js/shop/SummaryCrateCard.jsx index 81018db..3edc55d 100644 --- a/static/js/shop/SummaryCrateCard.jsx +++ b/static/js/shop/SummaryCrateCard.jsx @@ -41,11 +41,7 @@ export function SummaryCrateCard({crate_index, card_index}) { onClick={() => setHighlight(crate_id, card_index)} onMouseEnter={() => setHighlight(crate_id, card_index)} onMouseLeave={() => resetHighlight()}> - -   +
{`${card.name_number} ${card.name} ${card.name_codename}`}
diff --git a/static/js/shop/SummaryCratePricedOptions.jsx b/static/js/shop/SummaryCratePricedOptions.jsx index 18ae07a..6cc894b 100644 --- a/static/js/shop/SummaryCratePricedOptions.jsx +++ b/static/js/shop/SummaryCratePricedOptions.jsx @@ -23,10 +23,7 @@ export function SummaryCratePricedOptions({crate_index}) { return options.map((option, _i) => ( - -   +
{option.title}