M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Alignment fixes, remove price of spare cards, reworded the description phrase,

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sass/css/_shop.scss
View File

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

2
static/js/shop/CardWarnings.jsx
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}
/>
)

14
static/js/shop/OrderSummary.jsx
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>

15
static/js/shop/Shop.jsx
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>

4
static/js/shop/SummaryCrateCard.jsx
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) ? (

8
static/js/shop/SummaryCrateHeader.jsx
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>

2
static/js/shop/options/SummaryPopup.jsx
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}}