edit metrics

This commit is contained in:
madarsbiss 2021-09-21 20:29:22 +03:00
parent 69450a7f67
commit 36429c61c6
6 changed files with 42 additions and 42 deletions

View File

@ -1,6 +1,8 @@
import Image from "next/image";
const MetricCard = ({ title, iconSrc, metric, unit = "", styles }) => {
import styles from "./MetricCard.module.css";
const MetricCard = ({ title, iconSrc, metric, unit = "" }) => {
return (
<div className={styles.statsCard}>
<p>{title}</p>

View File

@ -0,0 +1,16 @@
.statsCard {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
}
.statsCardContent {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 475px) {
.statsCardContent {
grid-template-columns: 1fr 2fr;
}
}

View File

@ -7,7 +7,9 @@ import {
} from "../services/utils";
import MetricCard from "./MetricCard";
const Metrics = ({ styles, data, systemUsed }) => {
import styles from "./Metrics.module.css";
const Metrics = ({ data, systemUsed }) => {
return (
<div className={styles.statsBox}>
<MetricCard
@ -15,7 +17,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
iconSrc={"/icons/humidity.png"}
metric={data.main.humidity}
unit={"%"}
styles={styles}
/>
<MetricCard
@ -23,14 +24,12 @@ const Metrics = ({ styles, data, systemUsed }) => {
iconSrc={"/icons/wind.png"}
metric={getWindSpeed(systemUsed, data.wind.speed)}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
styles={styles}
/>
<MetricCard
title={"Wind direction"}
iconSrc={"/icons/compass.png"}
metric={degToCompass(data.wind.deg)}
styles={styles}
/>
<MetricCard
@ -38,7 +37,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
iconSrc={"/icons/binocular.png"}
metric={getVisibility(systemUsed, data.visibility)}
unit={systemUsed == "metric" ? "km" : "miles"}
styles={styles}
/>
<MetricCard
@ -46,7 +44,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
iconSrc={"/icons/sunrise.png"}
metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
styles={styles}
/>
<MetricCard
@ -54,7 +51,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
iconSrc={"/icons/sunset.png"}
metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
styles={styles}
/>
</div>
);

View File

@ -0,0 +1,19 @@
.statsBox {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
border-radius: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 600px) {
.statsBox {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 475px) {
.statsBox {
grid-template-columns: 1fr;
}
}

View File

@ -129,7 +129,7 @@ const App = () => {
/>
</div>
<Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
<Metrics data={weatherData} systemUsed={systemUsed} />
<SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
</div>
</div>

View File

@ -42,25 +42,6 @@
gap: 20px;
}
.statsBox {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
border-radius: 20px;
margin-bottom: 20px;
}
.statsCard {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
}
.statsCardContent {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mainTemp {
font-size: 84px;
}
@ -96,10 +77,6 @@
margin: 0 auto;
border-radius: 0;
}
.statsBox {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 520px) {
@ -112,13 +89,3 @@
width: 100%;
}
}
@media only screen and (max-width: 475px) {
.statsBox {
grid-template-columns: 1fr;
}
.statsCardContent {
grid-template-columns: 1fr 2fr;
}
}