M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Make fonts sizes more consistent and fiz minor paddings issues

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-02-26 17:36:15 +08:00
parent 56a44ce4a3
commit eb196b086e
4 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
sass/css/_shop.scss
View File

@ -72,6 +72,8 @@ button {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
max-width: calc(3/10 * 100%);
min-width: calc(1/4 * 100%);
/*padding-bottom: 4rem!important;*/ /*padding-bottom: 4rem!important;*/
} }
@ -79,7 +81,8 @@ button {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
height: 100px; height: 100px;
width: calc(2 / 6 * 100%); max-width: calc(3/10 * 100%);
min-width: 0;
content: ""; content: "";
background: linear-gradient( background: linear-gradient(
to top, to top,
@ -91,7 +94,7 @@ button {
> section.main { > section.main {
flex: 4; flex: 4;
max-width: calc(4 / 6 * 100%); max-width: calc(3/4 * 100%);
overflow-y: scroll; overflow-y: scroll;
} }
} }
@ -100,7 +103,7 @@ button {
display: flex; display: flex;
color: white; color: white;
padding: 3rem 2rem 1rem; padding: 1rem 0rem 1rem 1.5rem;
.content { .content {
flex: 1; flex: 1;
@ -119,6 +122,7 @@ button {
h3 { h3 {
color: white; color: white;
font-size: 1.5rem;
} }
button { button {
@ -282,6 +286,9 @@ button {
.item-card-name { .item-card-name {
font-weight: 700; font-weight: 700;
&.tabbed {
padding-left: 16px;
}
} }
.price { .price {

66
static/css/order-hardware.css
View File

@ -55,7 +55,7 @@
color: white; color: white;
font-weight: bold; font-weight: bold;
font-size: 1.75rem; font-size: 1.75rem;
padding: .75rem 2rem; padding: .75rem 1.5rem;
} }
#accordion_categories .accordion-body { #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)*/ 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 { #root-shop .productItem {
padding: 2rem 1rem 1rem; padding: 2rem 1rem 1rem;
} }
@ -111,7 +115,7 @@
} }
#root-shop .productItem .content ul { #root-shop .productItem .content ul {
font-size: .6rem; font-size: .75rem;
} }
#root-shop .panel .control { #root-shop .panel .control {
@ -133,7 +137,7 @@
} }
#root-shop .panel .summary>.summary-price table { #root-shop .panel .summary>.summary-price table {
font-size: 1rem; font-size: 0.8rem;
} }
#root-shop .panel .summary>.summary-form form, #root-shop .panel .summary>.summary-form form,
@ -163,7 +167,7 @@
} }
#root-shop table tr { #root-shop table tr {
padding: .8em 0; padding: .2em 0;
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
} }
@ -192,7 +196,7 @@
} }
body { body {
font-size: .7rem; font-size: .8rem;
} }
#root-shop, #root-shop>div { #root-shop, #root-shop>div {
@ -217,7 +221,7 @@
} }
#root-shop table tr { #root-shop table tr {
padding: .8em 0; padding: .2em 0;
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
} }
@ -227,7 +231,7 @@
} }
#root-shop .panel .summary>.summary-price table { #root-shop .panel .summary>.summary-price table {
font-size: .7rem; font-size: .8rem;
} }
#root-shop .panel .summary>.summary-form form, #root-shop .panel .summary>.summary-form form,
@ -236,7 +240,7 @@
} }
#root-shop .panel .summary>.summary-price tfoot { #root-shop .panel .summary>.summary-price tfoot {
font-size: .85rem; font-size: 1.0rem;
} }
/*#root-shop .panel .summary>.summary-form form input[type="submit"] { /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@ -288,7 +292,7 @@
} }
body { body {
font-size: .7rem; font-size: .8rem;
} }
#root-shop, #root-shop>div { #root-shop, #root-shop>div {
@ -308,11 +312,11 @@
} }
#root-shop .productItem .content h3 { #root-shop .productItem .content h3 {
font-size: 1rem; font-size: 1.25rem;
} }
#root-shop .productItem .content ul { #root-shop .productItem .content ul {
font-size: .5rem; font-size: .75rem;
} }
#root-shop .panel { #root-shop .panel {
@ -345,7 +349,7 @@
} }
#root-shop .panel .summary>.summary-price table { #root-shop .panel .summary>.summary-price table {
font-size: .7rem; font-size: .8rem;
} }
#root-shop .panel .summary>.summary-form form, #root-shop .panel .summary>.summary-form form,
@ -354,7 +358,7 @@
} }
#root-shop .panel .summary>.summary-price tfoot { #root-shop .panel .summary>.summary-price tfoot {
font-size: .85rem; font-size: 1rem;
} }
/*#root-shop .panel .summary>.summary-form form input[type="submit"] { /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@ -367,7 +371,6 @@
border-top-right-radius: 30px; border-top-right-radius: 30px;
width: 80px; width: 80px;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
margin-bottom: -25px;
margin-left: -1.3rem; margin-left: -1.3rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -386,7 +389,7 @@
} }
#root-shop table tr { #root-shop table tr {
padding: .8em 0; padding: .2em 0;
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
} }
@ -394,14 +397,15 @@
#root-shop .layout>aside.aside.menu-opened { #root-shop .layout>aside.aside.menu-opened {
/*transform: translate3d(0, 0, 0);*/ /*transform: translate3d(0, 0, 0);*/
transition: left .3s; transition: left .3s;
width: 310px; width: min(310px, 60vw);
max-width: 60%;
left: 0; left: 0;
} }
#root-shop .layout>aside.aside.menu-opened + section.main { #root-shop .layout>aside.aside.menu-opened + section.main {
/*transform: translate3d(310px, 0, 0);*/ /*transform: translate3d(310px, 0, 0);*/
transition: left .3s; transition: left .3s;
left: 310px; left: min(310px, 60vw);
position: relative; position: relative;
z-index: 0; z-index: 0;
} }
@ -422,8 +426,8 @@
transition: left .3s; transition: left .3s;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: -310px; left: max(-310px, -60vw);
width: 310px; width: min(310px, 60vw);
height: 100%; height: 100%;
} }
@ -460,7 +464,7 @@
} }
#accordion_categories button { #accordion_categories button {
font-size: 1rem; font-size: 1.5rem;
padding: .5rem 0.5rem; padding: .5rem 0.5rem;
} }
} }
@ -500,7 +504,7 @@
} }
body { body {
font-size: .7rem; font-size: .8rem;
} }
#root-shop, #root-shop>div { #root-shop, #root-shop>div {
@ -516,20 +520,21 @@
} }
#root-shop .productItem .content h3 { #root-shop .productItem .content h3 {
font-size: 1rem; font-size: 1.25rem;
} }
#root-shop .layout>aside.aside.menu-opened { #root-shop .layout>aside.aside.menu-opened {
/*transform: translate3d(0, 0, 0);*/ /*transform: translate3d(0, 0, 0);*/
transition: left .3s; transition: left .3s;
width: 310px; width: min(310px, 90vw);
max-width: 90%;
left: 0; left: 0;
} }
#root-shop .layout>aside.aside.menu-opened + section.main { #root-shop .layout>aside.aside.menu-opened + section.main {
/*transform: translate3d(310px, 0, 0);*/ /*transform: translate3d(310px, 0, 0);*/
transition: left .3s; transition: left .3s;
left: 310px; left: min(310px, 90vw);
position: relative; position: relative;
z-index: 0; z-index: 0;
} }
@ -549,8 +554,8 @@
transition: left .3s; transition: left .3s;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: -310px; left: max(-310px, -90vw);
width: 310px; width: min(310px, 90vw);
height: 100%; height: 100%;
} }
@ -611,7 +616,7 @@
} }
#root-shop .panel .summary>.summary-price table { #root-shop .panel .summary>.summary-price table {
font-size: .7rem; font-size: .8rem;
} }
#root-shop .panel .summary>.summary-form form, #root-shop .panel .summary>.summary-form form,
@ -620,7 +625,7 @@
} }
#root-shop .panel .summary>.summary-price tfoot { #root-shop .panel .summary>.summary-price tfoot {
font-size: .85rem; font-size: 1rem;
} }
/*#root-shop .panel .summary>.summary-form form input[type="submit"] { /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@ -633,7 +638,6 @@
border-top-right-radius: 30px; border-top-right-radius: 30px;
width: 80px; width: 80px;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
margin-bottom: 15px;
margin-left: -1.3rem; margin-left: -1.3rem;
} }
@ -650,7 +654,7 @@
} }
#root-shop table tr { #root-shop table tr {
padding: .8em 0; padding: .2em 0;
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
} }
@ -669,7 +673,7 @@
} }
#accordion_categories button { #accordion_categories button {
font-size: 1rem; font-size: 1.5rem;
padding: .5rem 0.5rem; padding: .5rem 0.5rem;
} }
} }

6
static/js/shop/SummaryCrateCard.jsx
View File

@ -41,11 +41,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
onClick={() => setHighlight(crate_id, card_index)} onClick={() => setHighlight(crate_id, card_index)}
onMouseEnter={() => setHighlight(crate_id, card_index)} onMouseEnter={() => setHighlight(crate_id, card_index)}
onMouseLeave={() => resetHighlight()}> onMouseLeave={() => resetHighlight()}>
<td className="item-card-name"> <td className="item-card-name tabbed">
<span style={{
'display': 'inline-block',
'width': '16px',
}}>&nbsp;</span>
<div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div> <div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>
</td> </td>

5
static/js/shop/SummaryCratePricedOptions.jsx
View File

@ -23,10 +23,7 @@ export function SummaryCratePricedOptions({crate_index}) {
return options.map((option, _i) => ( return options.map((option, _i) => (
<tr key={"summary_crate_" + crate_id +"option_" + option.id}> <tr key={"summary_crate_" + crate_id +"option_" + option.id}>
<td className="item-card-name"> <td className="item-card-name tabbed">
<span style={{
'display': 'inline-block', 'width': '16px',
}}>&nbsp;</span>
<div>{option.title}</div> <div>{option.title}</div>
</td> </td>