Revert legend

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-01-03 16:18:53 +08:00
parent 161666b09c
commit c3e583d644
7 changed files with 3 additions and 82 deletions

View File

@ -216,18 +216,6 @@ button {
width: 50%; width: 50%;
padding-right: 30px; padding-right: 30px;
} }
> .legend {
//d-flex justify-content-end align-self-start
display: flex;
justify-content: end;
align-self: start;
width: 50%;
table {
width: 75%;
max-width: 300px;
}
}
} }
.summary { .summary {

View File

@ -108,17 +108,9 @@
} }
#root-shop .panel .control > .description, #root-shop .panel .control > .description,
#root-shop .panel .control > .legend,
#root-shop .crate-mode { #root-shop .crate-mode {
width: 100%; width: 100%;
} }
#root-shop .panel .control > .legend {
justify-content: center;
align-self: center;
}
#root-shop .panel .control > .legend tr {
padding: 0;
}
#root-shop .crate-mode { #root-shop .crate-mode {
text-align: left; text-align: left;
@ -315,17 +307,9 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
#root-shop .panel .control > .description, #root-shop .panel .control > .description {
#root-shop .panel .control > .legend {
width: 100%; width: 100%;
} }
#root-shop .panel .control > .legend {
justify-content: center;
align-self: center;
}
#root-shop .panel .control > .legend tr {
padding: 0;
}
#root-shop .panel .crate .crate-bar .crate-mode { #root-shop .panel .crate .crate-bar .crate-mode {
text-align: left; text-align: left;
@ -589,17 +573,9 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
#root-shop .panel .control > .description, #root-shop .panel .control > .description {
#root-shop .panel .control > .legend {
width: 100%; width: 100%;
} }
#root-shop .panel .control > .legend {
justify-content: center;
align-self: center;
}
#root-shop .panel .control > .legend tr {
padding: 0;
}
#root-shop .panel .crate .crate-bar .crate-mode { #root-shop .panel .crate .crate-bar .crate-mode {
text-align: left; text-align: left;

View File

@ -1,21 +0,0 @@
import React from "react";
import {useShopStore} from "./shop_store";
export function LegendItem({icon, description}) {
return (
<tr>
<td className="p-1"><img className="" width="20px" src={icon} alt={description}/></td>
<td className="p-1"><span> {description} </span></td>
</tr>
)
}
export function Legend() {
const legend = useShopStore(state => state.legend);
return <table>
<tbody>
{legend.map((item, i) => <LegendItem key={"legend_item"+i} icon={item.icon} description={item.description}/>)}
</tbody>
</table>
}

View File

@ -13,7 +13,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
* Component that renders all things for order. * Component that renders all things for order.
* It acts like-a layout, this component do nothing more. * It acts like-a layout, this component do nothing more.
*/ */
export function OrderPanel({title, description, legend}) { export function OrderPanel({title, description}) {
// #!render_count // #!render_count
const renderCount = useRenderCount(); const renderCount = useRenderCount();
const isMobile = useShopStore((state) => state.isMobile); const isMobile = useShopStore((state) => state.isMobile);
@ -28,11 +28,6 @@ export function OrderPanel({title, description, legend}) {
<div className="control justify-content-between"> <div className="control justify-content-between">
{description} {description}
<div className="legend">
{legend}
</div>
</div> </div>
<div> <div>

View File

@ -9,7 +9,6 @@ import {Layout} from "./Layout";
import {Backlog} from "./Backlog"; import {Backlog} from "./Backlog";
import {OrderPanel} from "./OrderPanel"; import {OrderPanel} from "./OrderPanel";
import {useShopStore} from "./shop_store"; import {useShopStore} from "./shop_store";
import {Legend} from "./Legend";
/** /**
* Component that renders the entire shop * Component that renders the entire shop
@ -60,7 +59,6 @@ export function Shop() {
this ordering system, or if you need other configurations, email us directly anytime 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 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>)} be confirmed by a quote.</p>)}
legend={(<Legend/>)}
/> />
)}> )}>
</Layout> </Layout>

View File

@ -28,10 +28,6 @@ const useBacklog = ((set, get) => ({
cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element)) cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
})); }));
const useLegend = ((set, get) => ({
legend: shared_data.legend
}))
const useCrateModes = ((set, get) => ({ const useCrateModes = ((set, get) => ({
crate_modes: shared_data.crateModes, crate_modes: shared_data.crateModes,
modes_order: shared_data.crateModeOrder, modes_order: shared_data.crateModeOrder,
@ -454,5 +450,4 @@ export const useShopStore = createWithEqualityFn((...params) => ({
...useLayout(...params), ...useLayout(...params),
...useHighlighted(...params), ...useHighlighted(...params),
...useImportJSON(...params), ...useImportJSON(...params),
...useLegend(...params),
})) }))

View File

@ -3,16 +3,6 @@ const shop_data = {
API_RFQ: 'https://hooks.m-labs.hk/rfq', API_RFQ: 'https://hooks.m-labs.hk/rfq',
currency: 'USD', currency: 'USD',
legend: [
{icon: "/images/shop/icon-customize.svg", description: "cards configuration available"},
{icon: "/images/shop/icon-add.svg", description: "add a card or crate to the order"},
{icon: "/images/shop/icon-remove.svg", description: "remove a card or crate from the order"},
{icon: "/images/shop/icon-clear.svg", description: "remove all the cards from the crate"},
{icon: "/images/shop/icon-warning.svg", description: "the card or crate contains errors"},
{icon: "/images/shop/icon-reminder.svg", description: "suggestions or hints available"},
],
crateModes: { crateModes: {
rack: { rack: {
id: 'rack', id: 'rack',