Crates UI fixes

TODO ex .rfqFeedback fixes

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-12-13 17:35:17 +08:00
parent c7314801ed
commit 07e01bcc93
5 changed files with 67 additions and 30 deletions

View File

@ -201,22 +201,6 @@ button {
width: 50%;
padding-right: 30px;
}
.crate-mode {
text-align: right;
width: 50%;
a {
cursor: pointer;
margin-right: 1rem;
color: inherit;
text-decoration: none;
padding-bottom: 5px;
}
a.active {
font-weight: 700;
border-bottom: 3px solid $btn-primary-2;
}
}
}
.summary {
@ -555,6 +539,41 @@ button {
.crate-info {
padding: 1rem 0 0;
}
.crate-bar {
width: 100%;
.crate-mode {
text-align: left;
width: 75%;
display: inline;
a {
cursor: pointer;
margin-right: 1rem;
color: inherit;
text-decoration: none;
padding-bottom: 5px;
}
a.active {
font-weight: 700;
border-bottom: 3px solid $btn-primary-2;
}
}
.delete-crate {
text-decoration: none;
cursor: pointer;
text-align: right;
display: inline-flex;
width: 25%;
color: inherit;
img {
margin-left: 1rem;
align-self: center;
}
}
}
}
}

View File

@ -61,6 +61,26 @@
text-decoration: none;
}
#accordion_crates #accordion_crates_add .accordion-button:after {
background-image: url("/images/shop/icon-add.svg");
}
#accordion_crates .accordion-header button {
font-weight: bold;
}
#accordion_crates,
#accordion_crates .accordion-header,
#accordion_crates .accordion-button,
#accordion_crates .accordion-item {
background-color: inherit;
}
#accordion_crates .accordion-button:not(.collapsed) {
background-color: rgba(26, 109, 147, 0.1);
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
@ -108,11 +128,11 @@
}
#root-shop .panel .control > .description,
#root-shop .panel .control > .crate-mode {
#root-shop .crate-mode {
width: 100%;
}
#root-shop .panel .control > .crate-mode {
#root-shop .crate-mode {
text-align: left;
}
@ -308,11 +328,11 @@
}
#root-shop .panel .control > .description,
#root-shop .panel .control > .crate-mode {
#root-shop .crate-mode {
width: 100%;
}
#root-shop .panel .control > .crate-mode {
#root-shop .crate-mode {
text-align: left;
}

View File

@ -20,13 +20,12 @@ export function Crate({crate_index}) {
return (
<div className="crate">
<CrateMode crate_index={crate_index}/>
<div className="crate-bar d-inline-flex">
<CrateMode crate_index={crate_index}/>
<div>
Delete crate
<button style={{width: "32px"}} onClick={() => onDeleteCrate(crate.id)}>
<img src="/images/shop/icon-remove.svg" alt="remove"/>
</button>
<div className="delete-crate align-self-end align-content-end justify-content-end" onClick={() => onDeleteCrate(crate.id)}>
Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/>
</div>
</div>
<div className="crate-products">

View File

@ -16,7 +16,7 @@ export function CrateList() {
setActiveCrate: state.setActiveCrate,
}));
return (
<Accordion flush activeKey={active_crate} onSelect={(e) => {
<Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {
// if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
if (e !== null)
setActiveCrate(e);
@ -31,10 +31,9 @@ export function CrateList() {
</Accordion.Body>
</Accordion.Item>
)}
<Accordion.Item eventKey="last">
<Accordion.Item eventKey="last" id="accordion_crates_add">
<Accordion.Header onClick={onAddCrate}>
Add new crate
<img src="/images/shop/icon-add.svg" alt="add" width="32px"/>
</Accordion.Header>
</Accordion.Item>
</Accordion>)

View File

@ -356,7 +356,7 @@ const useCart = ((set, get) => ({
setCrateMode: (id, mode) => {
get()._setCrateMode(id, mode)
get().fillWarnings(id);
get().setActiveCrate(crate_to);
get().setActiveCrate(id);
},
addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => {