From 41849585c9a3d4fecd3b3acd1968605ce4d1d104 Mon Sep 17 00:00:00 2001 From: Kakabay Date: Tue, 7 Feb 2023 17:04:21 +0500 Subject: [PATCH] main responsive --- src/App.tsx | 21 ++++++----- src/components/main/ContentItem.tsx | 5 ++- src/components/main/ContentSlider.tsx | 46 +++++++++++++++++++++++ src/components/main/MainContent.tsx | 4 +- src/styles/_main.scss | 54 +++++++++++++++++++++++++++ src/styles/_news.scss | 1 + src/styles/style.scss | 36 +++++++++--------- 7 files changed, 137 insertions(+), 30 deletions(-) create mode 100644 src/components/main/ContentSlider.tsx 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/main/ContentItem.tsx b/src/components/main/ContentItem.tsx index 2db5f48..4f39a42 100644 --- a/src/components/main/ContentItem.tsx +++ b/src/components/main/ContentItem.tsx @@ -1,5 +1,6 @@ // Modules import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Link } from 'react-router-dom'; interface IProps { type?: 'small' | 'big'; @@ -11,9 +12,9 @@ const ContentItem = ({ type = 'small', img, title }: IProps) => { return (
-
+

{title}

-
+
); }; 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 index 72dead4..ce3e3b2 100644 --- a/src/components/main/MainContent.tsx +++ b/src/components/main/MainContent.tsx @@ -7,8 +7,9 @@ import Placeholder from '../../assets/images/placeholder3.png'; // Components import ContentItem from './ContentItem'; import SectionTitle from '../global/SectionTitle'; +import ContentSlider from './ContentSlider'; -const titlePlaceholder = +export const titlePlaceholder = 'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане'; const MainContent = () => { @@ -17,6 +18,7 @@ const MainContent = () => {
+
diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 37ce6ac..08c4d16 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -63,3 +63,57 @@ } } } + +.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.scss b/src/styles/_news.scss index 29bd42a..124b3de 100644 --- a/src/styles/_news.scss +++ b/src/styles/_news.scss @@ -72,6 +72,7 @@ span { display: block !important; + height: 100%; } } 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';