Alignment fixes, remove price of spare cards, reworded the description phrase,
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
7ceba1d461
commit
ca2eb29fbf
@ -323,9 +323,11 @@ button {
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 16px;
|
||||
width: 28px;
|
||||
}
|
||||
.span-with-margin {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .summary-form {
|
||||
|
||||
@ -39,7 +39,7 @@ export function WarningIndicator({crate_index, card_index}) {
|
||||
const max_level = MaxLevel(warnings);
|
||||
return (
|
||||
<img
|
||||
className="alert-warning align-self-start"
|
||||
className="alert-warning align-self-start d-block"
|
||||
src={max_level.icon}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -14,7 +14,6 @@ import {useRenderCount} from "@uidotdev/usehooks";
|
||||
export function OrderSummary() {
|
||||
// #!render_count
|
||||
const renderCount = useRenderCount();
|
||||
const clearAll = useShopStore((state) => state.clearAll);
|
||||
|
||||
// #!render_count
|
||||
console.log("OrderSummary renders: ", renderCount)
|
||||
@ -23,19 +22,6 @@ export function OrderSummary() {
|
||||
<div className="summary-price">
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan="2" className="summary-remove-all">
|
||||
<span className="item-card-name">Reset the order</span>
|
||||
|
||||
<button onClick={clearAll}>
|
||||
<img src="/images/shop/icon-remove.svg"/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<SummaryCrates/>
|
||||
|
||||
<tfoot>
|
||||
|
||||
@ -53,12 +53,15 @@ export function Shop() {
|
||||
<OrderPanel
|
||||
title="Order hardware"
|
||||
description={(
|
||||
<p className="description">Drag and drop the cards you want into the crate below to see how
|
||||
the combination would look like. Setup card's configuration by tapping at the top of the
|
||||
card, most of the options can be modified after shipment. If you have any issues with
|
||||
this ordering system, or if you need other configurations, email us directly anytime
|
||||
at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>. The price is estimated and must
|
||||
be confirmed by a quote.</p>)}
|
||||
<p className="description">
|
||||
Drag and drop the cards you want into the crate below to see how
|
||||
the combination would look like. Configure the card settings by tapping on the top of
|
||||
the card; many of the options can be adjusted even after the card has been shipped.
|
||||
If you have any issues with this ordering system, or if you need other configurations,
|
||||
email us directly anytime at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>.
|
||||
The price is estimated and must be confirmed by a quote.
|
||||
</p>
|
||||
)}
|
||||
/>
|
||||
)}>
|
||||
</Layout>
|
||||
|
||||
@ -54,7 +54,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
|
||||
{`${currency} ${formatMoney(card.price)}`}
|
||||
|
||||
<button onClick={() => deleteCard(crate_id, card_index)}>
|
||||
<img src="/images/shop/icon-remove.svg"/>
|
||||
<img src="/images/shop/icon-remove.svg" className="d-block"/>
|
||||
</button>
|
||||
|
||||
<div style={{'width': '45px', 'height': '20px'}}
|
||||
@ -64,7 +64,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
|
||||
) : (
|
||||
<span style={{
|
||||
'display': 'inline-block',
|
||||
'width': '20px',
|
||||
'minWidth': '20px',
|
||||
}}> </span>
|
||||
))}
|
||||
{((options && options_data) ? (
|
||||
|
||||
@ -19,6 +19,7 @@ export function SummaryCrateHeader({crate_index}) {
|
||||
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
||||
const crate_name = useShopStore((state) => state.crates[crate_index].name);
|
||||
const modes_order = useShopStore((state) => state.modes_order);
|
||||
const crate_mode_displayed = modes_order.includes(crate_mode);
|
||||
|
||||
|
||||
// #!render_count
|
||||
@ -31,18 +32,19 @@ export function SummaryCrateHeader({crate_index}) {
|
||||
<td className="item-card-name">{!!crate_name ? crate_name : crate_type.name + " #" + crate_index}</td>
|
||||
<td className="price">
|
||||
<div className="d-inline-flex">
|
||||
{`${currency} ${formatMoney(crate_type.price)}`}
|
||||
|
||||
{crate_mode_displayed && `${currency} ${formatMoney(crate_type.price)}`}
|
||||
|
||||
<button onClick={() => clearCrate(crate_id)}>
|
||||
<img src="/images/shop/icon-clear.svg" alt="empty crate"/>
|
||||
</button>
|
||||
|
||||
{
|
||||
modes_order.includes(crate_mode) ? (
|
||||
crate_mode_displayed ? (
|
||||
<button onClick={() => delCrate(crate_id)}>
|
||||
<img src="/images/shop/icon-remove.svg" alt="remove crate"/>
|
||||
</button>
|
||||
) : <span></span>
|
||||
) : <span className="span-with-margin"></span>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@ -76,7 +76,7 @@ export function SummaryPopup({id, options, data}) {
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
||||
<img className="alert-info d-block" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
||||
id={id + "img"}
|
||||
onClick={handleClick}/>
|
||||
<div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user