Crates UI fixes
TODO ex .rfqFeedback fixes Signed-off-by: Egor Savkin <es@m-labs.hk>pull/113/head
parent
c7314801ed
commit
07e01bcc93
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>)
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue