diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx index 3e22d03..87d0566 100644 --- a/src/pages/NewsArticle.tsx +++ b/src/pages/NewsArticle.tsx @@ -1,27 +1,27 @@ // Modules -import { Link, useParams } from "react-router-dom"; -import { useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { v4 as uuidv4 } from "uuid"; +import { Link, useParams } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { v4 as uuidv4 } from 'uuid'; // Components -import Aside from "../components/aside/Aside"; -import NewsArticleSlider from "../components/news/NewsArticleSlider"; -import Loader from "../components/global/Loader"; +import Aside from '../components/aside/Aside'; +import NewsArticleSlider from '../components/news/NewsArticleSlider'; +import Loader from '../components/global/Loader'; // Icons -import { ReactComponent as Share } from "../assets/icons/share.svg"; +import { ReactComponent as Share } from '../assets/icons/share.svg'; // Types -import { RootState } from "../types/store.types"; -import { IPostData } from "../types/store.types"; +import { RootState } from '../types/store.types'; +import { IPostData } from '../types/store.types'; // Actions -import { setPost } from "../actions/setData"; +import { setPost } from '../actions/setData'; // Api -import { Api } from "../api/Api"; -import { url } from "../url"; +import { Api } from '../api/Api'; +import { url } from '../url'; const NewsArticle = () => { const { id } = useParams(); @@ -33,16 +33,12 @@ const NewsArticle = () => { const [lastLanguage, setLastLanguage] = useState(language); // redux - const data = useSelector( - (state) => state.post.data - ); + const data = useSelector((state) => state.post.data); const dispatch = useDispatch(); useEffect(() => { - if ( - !(data.data.id === parseInt(id as string) && lastLanguage === language) - ) { - api.get(data, (data: IPostData["data"]) => dispatch(setPost(data))); + if (!(data.data.id === parseInt(id as string) && lastLanguage === language)) { + api.get(data, (data: IPostData['data']) => dispatch(setPost(data))); setLastLanguage(language); } }, [language, lastLanguage]); @@ -60,16 +56,13 @@ const NewsArticle = () => { + className="news-article-category"> {category.name} ))}
-

- {data.data.published_at} -

+

{data.data.published_at}

{data.data.title}

@@ -79,8 +72,7 @@ const NewsArticle = () => {

+ dangerouslySetInnerHTML={{ __html: data.data.content_html }}>

diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss index 2fdd389..af0f27c 100644 --- a/src/styles/_news-article.scss +++ b/src/styles/_news-article.scss @@ -81,3 +81,41 @@ gap: 1rem; cursor: pointer; } + +@media (max-width: 1024px) { + .news-article-inner { + display: block; + } + + .news-article-content { + margin-bottom: 5.6rem; + } +} + +@media (max-width: 750px) { + .news-article-inner { + display: block; + } + + .news-article-content { + margin-bottom: 5.6rem; + } +} + +@media (max-width: 500px) { + .news-article-category { + font-size: 1.6rem; + } + + .news-article-title { + font-size: 1.8rem; + } + + .news-article-text { + font-size: 1.6rem; + } + + .news-article-content { + gap: 1.6rem; + } +}