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

Make fonts sizes more consistent and fiz minor paddings issues 

Signed-off-by: Egor Savkin <es@m-labs.hk>
pull/128/head
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-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 {

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

@ -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;
}
}

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)}
onMouseEnter={() => setHighlight(crate_id, card_index)}
onMouseLeave={() => resetHighlight()}>
<td className="item-card-name">
<span style={{
'display': 'inline-block',
'width': '16px',
}}>&nbsp;</span>
<td className="item-card-name tabbed">
<div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>
</td>

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

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