diff options
| author | cubemaze <[email protected]> | 2023-05-13 18:00:21 +0800 |
|---|---|---|
| committer | cubemaze <[email protected]> | 2023-05-13 18:00:21 +0800 |
| commit | 4bf55411f1d3f14e544c5719818fbd7dcdc2c824 (patch) | |
| tree | 4107421325c5b2f4fe7dc42e1403052c9e262f84 /src | |
| parent | f8364b79783394427c81360af7bd08ca2aaa9639 (diff) | |
chore: chart height
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Home.module.scss | 10 | ||||
| -rw-r--r-- | src/components/MemoryChart.module.scss | 10 | ||||
| -rw-r--r-- | src/components/MemoryChart.tsx | 1 | ||||
| -rw-r--r-- | src/components/TrafficChart.module.scss | 10 | ||||
| -rw-r--r-- | src/components/TrafficChart.tsx | 1 |
5 files changed, 30 insertions, 2 deletions
diff --git a/src/components/Home.module.scss b/src/components/Home.module.scss index deee456..07098aa 100644 --- a/src/components/Home.module.scss +++ b/src/components/Home.module.scss @@ -8,6 +8,16 @@ } .chart { margin-top: 25px; + height: 50vh; + @media only screen and (min-width: 600px) { + height: 55vh; + } + @media only screen and (min-width: 768px) { + height: 60vh; + } + @media only screen and (min-width: 1200px) { + height: 75vh; + } display: grid; grid-gap: 20px; grid-template-columns: 100%; diff --git a/src/components/MemoryChart.module.scss b/src/components/MemoryChart.module.scss index b31c095..63f4697 100644 --- a/src/components/MemoryChart.module.scss +++ b/src/components/MemoryChart.module.scss @@ -1,4 +1,14 @@ .TrafficChart { color: var(--color-text); background-color: var(--color-bg-chart); + height: 23vh !important; + @media only screen and (min-width: 600px) { + height: 25vh !important; + } + @media only screen and (min-width: 768px) { + height: 27vh !important; + } + @media only screen and (min-width: 1200px) { + height: 35vh !important; + } } diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx index a8a32b2..7e60528 100644 --- a/src/components/MemoryChart.tsx +++ b/src/components/MemoryChart.tsx @@ -22,7 +22,6 @@ const chartWrapperStyle = { justifySelf: 'center', position: 'relative', width: '100%', - height: '200px', borderTop: '2px solid #30363d', }; diff --git a/src/components/TrafficChart.module.scss b/src/components/TrafficChart.module.scss index b31c095..63f4697 100644 --- a/src/components/TrafficChart.module.scss +++ b/src/components/TrafficChart.module.scss @@ -1,4 +1,14 @@ .TrafficChart { color: var(--color-text); background-color: var(--color-bg-chart); + height: 23vh !important; + @media only screen and (min-width: 600px) { + height: 25vh !important; + } + @media only screen and (min-width: 768px) { + height: 27vh !important; + } + @media only screen and (min-width: 1200px) { + height: 35vh !important; + } } diff --git a/src/components/TrafficChart.tsx b/src/components/TrafficChart.tsx index 114d03b..2f22de4 100644 --- a/src/components/TrafficChart.tsx +++ b/src/components/TrafficChart.tsx @@ -17,7 +17,6 @@ const chartWrapperStyle: React.CSSProperties = { justifySelf: 'center', position: 'relative', width: '100%', - height: '200px', borderTop: '2px solid #30363d', }; |