From cd4a63ae01de40f3331d6f334bee073bf9fd6836 Mon Sep 17 00:00:00 2001 From: Meirlan Date: Fri, 5 Apr 2024 13:40:23 +0500 Subject: [PATCH] adapted version --- src/App.tsx | 2 - .../HourlyForecast/HourlyForecast.module.scss | 42 ++++++------------- .../HourlyForecast/HourlyForecast.tsx | 19 +++------ .../currentWeather/CurrentWeather.module.scss | 21 +++++++++- .../currentWeather/CurrentWeather.tsx | 7 ++-- .../CurrentWeatherAbout.module.scss | 15 ++++++- .../CurrentWeatherInfo.module.scss | 9 ++++ .../currentWeatherInfo/CurrentWeatherInfo.tsx | 7 +--- src/components/footer/Footer.module.scss | 12 ------ src/components/footer/Footer.tsx | 14 ------- src/components/header/Header.module.scss | 7 +++- .../HourlyForecastItem.module.scss | 42 +++++++++++++++++++ .../hourlyForecastItem/HourlyForecastItem.tsx | 23 ++++++++++ .../searchBlock/SearchBlock.module.scss | 21 +++++++++- src/components/searchBlock/SearchBlock.tsx | 4 ++ src/index.scss | 25 ++++++++++- src/pages/home/HomePage.module.scss | 2 +- src/pages/home/HomePage.tsx | 2 - 18 files changed, 185 insertions(+), 89 deletions(-) delete mode 100644 src/components/footer/Footer.module.scss delete mode 100644 src/components/footer/Footer.tsx create mode 100644 src/components/hourlyForecastItem/HourlyForecastItem.module.scss create mode 100644 src/components/hourlyForecastItem/HourlyForecastItem.tsx diff --git a/src/App.tsx b/src/App.tsx index 4c73a8f..772ebfc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,6 @@ import React from 'react'; import Header from "./components/header/Header"; import HomePage from "./pages/home/HomePage"; import useLocalStorage from "use-local-storage"; -import Footer from "./components/footer/Footer"; function App() { @@ -11,7 +10,6 @@ function App() {
-
); } diff --git a/src/components/HourlyForecast/HourlyForecast.module.scss b/src/components/HourlyForecast/HourlyForecast.module.scss index 7ddfb80..c0f7920 100644 --- a/src/components/HourlyForecast/HourlyForecast.module.scss +++ b/src/components/HourlyForecast/HourlyForecast.module.scss @@ -9,41 +9,23 @@ h2{ text-align: center; } + @media (max-width: 529px) { + padding: 20px 10px; + } } .items{ margin-top: 1.4em; display: flex; justify-content: space-between; -} -.item{ - text-align: center; - padding: 20px 15px; - border-radius: 2em; - box-shadow: 8px 9px 11px 0 rgba(0, 0, 0, 0.50); - width: 15%; - .icon{ - position: relative; - width: 100%; - height: 140px; - img{ - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - -webkit-filter: drop-shadow(3px 5px 5px #363535); - filter: drop-shadow(3px 5px 5px #363535); - } - } - .time{ - font-size: 1.33em; - font-weight: 700; + @media (max-width: 1024px) { + flex-wrap: wrap; + justify-content: start; + column-gap: 1em; + row-gap: 1em; } - p{ - font-weight: 700; - font-size: 1.1em; - & + p{ - margin-top: 5px; - } + @media (max-width: 529px) { + column-gap: 0; + justify-content: space-between; } + } \ No newline at end of file diff --git a/src/components/HourlyForecast/HourlyForecast.tsx b/src/components/HourlyForecast/HourlyForecast.tsx index 093b503..8985b0b 100644 --- a/src/components/HourlyForecast/HourlyForecast.tsx +++ b/src/components/HourlyForecast/HourlyForecast.tsx @@ -2,13 +2,13 @@ import React, {useEffect} from 'react'; import s from './HourlyForecast.module.scss' import {useAppDispatch, useAppSelector} from "../../hooks/hooks"; import {hourlyForecastThunk} from "../../store/thunks/hourlyForecast.thunk"; -import Icon from "../imageIcon/Icon"; import {toast} from "react-toastify"; +import HourlyForecastItem from "../hourlyForecastItem/HourlyForecastItem"; -const HourlyForecast = React.memo(() => { +const HourlyForecast = () => { const name = useAppSelector(state => state.currentWeather.name) const error = useAppSelector(state => state.hourlyWeather.error) - const {list} = useAppSelector(state => state.hourlyWeather) + const list = useAppSelector(state => state.hourlyWeather.list) const dispatch = useAppDispatch() useEffect(() => { name && dispatch(hourlyForecastThunk(name)) @@ -18,19 +18,10 @@ const HourlyForecast = React.memo(() => {

Hourly Forecast:

- {list.map((item, index) => { - return
-
{item.dt_txt && item.dt_txt.slice(10,16)}
-
- -
-

{item.main.temp && Math.round(item.main.temp - 273.15)}°C

-

{item.wind.speed && Math.round(item.wind.speed)}km/h

-
- })} + {list.map((item, index) => )}
); -}); +}; export default HourlyForecast; \ No newline at end of file diff --git a/src/components/currentWeather/CurrentWeather.module.scss b/src/components/currentWeather/CurrentWeather.module.scss index 51cabba..437cf5b 100644 --- a/src/components/currentWeather/CurrentWeather.module.scss +++ b/src/components/currentWeather/CurrentWeather.module.scss @@ -9,6 +9,21 @@ justify-content: space-between; align-items: center; color: var(--primary-color); + @media (max-width: 1024px) { + justify-content: start; + column-gap: 4em; + flex-wrap: wrap; + } + @media (max-width: 768px) { + justify-content: center; + column-gap: 1em; + row-gap: 1em; + width: 100%; + } + @media (max-width: 529px) { + padding: 20px 10px; + row-gap: 0; + } .degree, .feelsLike{ background: linear-gradient(80deg, var(--primary-color) -2.93%, var(--primary-color) 212.44%); background-clip: text; @@ -22,7 +37,7 @@ color: var(--primary-color); } .feelsLike{ - margin-top: -11px; + margin-top: -7px; padding-left: .5em; font-size: 1.1em; font-weight: 600; @@ -36,5 +51,9 @@ margin-left: -2em; -webkit-filter: drop-shadow(3px 3px 3px #000); filter: drop-shadow(3px 3px 3px #000); + @media (max-width: 1300px){ + width: 9em; + margin-left: 0; + } } } \ No newline at end of file diff --git a/src/components/currentWeather/CurrentWeather.tsx b/src/components/currentWeather/CurrentWeather.tsx index f18a80c..c2c3d27 100644 --- a/src/components/currentWeather/CurrentWeather.tsx +++ b/src/components/currentWeather/CurrentWeather.tsx @@ -5,15 +5,14 @@ import Icon from '../imageIcon/Icon'; import CurrentWeatherInfo from "../currentWeatherInfo/CurrentWeatherInfo"; import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk"; -const CurrentWeather = React.memo(() => { - console.log('CurrentWeather') +const CurrentWeather = () => { const dispatch = useAppDispatch() const temp = useAppSelector(state => state.currentWeather.temp) const weather = useAppSelector(state => state.currentWeather.weather) const feels_like = useAppSelector(state => state.currentWeather.feels_like) useEffect(() => { - dispatch(currentWeatherThunk('astana')) + dispatch(currentWeatherThunk(JSON.parse(String(localStorage.getItem("city"))) || 'astana')) }, [dispatch]); return ( @@ -26,6 +25,6 @@ const CurrentWeather = React.memo(() => { ); -}); +}; export default CurrentWeather; \ No newline at end of file diff --git a/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss b/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss index 4cdb110..217a2fc 100644 --- a/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss +++ b/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss @@ -7,13 +7,26 @@ display: flex; flex-direction: column; justify-content: center; + @media (max-width: 768px) { + padding: 30px; + width: 100%; + } + @media (max-width: 529px) { + padding: 30px 10px; + } } .city{ text-align: center; font-size: 3em; font-weight: 700; + @media (max-width: 1024px) { + font-size: 2.4em; + } + @media (max-width: 529px) { + font-size: 2.1em; + } & p{ margin-top: .4em; - font-size: .6em; + font-size: .55em; } } \ No newline at end of file diff --git a/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss b/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss index da8f604..2a3dac2 100644 --- a/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss +++ b/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss @@ -1,5 +1,8 @@ .content{ width: 36%; + @media (max-width: 1024px) { + width: 100%; + } h3{ font-size: 1em; margin: 0; @@ -10,6 +13,12 @@ justify-content: space-between; flex-wrap: wrap; row-gap: 1.2em; + @media (max-width: 1024px) { + flex-wrap: nowrap; + } + @media (max-width: 529px) { + flex-wrap: wrap; + } } .description{ text-transform: uppercase; diff --git a/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx b/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx index 2bc78c3..c100691 100644 --- a/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx +++ b/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx @@ -8,8 +8,6 @@ const CurrentWeatherInfo = () => { return (
- {/*

Temp max {state.temp_max && Math.round(state.temp_max)}°C

*/} - {/*

Temp min {state.temp_min && Math.round(state.temp_min)}°C

*/}
- + viewBox="0 0 188.377 188.377" > = ({item}) => { + return ( +
+
{item.dt_txt && item.dt_txt.slice(10,16)}
+
+ +
+

{item.main.temp && Math.round(item.main.temp - 273.15)}°C

+

{item.wind.speed && Math.round(item.wind.speed)}km/h

+
+ ); +}; + +export default HourlyForecastItem; \ No newline at end of file diff --git a/src/components/searchBlock/SearchBlock.module.scss b/src/components/searchBlock/SearchBlock.module.scss index 14f4b2c..78df897 100644 --- a/src/components/searchBlock/SearchBlock.module.scss +++ b/src/components/searchBlock/SearchBlock.module.scss @@ -2,9 +2,18 @@ display: flex; align-items: end; column-gap: 2em; + @media (max-width: 1024px) { + align-items: center; + } + @media (max-width: 768px) { + column-gap: 1em; + } + @media (max-width: 529px) { + width: 100%; + } & input{ width: 36em; - padding: 5px 2em; + padding: 5px 1.4em; border-radius: 40px; border: 1px solid var(--primary-color); background: var(--background-color); @@ -13,6 +22,16 @@ transition: box-shadow .3s; box-shadow: 0 2px 20px 2px rgba(0, 0, 0, 0.25); } + @media (max-width: 1300px) { + width: 27em; + } + @media (max-width: 1024px) { + width: 22em; + } + @media (max-width: 768px) { + width: 100%; + padding: 3px 1em; + } } button{ background-color: var(--foreground-color); diff --git a/src/components/searchBlock/SearchBlock.tsx b/src/components/searchBlock/SearchBlock.tsx index 5b0e138..0de1f12 100644 --- a/src/components/searchBlock/SearchBlock.tsx +++ b/src/components/searchBlock/SearchBlock.tsx @@ -2,20 +2,24 @@ import React, {ChangeEvent, useState} from 'react'; import s from "./SearchBlock.module.scss"; import {useAppDispatch} from "../../hooks/hooks"; import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk"; +import useLocalStorage from "use-local-storage"; const SearchBlock = () => { const [data, setData] = useState('') + const [value, setValue] = useLocalStorage('city', '') const dispatch = useAppDispatch() const changeData = (e: ChangeEvent) => setData(e.target.value) const send = () => { if (data.length > 0){ dispatch(currentWeatherThunk(data)) + setValue(data) setData('') } } const sendEnter = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && data.length > 0){ dispatch(currentWeatherThunk(data)) + setValue(data) setData('') } } diff --git a/src/index.scss b/src/index.scss index 4054922..50cf824 100644 --- a/src/index.scss +++ b/src/index.scss @@ -53,7 +53,7 @@ main{ min-height: 100vh; transition: all .3s; margin: 0; - padding: 0; + padding: 0 0 .9em 0; box-sizing: border-box; font-size: 18px; font-family: "Roboto", sans-serif; @@ -115,4 +115,27 @@ button { .title{ font-size: 1.77em; font-weight: 700; +} + +@media (max-width: 1300px) { + .container{ + max-width: 990px; + } +} +@media (max-width: 1024px) { + .wrapper{ + font-size: 16px; + } + .container{ + max-width: 738px; + } +} +@media (max-width: 768px) { + .wrapper{ + font-size: 15px; + } + .container{ + padding: 0 15px; + max-width: 100%; + } } \ No newline at end of file diff --git a/src/pages/home/HomePage.module.scss b/src/pages/home/HomePage.module.scss index a681639..ac8e1e8 100644 --- a/src/pages/home/HomePage.module.scss +++ b/src/pages/home/HomePage.module.scss @@ -3,5 +3,5 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - row-gap: 1.3em; + row-gap: 1em; } \ No newline at end of file diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 31d254f..c23df73 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -6,7 +6,6 @@ import HourlyForecast from "../../components/HourlyForecast/HourlyForecast"; import {ToastContainer} from "react-toastify"; const HomePage = React.memo(() => { - console.log('HomePage') return ( <> @@ -15,7 +14,6 @@ const HomePage = React.memo(() => { - {/**/}