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:
Egor Savkin 2024-01-23 11:36:56 +08:00
parent 7ceba1d461
commit ca2eb29fbf
7 changed files with 21 additions and 28 deletions

View File

@ -323,9 +323,11 @@ button {
} }
} }
span { span {
margin-left: 16px;
width: 28px; width: 28px;
} }
.span-with-margin {
margin-left: 16px;
}
} }
> .summary-form { > .summary-form {

View File

@ -39,7 +39,7 @@ export function WarningIndicator({crate_index, card_index}) {
const max_level = MaxLevel(warnings); const max_level = MaxLevel(warnings);
return ( return (
<img <img
className="alert-warning align-self-start" className="alert-warning align-self-start d-block"
src={max_level.icon} src={max_level.icon}
/> />
) )

View File

@ -14,7 +14,6 @@ import {useRenderCount} from "@uidotdev/usehooks";
export function OrderSummary() { export function OrderSummary() {
// #!render_count // #!render_count
const renderCount = useRenderCount(); const renderCount = useRenderCount();
const clearAll = useShopStore((state) => state.clearAll);
// #!render_count // #!render_count
console.log("OrderSummary renders: ", renderCount) console.log("OrderSummary renders: ", renderCount)
@ -23,19 +22,6 @@ export function OrderSummary() {
<div className="summary-price"> <div className="summary-price">
<table> <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/> <SummaryCrates/>
<tfoot> <tfoot>

View File

@ -53,12 +53,15 @@ export function Shop() {
<OrderPanel <OrderPanel
title="Order hardware" title="Order hardware"
description={( description={(
<p className="description">Drag and drop the cards you want into the crate below to see how <p className="description">
the combination would look like. Setup card's configuration by tapping at the top of the Drag and drop the cards you want into the crate below to see how
card, most of the options can be modified after shipment. If you have any issues with the combination would look like. Configure the card settings by tapping on the top of
this ordering system, or if you need other configurations, email us directly anytime the card; many of the options can be adjusted even after the card has been shipped.
at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>. The price is estimated and must If you have any issues with this ordering system, or if you need other configurations,
be confirmed by a quote.</p>)} 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> </Layout>

View File

@ -54,7 +54,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
{`${currency} ${formatMoney(card.price)}`} {`${currency} ${formatMoney(card.price)}`}
<button onClick={() => deleteCard(crate_id, card_index)}> <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> </button>
<div style={{'width': '45px', 'height': '20px'}} <div style={{'width': '45px', 'height': '20px'}}
@ -64,7 +64,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
) : ( ) : (
<span style={{ <span style={{
'display': 'inline-block', 'display': 'inline-block',
'width': '20px', 'minWidth': '20px',
}}>&nbsp;</span> }}>&nbsp;</span>
))} ))}
{((options && options_data) ? ( {((options && options_data) ? (

View File

@ -19,6 +19,7 @@ export function SummaryCrateHeader({crate_index}) {
const crate_id = useShopStore((state) => state.crates[crate_index].id); const crate_id = useShopStore((state) => state.crates[crate_index].id);
const crate_name = useShopStore((state) => state.crates[crate_index].name); const crate_name = useShopStore((state) => state.crates[crate_index].name);
const modes_order = useShopStore((state) => state.modes_order); const modes_order = useShopStore((state) => state.modes_order);
const crate_mode_displayed = modes_order.includes(crate_mode);
// #!render_count // #!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="item-card-name">{!!crate_name ? crate_name : crate_type.name + " #" + crate_index}</td>
<td className="price"> <td className="price">
<div className="d-inline-flex"> <div className="d-inline-flex">
{`${currency} ${formatMoney(crate_type.price)}`}
{crate_mode_displayed && `${currency} ${formatMoney(crate_type.price)}`}
<button onClick={() => clearCrate(crate_id)}> <button onClick={() => clearCrate(crate_id)}>
<img src="/images/shop/icon-clear.svg" alt="empty crate"/> <img src="/images/shop/icon-clear.svg" alt="empty crate"/>
</button> </button>
{ {
modes_order.includes(crate_mode) ? ( crate_mode_displayed ? (
<button onClick={() => delCrate(crate_id)}> <button onClick={() => delCrate(crate_id)}>
<img src="/images/shop/icon-remove.svg" alt="remove crate"/> <img src="/images/shop/icon-remove.svg" alt="remove crate"/>
</button> </button>
) : <span></span> ) : <span className="span-with-margin"></span>
} }
</div> </div>

View File

@ -76,7 +76,7 @@ export function SummaryPopup({id, options, data}) {
return ( return (
<div ref={ref}> <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"} id={id + "img"}
onClick={handleClick}/> onClick={handleClick}/>
<div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}} <div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}}