From 6d843d08bd2eb463bf7d431c4cce85734dbcaf1f Mon Sep 17 00:00:00 2001 From: Arnaud Date: Thu, 28 Nov 2024 16:17:07 +0100 Subject: [PATCH] Fix response style --- package-lock.json | 8 +++--- package.json | 4 +-- src/components/AppBar/AppBar.tsx | 4 +-- src/components/AppBar/appBar.css | 8 +++++- src/components/Availability/Sunburst.tsx | 13 +++++++++- src/components/Card/Card.css | 7 ++++++ .../ConnectedAccount/WalletCard.css | 1 - .../ConnectedAccount/WalletCard.tsx | 25 +++++++++++++++++-- src/components/LogLevel/LogLevel.css | 12 +++++++++ src/components/Menu/Menu.tsx | 11 +++++--- src/components/Menu/menu.css | 1 + .../OnBoarding/OnBoardingLayout.css | 12 +++++++++ src/components/Peers/PeersCard.css | 6 +++++ src/routes/dashboard/availabilities.css | 6 +++++ src/routes/dashboard/logs.css | 13 +++++++++- src/routes/dashboard/peers.css | 8 ++++++ src/routes/root.css | 4 +-- 17 files changed, 123 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 99cc45e..fa9b331 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.13", "license": "MIT", "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.50", + "@codex-storage/marketplace-ui-components": "^0.0.51", "@codex-storage/sdk-js": "^0.0.16", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", @@ -395,9 +395,9 @@ } }, "node_modules/@codex-storage/marketplace-ui-components": { - "version": "0.0.50", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.50.tgz", - "integrity": "sha512-pijYw8Wd/ns64Q7iSLQ444U5Q7Ql0U88OuxBycuxIOVp3obITJk6SBgdZpxHIj5kWShsUvXU/nJl0V0oKt9ieQ==", + "version": "0.0.51", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.51.tgz", + "integrity": "sha512-KPPFlcpx3a83WCBSLbRONrF/yr4J/ctyTfFPxMaRSMTRD1LtfIE0uPy3QxtHs6tigOts2h4DEz6Kn2ynHdfKPg==", "engines": { "node": ">=18" }, diff --git a/package.json b/package.json index 4415bb3..ec30af5 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "version": "0.0.13", "type": "module", "scripts": { - "dev": "vite --host 127.0.0.1 --port 5173", + "dev": "vite --host 0.0.0.0 --port 5173", "compile": "tsc --noEmit", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", @@ -26,7 +26,7 @@ "React" ], "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.50", + "@codex-storage/marketplace-ui-components": "^0.0.51", "@codex-storage/sdk-js": "^0.0.16", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 9030404..d2b6341 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -28,7 +28,7 @@ type Props = { }; const icons: Record = { - dashboard: , + dashboard: , peers: , settings: , files: , @@ -83,7 +83,7 @@ export function AppBar({ onIconClick, onExpanded }: Props) { : "var(--codex-input-color-warning)"; const icon = isMobile ? ( - onExpanded(true)}> + onExpanded(true)} width={30}> ) : ( icons[title] ); diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css index b7201bd..6e8aa59 100644 --- a/src/components/AppBar/appBar.css +++ b/src/components/AppBar/appBar.css @@ -45,6 +45,12 @@ sans-serif; letter-spacing: -0.006em; color: rgba(150, 150, 150, 0.8); + + @media (max-width: 800px) { + & { + display: none; + } + } } > div { @@ -88,7 +94,7 @@ } @media (max-width: 800px) { - aside { + .wallet-login { display: none; } } diff --git a/src/components/Availability/Sunburst.tsx b/src/components/Availability/Sunburst.tsx index 6ae7422..8febd07 100644 --- a/src/components/Availability/Sunburst.tsx +++ b/src/components/Availability/Sunburst.tsx @@ -36,6 +36,16 @@ export function Sunburst({ availabilities, space }: Props) { } }, [chart, div]); + useEffect(() => { + const refresh = () => chart.current?.resize(); + + window.addEventListener("resize", refresh); + + return () => { + window.removeEventListener("resize", refresh); + }; + }, [chart.current]); + const data = availabilities.map((a, index) => { return { name: Strings.shortId(a.id), @@ -170,6 +180,8 @@ export function Sunburst({ availabilities, space }: Props) { }; chart.current.setOption(option); + chart.current?.resize(); + // chart.current.off("click"); // chart.current.on("click", function (params) { // // console.info(params.componentIndex); @@ -196,7 +208,6 @@ export function Sunburst({ availabilities, space }: Props) { ref={div} className="sunburst" style={{ - width: size, height: size, }}> ); diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css index 4584204..e3e4201 100644 --- a/src/components/Card/Card.css +++ b/src/components/Card/Card.css @@ -4,6 +4,13 @@ padding: 16px; background-color: rgb(35, 35, 35); + @media (max-width: 800px) { + &, + td:nth-child(2) { + padding: 8px; + } + } + > header { display: flex; align-items: center; diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index 662887a..f8f4b57 100644 --- a/src/components/ConnectedAccount/WalletCard.css +++ b/src/components/ConnectedAccount/WalletCard.css @@ -225,6 +225,5 @@ .lines { height: 200; - transform: scale(1.25); } } diff --git a/src/components/ConnectedAccount/WalletCard.tsx b/src/components/ConnectedAccount/WalletCard.tsx index 6f2d3e7..ef2b472 100644 --- a/src/components/ConnectedAccount/WalletCard.tsx +++ b/src/components/ConnectedAccount/WalletCard.tsx @@ -33,6 +33,16 @@ export function WalletCard({ tab }: Props) { } }, [chart, div]); + useEffect(() => { + const refresh = () => chart.current?.resize(); + + window.addEventListener("resize", refresh); + + return () => { + window.removeEventListener("resize", refresh); + }; + }, [chart.current]); + const onCurrencyChange = async (e: ChangeEvent) => { const value = e.currentTarget.value; setCurrency(value); @@ -90,6 +100,14 @@ export function WalletCard({ tab }: Props) { type: "value", show: false, }, + grid: [ + { + left: 0, + right: 0, + top: 50, + bottom: 50, + }, + ], series: [ { data: [220, 932, 401, 934, 1290, 1330, 1450].slice(0, data.length), @@ -107,7 +125,7 @@ export function WalletCard({ tab }: Props) { }, }; - chart.current.setOption(option); + chart.current.setOption(option, true); } return ( @@ -133,7 +151,10 @@ export function WalletCard({ tab }: Props) {
{/* */} {/* */} -
+
diff --git a/src/components/LogLevel/LogLevel.css b/src/components/LogLevel/LogLevel.css index b225a22..42bca48 100644 --- a/src/components/LogLevel/LogLevel.css +++ b/src/components/LogLevel/LogLevel.css @@ -7,6 +7,12 @@ > div:first-child { position: relative; + @media (max-width: 800px) { + & { + flex: 1; + } + } + svg { position: absolute; top: 11px; @@ -22,5 +28,11 @@ select { border-color: rgba(150, 150, 150, 1); padding-left: 40px; + + @media (max-width: 800px) { + & { + width: 100%; + } + } } } diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0f5f423..e4abd90 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -16,6 +16,7 @@ import PurchaseIcon from "../../assets/icons/purchase.svg?react"; import HostIcon from "../../assets/icons/host.svg?react"; import LogsIcon from "../../assets/icons/logs.svg?react"; import SettingsIcon from "../../assets/icons/settings.svg?react"; +import CloseIcon from "../../assets/icons/close.svg?react"; import HelpIcon from "../../assets/icons/help.svg?react"; import DisclaimerIcon from "../../assets/icons/disclaimer.svg?react"; import { NavLink } from "react-router-dom"; @@ -65,6 +66,8 @@ export function Menu({ isExpanded, onExpanded }: Props) { } }; + const Icon = isMobile ? CloseIcon : ExpandIcon; + return ( <>