Update back & feedback buttons in article header

ekaterinburgdev · Aug 26, 2024 · 4238b18 · 4238b18 · ekbdev · Aug 26, 2024
1 parent a453b92
commit 4238b18
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 56 deletions.
diff --git 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;
     }
-}
+}
diff --git 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 (
         <div className={cn(styles.Article, { [styles.Article_external]: external })}>
-            {!external && <Link className={cn(styles.ArticleBack)} href="/">
-                <span className={cn(styles.ArticleBackArrow)}>←</span>
-                <span className={cn(styles.ArticleBackCaption)}>Назад</span>
-            </Link>}
+            {!external && <div className={cn(styles.ArticleControls)}>
+                <Link className={cn(styles.ArticleBack)} href="/">
+                    <span className={cn(styles.ArticleBackArrow)}>←</span>
+                    <span className={cn(styles.ArticleBackCaption)}>На главную транспорта</span>
+                </Link>
+                <Feedback size="l" />
+            </div>}
             <article className={cn(styles.ArticleContent)}>
                 <div className={cn(styles.ArticleText)}>
                     {title && <h1 className={cn(styles.ArticleTitle)}>{title}</h1>}
                     {description && <div dangerouslySetInnerHTML={{ __html: getContent(description) }} />}
                 </div>
                 {sidebar && <aside className={cn(styles.ArticleAside)}>
-                    <div className={cn(styles.ArticleAsideFeedback)}>
-                        <Feedback size="l" />
-                    </div>
                     <div dangerouslySetInnerHTML={{ __html: getContent(sidebar) }} />
                 </aside>}
             </article>

diff --git 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<HTMLAnchorElement>) => {
-            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
@@ -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/...nents/Common/Feedback/Feedback.module.css → ...omponents/UI/Feedback/Feedback.module.css b/...nents/Common/Feedback/Feedback.module.css → ...omponents/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/...t/components/Common/Feedback/Feedback.tsx → client/components/UI/Feedback/Feedback.tsx b/...t/components/Common/Feedback/Feedback.tsx → client/components/UI/Feedback/Feedback.tsx
diff --git a/...onents/Common/Feedback/Feedback.types.tsx → ...components/UI/Feedback/Feedback.types.tsx b/...onents/Common/Feedback/Feedback.types.tsx → ...components/UI/Feedback/Feedback.types.tsx
diff --git a/client/pages/[slug].tsx b/client/pages/[slug].tsx
@@ -4,7 +4,7 @@ import Head from 'next/head';
 import { articlesApi } from 'api/articles/articles';
 import { ArticleProps } from 'components/Articles/Article/Article.types';
 import { Article } from 'components/Articles/Article/Article';
-import { Feedback } from 'components/Common/Feedback/Feedback';
+import { Feedback } from 'components/UI/Feedback/Feedback';
 
 function ArticlePage({ title, description, sidebar }: ArticleProps) {
     return (