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 {
margin-left: 16px;
width: 28px;
}
.span-with-margin {
margin-left: 16px;
}
}
> .summary-form {

View File

@ -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}
/>
)

View File

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

View File

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

View File

@ -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',
}}>&nbsp;</span>
))}
{((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_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>

View File

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