Add feedback button to Modal

ekaterinburgdev · Jun 12, 2024 · 781c319 · 781c319
1 parent 21b1b08
commit 781c319
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 27 deletions.
diff --git a/client/components/Articles/Article/Article.module.css b/client/components/Articles/Article/Article.module.css
@@ -1,6 +1,6 @@
 .Article {
     color: #0C1B27;
-    max-width: 1000px;
+    max-width: 1280px;
     margin: 0 auto;
     padding: 32px 24px 40px;
     font-size: 20px;
@@ -9,7 +9,9 @@
 }
 
 .Article_external {
-    padding: 0;
+    padding-right: 0;
+    padding-left: 0;
+    padding-bottom: 0;
 }
 
 .ArticleBack {
@@ -22,6 +24,7 @@
     text-decoration: none;
     text-decoration-skip-ink: none;
     color: #0C1B27;
+    margin-bottom: 40px;
 }
 
 .ArticleBackArrow {
@@ -47,8 +50,18 @@
     font-size: 24px;
     font-weight: 500;
     line-height: 1.12;
+    margin-top: -0.05em;
+    margin-bottom: 1em;
 }
 
+.ArticleContent {
+    display: flex;
+    gap: 8px;
+}
+
+.Article_external .ArticleContent {
+    padding-bottom: 0;
+}
 
 .ArticleContent a:hover {
     text-decoration: none;
@@ -84,6 +97,10 @@
     font-size: 14px;
     line-height: 1.4;
     margin-bottom: 1.1em;
+
+    &:first-child {
+        margin-top: 0;
+    }
 }
 
 .ArticleContent li {
@@ -130,18 +147,23 @@
     font-weight: 500;
 }
 
+.ArticleAside {
+    flex-basis: 25%;
+    flex-shrink: 0;
+}
+
 @media screen and (min-width: 768px) {
-    .Article {
-        padding-top: 64px;
-        padding-bottom: 80px;
+    .ArticleTitle {
+        font-size: 64px;
     }
 
-    .Article_external {
-        padding: 0;
+    .ArticleBack {
+        margin-bottom: 80px;
     }
 
-    .ArticleTitle {
-        font-size: 64px;
+    .ArticleContent {
+        gap: 32px;
+        padding-bottom: 80px;
     }
 
     .ArticleContent h2 {

diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx
@@ -9,22 +9,26 @@ import t from 'utils/typograph';
 
 const cn = classNames.bind(styles);
 
-export function Article({ title, description, external }: ArticleProps) {
+export function Article({ title, description, aside, external }: ArticleProps) {
     return (
-        <article className={cn(styles.Article, { [styles.Article_external]: external })}>
+        <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>}
-
-            {title && <h1 className={cn(styles.ArticleTitle)}>
-                {title}
-            </h1>}
-
-            {description && <div
-                className={cn(styles.ArticleContent)}
-                dangerouslySetInnerHTML={{ __html: t(md({ html: true }).render(description)) }}
-            />}
-        </article>
+            <article className={cn(styles.ArticleContent)}>
+                <div>
+                    {title && <h1 className={cn(styles.ArticleTitle)}>
+                        {title}
+                    </h1>}
+                    {description && <div
+                        dangerouslySetInnerHTML={{ __html: t(md({ html: true }).render(description)) }}
+                    />}
+                </div>
+                {aside && <aside className={cn(styles.ArticleAside)}>
+                    {aside}
+                </aside>}
+            </article>
+        </div>
     )
 }
diff --git a/client/components/Articles/Article/Article.types.tsx b/client/components/Articles/Article/Article.types.tsx
@@ -1,5 +1,8 @@
+import { ReactElement } from "react";
+
 export type ArticleProps = {
     title?: string;
     description: string;
+    aside: ReactElement;
     external?: boolean
 };
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
@@ -142,6 +142,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: Ma
                         <Article
                             title={openedArticle.title}
                             description={openedArticle.description}
+                            aside={<Feedback size='l' />}
                             external
                         />
                     </Modal>

diff --git a/client/components/UI/Modal/Modal.module.css b/client/components/UI/Modal/Modal.module.css
@@ -54,9 +54,8 @@
 @media screen and (min-width: 768px) {
     .Modal {
         width: 100%;
-        max-width: 1080px;
+        max-width: 1400px;
         margin: 56px auto;
-        max-height: calc(100vh - 112px);
     }
 
     .Modal_Align-top {
@@ -84,11 +83,17 @@
 
     .ModalTitle {
         font-size: 32px;
-        padding: 60px 68px 32px;
+        padding: 60px 64px 16px;
     }
 
     .ModalContent {
-        padding: 12px 68px 48px;
+        padding: 12px 64px 48px;
+    }
+}
+
+@media screen and (min-height: 800px) {
+    .Modal {
+        max-height: calc(100vh - 112px);
     }
 }
 

diff --git a/client/pages/[slug].tsx b/client/pages/[slug].tsx
@@ -4,16 +4,20 @@ 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';
 
 function ArticlePage({ title, description }: ArticleProps) {
     return (
         <>
-        
+
             <Head>
                 <title>{`Транспорт Екатеринбурга — ${title}`}</title>
             </Head>
 
-            <Article title={title} description={description} />
+            <Article
+                title={title}
+                description={description}
+                aside={<Feedback size='l' />} />
         </>
     );
 }