forked from M-Labs/web2019
Revert legend
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
161666b09c
commit
c3e583d644
sass/css
static
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
|
||||||
}
|
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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),
|
|
||||||
}))
|
}))
|
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user