diff --git a/package-lock.json b/package-lock.json index bfa7c5a..02e7f85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-spinners": "^0.13.8", "redux-thunk": "^2.4.2", "sass": "^1.57.1", + "swiper": "^9.0.3", "uuid": "^9.0.0", "vite-plugin-svgr": "^2.4.0" }, @@ -2278,6 +2279,11 @@ "node": ">=0.10.0" } }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -2305,6 +2311,27 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/swiper": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.3.tgz", + "integrity": "sha512-hHYI6CeUHcDyv6IakzAQrUv6nS5BMRn6KOkui16nhtdgYBlWgUdlaMbcdT0o4RJxpwSktCTLgpBtCm+WwwVYRw==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "dependencies": { + "ssr-window": "^4.0.2" + }, + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", diff --git a/package.json b/package.json index 5265791..ad0d3aa 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-spinners": "^0.13.8", "redux-thunk": "^2.4.2", "sass": "^1.57.1", + "swiper": "^9.0.3", "uuid": "^9.0.0", "vite-plugin-svgr": "^2.4.0" }, diff --git a/src/App.tsx b/src/App.tsx index b73418d..07347d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,22 @@ // Modules -import { Routes, Route } from "react-router-dom"; +import { Routes, Route } from 'react-router-dom'; // Styles -import "react-lazy-load-image-component/src/effects/blur.css"; -import "react-calendar/dist/Calendar.css"; -import "./styles/style.scss"; +import 'swiper/swiper.css'; +import 'swiper/css/pagination'; +import 'swiper/css/navigation'; +import 'react-lazy-load-image-component/src/effects/blur.css'; +import 'react-calendar/dist/Calendar.css'; +import './styles/style.scss'; // Pages -import Main from "./pages/Main"; -import NewsArticle from "./pages/NewsArticle"; -import Category from "./pages/Category"; +import Main from './pages/Main'; +import NewsArticle from './pages/NewsArticle'; +import Category from './pages/Category'; // Components -import Header from "./components/header/Header"; -import Footer from "./components/footer/Footer"; +import Header from './components/header/Header'; +import Footer from './components/footer/Footer'; const App = () => { return ( diff --git a/src/components/aside/AsideNews.tsx b/src/components/aside/AsideNews.tsx index de4800f..652f810 100644 --- a/src/components/aside/AsideNews.tsx +++ b/src/components/aside/AsideNews.tsx @@ -1,44 +1,41 @@ // Modules -import { Link } from "react-router-dom"; -import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from 'react-router-dom'; +import { LazyLoadImage } from 'react-lazy-load-image-component'; // Images -import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg"; +import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg'; // Components -import NewsCategory from "../global/NewsCategory"; -import NewsDate from "../global/NewsDate"; +import NewsCategory from '../global/NewsCategory'; +import NewsDate from '../global/NewsDate'; interface Props { title: string; date: string; img: string; + category: string; + link: string; } -const AsideNews = ({ title, date, img }: Props) => { +const AsideNews = ({ title, date, img, category, link }: Props) => { return ( -
+
- +
- +

{title}

