From 7993116fff0a3296ff1df3d5fa56dc385c752d73 Mon Sep 17 00:00:00 2001 From: Sasha Chabin Date: Mon, 26 Aug 2024 19:46:04 +0500 Subject: [PATCH] Update back & feedback buttons in article header --- .../Articles/Article/Article.module.css | 94 ++++++++++++------- .../components/Articles/Article/Article.tsx | 16 ++-- client/components/MainPage/MainPage.tsx | 8 +- .../Map/MainContainer/MapMainContainer.tsx | 2 +- .../Feedback/Feedback.module.css | 22 ++++- .../{Common => UI}/Feedback/Feedback.tsx | 0 .../Feedback/Feedback.types.tsx | 0 7 files changed, 87 insertions(+), 55 deletions(-) rename client/components/{Common => UI}/Feedback/Feedback.module.css (61%) rename client/components/{Common => UI}/Feedback/Feedback.tsx (100%) rename client/components/{Common => UI}/Feedback/Feedback.types.tsx (100%) diff --git a/client/components/Articles/Article/Article.module.css b/client/components/Articles/Article/Article.module.css index b3e58f4..720c7b4 100644 --- a/client/components/Articles/Article/Article.module.css +++ b/client/components/Articles/Article/Article.module.css @@ -1,6 +1,6 @@ .Article { max-width: 1280px; - margin: 0 auto; + margin: 0 auto 40px; padding: 24px; color: #0C1B27; font-weight: 300; @@ -14,35 +14,41 @@ padding-left: 0; } +.ArticleControls { + display: flex; + justify-content: space-between; + margin-bottom: 40px; +} + .ArticleBack { display: inline-flex; - gap: .5em; + gap: .25em; align-items: center; - margin-bottom: 40px; + margin-left: -8px; + padding: 8px 16px 8px 8px; color: #0C1B27; - font-size: 32px; + font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; text-decoration-skip-ink: none; + background: none; + border-radius: 12px; } -.ArticleBackArrow { - display: flex; - justify-content: center; - align-items: center; - width: 1.25em; - height: 1.25em; - border-radius: 50%; - background: rgba(12, 27, 39, 0.07); - transition: .1s ease; +.ArticleBack:hover { + background: rgba(0, 0, 0, .07); } -.ArticleBack:hover .ArticleBackArrow { - background: rgba(12, 27, 39, 0.1); +.ArticleBack:active { + background: rgba(0, 0, 0, .08); } -.ArticleBack:hover .ArticleBackCaption { +.ArticleBackArrow { + display: none; +} + +.ArticleBackCaption { text-decoration: underline; } @@ -54,6 +60,10 @@ line-height: 1.12; } +.Article_external .ArticleTitle { + padding-right: 32px; +} + .Article_external .ArticleContent { padding-bottom: 0; } @@ -96,6 +106,10 @@ &:first-child { margin-top: 0; } + + &:last-child { + margin-bottom: 0; + } } .ArticleContent li { @@ -129,7 +143,7 @@ padding: 16px; border-radius: 16px; background: #F4F6FB; - font-size: 22px; + font-size: 20px; line-height: 1.35; } @@ -154,45 +168,49 @@ flex-grow: 1; } -.ArticleAsideFeedback { - display: none; - text-align: right; + +@media screen and (min-width: 360px) { + .ArticleBackArrow { + display: flex; + justify-content: center; + align-items: center; + width: 1.25em; + height: 1.25em; + transition: .1s ease; + } } @media screen and (min-width: 768px) { .Article { padding: 32px; + padding-bottom: 16px; } - + .ArticleTitle { font-size: 64px; } - .ArticleBack { - margin-bottom: 64px; - } - .ArticleContent { gap: 32px; padding-bottom: 80px; } - + .ArticleContent h2 { font-size: 48px; } - + .ArticleContent h3 { font-size: 32px; } - + .ArticleContent h4 { font-size: 22px; } - + .ArticleContent ol, .ArticleContent ul, .ArticleContent p { - font-size: 22px; + font-size: 20px; } .ArticleContent blockquote { @@ -206,15 +224,23 @@ display: flex; gap: 16px; } - + + .ArticleBack { + font-size: 24px; + padding: 12px 28px 12px 12px; + } .ArticleAside { margin: 0; padding: 0; border: 0; } +} - .ArticleAsideFeedback { - display: block; +@media screen and (min-width: 1440px) { + .ArticleBack { + font-size: 26px; + margin-left: -16px; + margin-bottom: 72px; } -} +} \ No newline at end of file diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx index ee2cb0d..dfa9f81 100644 --- a/client/components/Articles/Article/Article.tsx +++ b/client/components/Articles/Article/Article.tsx @@ -6,7 +6,7 @@ import Link from 'next/link'; import styles from './Article.module.css'; import t from 'utils/typograph'; -import { Feedback } from 'components/Common/Feedback/Feedback'; +import { Feedback } from 'components/UI/Feedback/Feedback'; const cn = classNames.bind(styles); @@ -17,19 +17,19 @@ function getContent(html) { export function Article({ title, description, sidebar, external }: ArticleProps) { return (
- {!external && - ← - Назад - } + {!external &&
+ + ← + На главную транспорта + + +
}
{title &&

{title}

} {description &&
}
{sidebar && }
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx index 595fcc5..85b89a0 100644 --- a/client/components/MainPage/MainPage.tsx +++ b/client/components/MainPage/MainPage.tsx @@ -17,12 +17,10 @@ import Logo from './Logo.svg'; import styles from './MainPage.module.css'; import { Marquee } from './Marquee/Marquee'; -import { Feedback } from 'components/Common/Feedback/Feedback'; +import { Feedback } from 'components/UI/Feedback/Feedback'; const cn = classNames.bind(styles); -const MOBILE_WIDTH = 768; - export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: MainPageTypes) { const marqueeItemsData = marqueeItems.map(({ id, attributes: { message } }) => ({ id, @@ -58,10 +56,6 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: Ma const handleCardClick = useCallback( (url: string) => (e: React.MouseEvent) => { - if (window.innerWidth <= MOBILE_WIDTH) { - return; - } - const cardSlug = url.slice(1); const article = articles.find((a) => a.slug === cardSlug); diff --git a/client/components/Map/MainContainer/MapMainContainer.tsx b/client/components/Map/MainContainer/MapMainContainer.tsx index 7565db9..45498d1 100644 --- a/client/components/Map/MainContainer/MapMainContainer.tsx +++ b/client/components/Map/MainContainer/MapMainContainer.tsx @@ -14,7 +14,7 @@ import { MapZoomControl } from 'components/Map/ZoomControl/MapZoomControl'; import { MapWelcomeMessage } from 'components/Map/WelcomeMessage/MapWelcomeMessage'; import { MapSearchBar } from 'components/Map/SearchBar/SearchBar'; import { Info } from 'components/Map/Info/Info'; -import { Feedback } from 'components/Common/Feedback/Feedback'; +import { Feedback } from 'components/UI/Feedback/Feedback'; import styles from './MapMainContainer.module.css'; import 'leaflet/dist/leaflet.css'; diff --git a/client/components/Common/Feedback/Feedback.module.css b/client/components/UI/Feedback/Feedback.module.css similarity index 61% rename from client/components/Common/Feedback/Feedback.module.css rename to client/components/UI/Feedback/Feedback.module.css index c5972eb..38e9ad5 100644 --- a/client/components/Common/Feedback/Feedback.module.css +++ b/client/components/UI/Feedback/Feedback.module.css @@ -6,7 +6,7 @@ background: #f9d548; font-weight: 400; font-style: normal; - font-size: 20px; + font-size: 16px; line-height: 1.05; text-decoration: none; } @@ -18,13 +18,25 @@ .Feedback_Size-m, .Feedback_Size-l { - height: 48px; - padding: 8px 24px; + padding: 12px 16px; } -@media screen and (min-width: 768px) { + +@media screen and (min-width: 420px) { + .Feedback { + font-size: 20px; + } + + .Feedback_Size-m, + .Feedback_Size-l { + height: 48px; + padding: 8px 24px; + } +} + +@media screen and (min-width: 1440px) { .Feedback_Size-l { - height: 65px; + height: 60px; padding: 24px 32px; font-size: 24px; } diff --git a/client/components/Common/Feedback/Feedback.tsx b/client/components/UI/Feedback/Feedback.tsx similarity index 100% rename from client/components/Common/Feedback/Feedback.tsx rename to client/components/UI/Feedback/Feedback.tsx diff --git a/client/components/Common/Feedback/Feedback.types.tsx b/client/components/UI/Feedback/Feedback.types.tsx similarity index 100% rename from client/components/Common/Feedback/Feedback.types.tsx rename to client/components/UI/Feedback/Feedback.types.tsx