Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsiveness

This commit is contained in:
VividTruthKeeper 2023-02-09 20:31:43 +05:00
parent 6be30389f5
commit 7bf12d3969
11 changed files with 138 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/aside/AsideNews.tsx
View File

@ -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,25 +17,29 @@ interface Props {
const AsideNews = ({ title, date, img, category, link }: Props) => {
return (
<Link to={link} className="aside-news">
<div className="aside-news">
<div className="aside-news-wrapper">
<div className="aside-news-image">
<LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
</div>
<Link to={link} className="aside-news-image">
<LazyLoadImage
src={img}
alt="image"
useIntersectionObserver
effect="blur"
/>
</Link>
<div className="aside-news-info">
<div className="aside-news-info-inner">
<div className="aside-news-status">
<NewsCategory title={category} />
<NewsCategory title={category} id={1} />
<NewsDate date={date} />
</div>
<h2 className="aside-news-title">{title}</h2>
<Link to={link}>
<h2 className="aside-news-title">{title}</h2>
</Link>
</div>
{/* <Link to={link} className="aside-news-link">
<span>прочитать все</span> <ArrRight />
</Link> */}
</div>
</div>
</Link>
</div>
);
};

11
src/components/global/NewsCategory.tsx
View File

@ -1,12 +1,17 @@
// Modules
import { Link } from 'react-router-dom';
import { Link } from "react-router-dom";
interface Props {
title: string;
id: number;
}
const NewsCategory = ({ title }: Props) => {
return <span className="news-category">{title}</span>;
const NewsCategory = ({ title, id }: Props) => {
return (
<Link to={`/category/${id}`} className="news-category">
{title}
</Link>
);
};
export default NewsCategory;

12
src/components/global/NewsScroll.tsx
View File

@ -1,8 +1,8 @@
// Components
import News from '../news/News';
import SectionTitle from './SectionTitle';
import News from "../news/News";
import SectionTitle from "./SectionTitle";
// Images
import placeholder from '../../assets/images/placeholder.jpg';
import placeholder from "../../assets/images/placeholder.jpg";
// Interface
interface Props {
@ -12,9 +12,13 @@ interface Props {
const NewsScroll = ({ state }: Props) => {
return (
<div className="news-scroll">
<SectionTitle title="Лента новостей" />
<div className="news-scroll-wrapper">
{state === true ? (
<SectionTitle title="Лента новостей" linkData={{ link: '/', title: 'Посмотреть все' }} />
<SectionTitle
title="Лента новостей"
linkData={{ link: "/", title: "Посмотреть все" }}
/>
) : null}
<div className="news-scroll-inner">
<News

34
src/components/news/News.tsx
View File

@ -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,26 +17,30 @@ interface Props {
const News = ({ title, text, category, date, img }: Props) => {
return (
<Link to={`/news/1`} className="news">
<div className="news">
<div className="news-wrapper">
<div className="news-image">
<LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
</div>
<Link to={`/news/1`} className="news-image">
<LazyLoadImage
src={img}
alt="image"
useIntersectionObserver
effect="blur"
/>
</Link>
<div className="news-info">
<div className="news-info-inner">
<h2 className="news-title">{title}</h2>
<Link to={`/news/1`}>
<h2 className="news-title">{title}</h2>
</Link>
<div className="news-status">
<NewsCategory title={category} />
<NewsCategory title={category} id={1} />
<NewsDate date={date} />
</div>
<div className="news-text">{text}</div>
</div>
{/* <Link to={`/news/1`} className="news-link">
<span>прочитать все</span> <ArrRight />
</Link> */}
</div>
</div>
</Link>
</div>
);
};

24
src/styles/_main.scss
View File

@ -42,7 +42,11 @@
top: 0;
left: 0;
@include wh100;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
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;
@ -117,3 +121,21 @@
display: block;
}
}
@media screen and (max-width: 850px) {
.main {
padding: 4rem 0;
}
.main-content {
.section-title {
&:first-child {
display: none;
}
}
}
.main-content-item__big {
h2 {
font-size: 1.6rem;
}
}
}

6
src/styles/_news-section.scss
View File

@ -16,3 +16,9 @@
gap: 5.6rem;
}
}
@media (max-width: 850px) {
.news-inner {
gap: 4rem;
}
}

57
src/styles/_news.scss
View File

@ -13,6 +13,7 @@
}
.news-info-inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
@ -52,20 +53,57 @@
overflow: hidden;
}
.news-date {
color: $gray-dark;
font-weight: 400;
@include roboto;
font-size: 1.4rem;
}
.news-category {
display: inline-block;
color: $main;
text-transform: uppercase;
font-weight: 400;
font-size: 1.4rem;
@include roboto;
}
.news-scroll {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.news-scroll-wrapper {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.news-scroll-inner {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
@media (max-width: 1024px) {
.news-title {
font-size: 2rem;
}
}
@media (max-width: 768px) {
@media (max-width: 750px) {
.news-info-inner {
flex-direction: column-reverse;
}
.news-wrapper {
flex-direction: column;
}
.news-image {
width: 100%;
height: 18rem;
height: 20rem;
overflow: hidden;
object-fit: cover;
object-position: center;
@ -102,3 +140,18 @@
display: none;
}
}
@media (max-width: 500px) {
.news-info-inner {
gap: 0.8rem;
}
.news-category {
font-size: 1.2rem;
}
.news-title {
font-size: 1.4rem;
}
.news-date {
font-size: 1rem;
}
}

8
src/styles/_newsCategory.scss
View File

@ -1,8 +0,0 @@
.news-category {
display: inline-block;
color: $main;
text-transform: uppercase;
font-weight: 400;
font-size: 1.4rem;
@include roboto;
}

6
src/styles/_newsDate.scss
View File

@ -1,6 +0,0 @@
.news-date {
color: $gray-dark;
font-weight: 400;
@include roboto;
font-size: 1.4rem;
}

11
src/styles/_newsScroll.scss
View File

@ -1,11 +0,0 @@
.news-scroll-wrapper {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.news-scroll-inner {
display: flex;
flex-direction: column;
gap: 2.4rem;
}

3
src/styles/style.scss
View File

@ -7,9 +7,6 @@
@import "./section-title";
@import "./footer";
@import "./news";
@import "./newsCategory";
@import "./newsDate";
@import "./newsScroll";
@import "./asideNews";
@import "./aside";
@import "./news-section";