- + {/* прочитать все - + */}
-
+ ); }; diff --git a/src/components/global/NewsCategory.tsx b/src/components/global/NewsCategory.tsx index 56682d2..01459d9 100644 --- a/src/components/global/NewsCategory.tsx +++ b/src/components/global/NewsCategory.tsx @@ -1,16 +1,12 @@ // Modules -import { Link } from "react-router-dom"; +import { Link } from 'react-router-dom'; interface Props { title: string; } const NewsCategory = ({ title }: Props) => { - return ( - - {title} - - ); + return {title}; }; export default NewsCategory; diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index 2100165..3abe578 100644 --- a/src/components/global/NewsScroll.tsx +++ b/src/components/global/NewsScroll.tsx @@ -6,14 +6,14 @@ import placeholder from '../../assets/images/placeholder.jpg'; // Interface interface Props { - state: boolean; + sectionTitle: boolean; } -const NewsScroll = ({ state }: Props) => { +const NewsScroll = ({ sectionTitle }: Props) => { return (
- {state === true ? ( + {sectionTitle === true ? ( ) : null}
@@ -23,7 +23,6 @@ const NewsScroll = ({ state }: Props) => { date="12.01.2023" category="Политика" img={placeholder} - link="" /> { date="12.01.2023" category="Политика" img={placeholder} - link="" /> { date="12.01.2023" category="Политика" img={placeholder} - link="" /> { date="12.01.2023" category="Политика" img={placeholder} - link="" /> { date="12.01.2023" category="Политика" img={placeholder} - link="" />
diff --git a/src/components/main/ContentItem.tsx b/src/components/main/ContentItem.tsx new file mode 100644 index 0000000..4f39a42 --- /dev/null +++ b/src/components/main/ContentItem.tsx @@ -0,0 +1,22 @@ +// Modules +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Link } from 'react-router-dom'; + +interface IProps { + type?: 'small' | 'big'; + img: string; + title: string; +} + +const ContentItem = ({ type = 'small', img, title }: IProps) => { + return ( +
+ + +

{title}

+ +
+ ); +}; + +export default ContentItem; diff --git a/src/components/main/ContentSlider.tsx b/src/components/main/ContentSlider.tsx new file mode 100644 index 0000000..e6e16ad --- /dev/null +++ b/src/components/main/ContentSlider.tsx @@ -0,0 +1,46 @@ +// Modules +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Navigation, Pagination, Autoplay } from 'swiper'; + +// Images +import Placeholder from '../../assets/images/placeholder3.png'; + +// Components +import ContentItem from './ContentItem'; + +// Static +import { titlePlaceholder } from './MainContent'; + +const ContentSlider = () => { + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; + +export default ContentSlider; diff --git a/src/components/main/MainContent.tsx b/src/components/main/MainContent.tsx new file mode 100644 index 0000000..ce3e3b2 --- /dev/null +++ b/src/components/main/MainContent.tsx @@ -0,0 +1,37 @@ +// Modules +import { LazyLoadComponent } from 'react-lazy-load-image-component'; + +// Images +import Placeholder from '../../assets/images/placeholder3.png'; + +// Components +import ContentItem from './ContentItem'; +import SectionTitle from '../global/SectionTitle'; +import ContentSlider from './ContentSlider'; + +export const titlePlaceholder = + 'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане'; + +const MainContent = () => { + return ( + <> + +
+ + +
+ + +
+
+ + + +
+
+ + + ); +}; + +export default MainContent; diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx index 1a0e3be..a569b53 100644 --- a/src/components/news/News.tsx +++ b/src/components/news/News.tsx @@ -1,11 +1,11 @@ // Modules -import { Link } from "react-router-dom"; -import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from 'react-router-dom'; +import { LazyLoadImage } from 'react-lazy-load-image-component'; // Images -import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg"; +import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg'; // Components -import NewsCategory from "../global/NewsCategory"; -import NewsDate from "../global/NewsDate"; +import NewsCategory from '../global/NewsCategory'; +import NewsDate from '../global/NewsDate'; interface Props { title: string; @@ -17,15 +17,10 @@ interface Props { const News = ({ title, text, category, date, img }: Props) => { return ( -
+
- +
@@ -36,12 +31,12 @@ const News = ({ title, text, category, date, img }: Props) => {
{text}
- + {/* прочитать все - + */}
-
+ ); }; diff --git a/src/components/videos/Videos.tsx b/src/components/videos/Videos.tsx index 59969f1..b554f3c 100644 --- a/src/components/videos/Videos.tsx +++ b/src/components/videos/Videos.tsx @@ -1,18 +1,18 @@ // Modules -import { v4 as uuiv4 } from "uuid"; +import { v4 as uuiv4 } from 'uuid'; // Components -import SectionTitle from "../global/SectionTitle"; -import VideosItem from "./VideosItem"; +import SectionTitle from '../global/SectionTitle'; +import VideosItem from './VideosItem'; // Images -import Placeholder from "../../assets/images/placeholder.jpg"; +import Placeholder from '../../assets/images/placeholder.jpg'; // Videos -import VideoPlaceholder from "../../assets/videos/placeholder.mp4"; +import VideoPlaceholder from '../../assets/videos/placeholder.mp4'; // Types -import { videosDataType } from "../../types/videos.types"; +import { videosDataType } from '../../types/videos.types'; const videosData: videosDataType[] = [ { @@ -36,26 +36,26 @@ const videosData: videosDataType[] = [ const Videos = () => { return (
-
-
- -
- {videosData.map((videosDataItem: videosDataType) => { - return ( - - ); - })} -
+ {/*
*/} +
+ +
+ {videosData.map((videosDataItem: videosDataType) => { + return ( + + ); + })}
+ {/*
*/}
); }; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 8d2468e..febc614 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,7 +1,8 @@ // Components -import Aside from "../components/aside/Aside"; -import NewsScroll from "../components/global/NewsScroll"; -import Videos from "../components/videos/Videos"; +import Aside from '../components/aside/Aside'; +import NewsScroll from '../components/global/NewsScroll'; +import Videos from '../components/videos/Videos'; +import MainContent from '../components/main/MainContent'; const Main = () => { return ( @@ -9,8 +10,9 @@ const Main = () => {
+
- +
diff --git a/src/styles/_calendar.scss b/src/styles/_calendar.scss index 7f5e1f7..14463f0 100644 --- a/src/styles/_calendar.scss +++ b/src/styles/_calendar.scss @@ -19,6 +19,7 @@ .react-calendar { border: none; + line-height: unset; } .react-calendar__month-view__weekdays { @@ -86,13 +87,13 @@ .react-calendar__navigation__arrow.react-calendar__navigation__next-button { display: block; - background: url("../assets/icons/stroke-right-black.svg") no-repeat center; + background: url('../assets/icons/stroke-right-black.svg') no-repeat center; color: transparent; } .react-calendar__navigation__arrow.react-calendar__navigation__prev-button { display: block; - background: url("../assets/icons/stroke-left-black.svg") no-repeat center; + background: url('../assets/icons/stroke-left-black.svg') no-repeat center; color: transparent; } diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss index 44faa50..1248a45 100644 --- a/src/styles/_footer.scss +++ b/src/styles/_footer.scss @@ -9,6 +9,7 @@ .footer-wrapper { display: flex; justify-content: space-between; + gap: 2.4rem; } .footer-nav-list { @@ -20,6 +21,8 @@ .footer-nav-list-item { a { + white-space: nowrap; + text-overflow: ellipsis; font-size: 1.8rem; color: $white; @include roboto; @@ -54,3 +57,27 @@ font-weight: 400; max-width: 37rem; } + +@media (max-width: 1200px) { + .footer-wrapper { + flex-direction: column; + gap: 4rem; + } + + .footer-nav-list { + grid-template-columns: repeat(3, auto); + } +} + +@media (max-width: 700px) { + .footer-nav-list { + grid-template-columns: repeat(2, auto); + column-gap: 2.4rem; + } +} + +// @media (max-width: 390px) { +// .footer-nav-list { +// grid-template-columns: auto; +// } +// } diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 57c2772..8cbfcf5 100644 --- a/src/styles/_general.scss +++ b/src/styles/_general.scss @@ -1,5 +1,5 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); * { margin: 0; @@ -71,3 +71,9 @@ h6 { .react-calendar__month-view__days { column-gap: 1.8rem; } + +@media screen and (max-width: 900px) { + .container { + padding: 0 1.5rem; + } +} diff --git a/src/styles/_main.scss b/src/styles/_main.scss index e471675..08c4d16 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -1,3 +1,119 @@ .main { padding: 5.6rem 0; } + +.main-content { + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.main-content-top { + display: grid; + grid-template-columns: calc(67% - 1.2rem) calc(33% - 1.2rem); + gap: 2.4rem; + height: 40rem; +} + +.main-content-bottom { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2.4rem; + height: 23.7rem; +} + +.main-content-item { + position: relative; + @include wh100; + overflow: hidden; + + span { + display: block !important; + @include wh100; + } + + img { + @include wh100; + object-fit: cover; + } + + &-overlay { + position: absolute; + top: 0; + left: 0; + @include wh100; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); + display: flex; + padding: 1.6rem; + align-items: flex-end; + z-index: 2; + + h2 { + color: $white; + font-size: 1.8rem; + } + } + + &__big { + &-overlay { + padding: 2.4rem; + } + h2 { + font-size: 2.4rem; + } + } +} + +.main-content-slider { + display: none; +} + +.swiper-wrapper { + padding-bottom: 4rem; +} + +.swiper-pagination { + bottom: 0rem; +} + +.swiper-pagination-bullet { + background: $gray-dark; + width: 0.8rem; + height: 0.8rem; + transition: 0.5s all ease; + + &-active { + width: 2.4rem; + transition: 0.5s all ease; + background: $main; + border-radius: 5.3rem; + } +} + +// Media + +@media screen and (max-width: 1020px) { + .main-content-top { + grid-template-columns: 1fr; + gap: 0; + .main-content-item__small { + display: none; + } + } + + .main-content-bottom { + height: 19rem; + } +} + +@media screen and (max-width: 900px) { + .main-content-bottom { + display: none; + } + .main-content-top { + display: none; + } + .main-content-slider { + display: block; + } +} diff --git a/src/styles/_news-section.scss b/src/styles/_news-section.scss index aacdf1e..e70535d 100644 --- a/src/styles/_news-section.scss +++ b/src/styles/_news-section.scss @@ -9,3 +9,9 @@ flex-direction: column; gap: 5.6rem; } + +@media (max-width: 1024px) { + .news-outer-wrapper { + grid-template-columns: 1fr; + } +} diff --git a/src/styles/_news.scss b/src/styles/_news.scss index 38f7ee7..124b3de 100644 --- a/src/styles/_news.scss +++ b/src/styles/_news.scss @@ -22,6 +22,10 @@ font-size: 2.4rem; font-weight: 700; @include raleway; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } .news-status { @@ -47,3 +51,48 @@ -webkit-box-orient: vertical; overflow: hidden; } + +@media (max-width: 768px) { + .news-wrapper { + flex-direction: column; + } + + .news-image { + width: 100%; + height: 16rem; + overflow: hidden; + object-fit: cover; + object-position: center; + img { + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + } + + span { + display: block !important; + height: 100%; + } + } + + .news-title { + font-size: 1.6rem; + } + + .news-text { + display: none; + } + + .new-status { + order: 1; + } + + .news-info { + align-items: start; + } + + .news-link { + display: none; + } +} diff --git a/src/styles/_videos.scss b/src/styles/_videos.scss index 45775b8..4f7b233 100644 --- a/src/styles/_videos.scss +++ b/src/styles/_videos.scss @@ -1,7 +1,3 @@ -.videos { - // padding: 5.6rem 0; -} - .videos-inner { display: flex; flex-direction: column; @@ -40,3 +36,23 @@ color: $black; } } + +// Media + +@media screen and (max-width: 1150px) { + .videos-items { + grid-template-columns: 1fr 1fr; + } + .videos-item-video { + min-height: 30vw; + } +} + +@media screen and (max-width: 780px) { + .videos-items { + grid-template-columns: 1fr; + } + .videos-item-video { + min-height: 40vw; + } +} diff --git a/src/styles/style.scss b/src/styles/style.scss index e204e00..234a7d0 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,18 +1,18 @@ -@import "./variables"; -@import "./mixins"; -@import "./general"; -@import "./nav"; -@import "./main"; -@import "./videos"; -@import "./section-title"; -@import "./footer"; -@import "./news"; -@import "./newsCategory"; -@import "./newsDate"; -@import "./newsScroll"; -@import "./asideNews"; -@import "./aside"; -@import "./news-section"; -@import "./news-article"; -@import "./category"; -@import "./calendar"; +@import './variables'; +@import './mixins'; +@import './general'; +@import './nav'; +@import './main'; +@import './videos'; +@import './section-title'; +@import './footer'; +@import './news'; +@import './newsCategory'; +@import './newsDate'; +@import './newsScroll'; +@import './asideNews'; +@import './aside'; +@import './news-section'; +@import './news-article'; +@import './category'; +@import './calendar';