Show sidebar in Articles (#112)

* Update list styles * Add feedback button to Modal * Update modal x-margins * Set aside prop as optional * Show sidebar in modal
ekaterinburgdev · Aug 25, 2024 · 2ef80cc · 2ef80cc
1 parent a5b3dd5
commit 2ef80cc
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 120 deletions.
diff --git a/client/api/articles/articles.types.ts b/client/api/articles/articles.types.ts
@@ -3,6 +3,7 @@ export interface Article {
     attributes: {
         title: string;
         description: string;
+        sidebar: string;
         createdAt: Date;
         updatedAt: Date;
         publishedAt: Date;

diff --git a/client/components/Articles/Article/Article.module.css b/client/components/Articles/Article/Article.module.css
@@ -1,37 +1,40 @@
 .Article {
-    color: #0C1B27;
-    max-width: 1000px;
+    max-width: 1280px;
     margin: 0 auto;
-    padding: 32px 24px 40px;
-    font-size: 20px;
+    padding: 24px;
+    color: #0C1B27;
     font-weight: 300;
+    font-size: 20px;
     line-height: 1.3;
 }
 
 .Article_external {
-    padding: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
 }
 
 .ArticleBack {
     display: inline-flex;
-    align-items: center;
     gap: .5em;
-    white-space: nowrap;
+    align-items: center;
+    margin-bottom: 40px;
+    color: #0C1B27;
     font-size: 32px;
     line-height: 1;
     text-decoration: none;
+    white-space: nowrap;
     text-decoration-skip-ink: none;
-    color: #0C1B27;
 }
 
 .ArticleBackArrow {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     width: 1.25em;
     height: 1.25em;
-    background: rgba(12, 27, 39, 0.07);
     border-radius: 50%;
+    background: rgba(12, 27, 39, 0.07);
     transition: .1s ease;
 }
 
@@ -44,46 +47,55 @@
 }
 
 .ArticleTitle {
-    font-size: 24px;
+    margin-top: -0.05em;
+    margin-bottom: 1em;
     font-weight: 500;
+    font-size: 24px;
     line-height: 1.12;
 }
 
+.Article_external .ArticleContent {
+    padding-bottom: 0;
+}
 
 .ArticleContent a:hover {
     text-decoration: none;
 }
 
 .ArticleContent h2 {
-    font-size: 22px;
-    font-weight: 500;
-    line-height: 1.16;
     margin-top: 1.4em;
     margin-bottom: .3em;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 1.16;
 }
 
 .ArticleContent h3 {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.25;
     margin-top: 1.9em;
     margin-bottom: .8em;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.25;
 }
 
 .ArticleContent h4 {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.25;
     margin-top: 1.75em;
     margin-bottom: .25em;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.25;
 }
 
 .ArticleContent ol,
 .ArticleContent ul,
 .ArticleContent p {
+    margin-bottom: 1.1em;
     font-size: 14px;
     line-height: 1.4;
-    margin-bottom: 1.1em;
+
+    &:first-child {
+        margin-top: 0;
+    }
 }
 
 .ArticleContent li {
@@ -95,25 +107,30 @@
     color: #667999;
 }
 
+.ArticleContent ol {
+    padding-left: 1em;
+}
+
 .ArticleContent ul {
+    padding-left: 1.5em;
     list-style-type: none;
 }
 
 .ArticleContent ul li:before {
     content: "—";
     display: inline-block;
-    padding-right: .5em;
     margin-left: -1.5em;
+    padding-right: .5em;
     opacity: .45;
 }
 
 .ArticleContent blockquote {
-    font-size: 22px;
-    line-height: 1.35;
+    margin: 8px 0;
     padding: 16px;
     border-radius: 16px;
     background: #F4F6FB;
-    margin: 8px 0;
+    font-size: 22px;
+    line-height: 1.35;
 }
 
 .ArticleContent blockquote p {
@@ -125,18 +142,39 @@
     font-weight: 500;
 }
 
+.ArticleAside {
+    flex-shrink: 0;
+    flex-basis: 25%;
+    margin-top: 56px;
+    padding: 24px 0;
+    border-top: 2px solid #eee;
+}
+
+.ArticleText {
+    flex-grow: 1;
+}
+
+.ArticleAsideFeedback {
+    display: none;
+    text-align: right;
+}
+
 @media screen and (min-width: 768px) {
     .Article {
-        padding-top: 64px;
-        padding-bottom: 80px;
+        padding: 32px;
+    }
+
+    .ArticleTitle {
+        font-size: 64px;
     }
 
-    .Article_external {
-        padding: 0;
+    .ArticleBack {
+        margin-bottom: 64px;
     }
 
-    .ArticleTitle {
-        font-size: 64px;
+    .ArticleContent {
+        gap: 32px;
+        padding-bottom: 80px;
     }
 
     .ArticleContent h2 {
@@ -161,4 +199,22 @@
         margin: 16px 0;
         padding: 24px;
     }
-}
+}
+
+@media screen and (min-width: 1200px) {
+    .ArticleContent {
+        display: flex;
+        gap: 16px;
+    }
+
+
+    .ArticleAside {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
+
+    .ArticleAsideFeedback {
+        display: block;
+    }
+}
diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx
@@ -6,25 +6,33 @@ import Link from 'next/link';
 
 import styles from './Article.module.css';
 import t from 'utils/typograph';
+import { Feedback } from 'components/Common/Feedback/Feedback';
 
 const cn = classNames.bind(styles);
 
-export function Article({ title, description, external }: ArticleProps) {
+function getContent(html) {
+    return t(md({ html: true }).render(html));
+}
+
+export function Article({ title, description, sidebar, 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 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>
+        </div>
     )
 }
diff --git a/client/components/Articles/Article/Article.types.tsx b/client/components/Articles/Article/Article.types.tsx
@@ -1,5 +1,6 @@
 export type ArticleProps = {
     title?: string;
     description: string;
+    sidebar?: string;
     external?: boolean
 };
diff --git a/client/components/Common/Feedback/Feedback.module.css b/client/components/Common/Feedback/Feedback.module.css
@@ -1,5 +1,5 @@
-.MapFeedback {
-    display: flex;
+.Feedback {
+    display: inline-flex;
     justify-content: center;
     align-items: center;
     border-radius: 64px;
@@ -12,18 +12,18 @@
 }
 
 /* leaflet styles for links have more specificity */
-.MapFeedback.MapFeedback {
+.Feedback.Feedback {
     color: var(--text-primary);
 }
 
-.MapFeedback_Size-m,
-.MapFeedback_Size-l {
+.Feedback_Size-m,
+.Feedback_Size-l {
     height: 48px;
     padding: 8px 24px;
 }
 
 @media screen and (min-width: 768px) {
-    .MapFeedback_Size-l {
+    .Feedback_Size-l {
         height: 65px;
         padding: 24px 32px;
         font-size: 24px;

diff --git a/client/components/Common/Feedback/Feedback.tsx b/client/components/Common/Feedback/Feedback.tsx
@@ -7,20 +7,15 @@ import styles from './Feedback.module.css';
 
 const cn = classNames.bind(styles);
 
-export function Feedback({
-    caption = 'Фидбек',
-    size
-} : FeedbackProps) {
+export function Feedback({ size } : FeedbackProps) {
     return (
         <a
             href="https://tally.so#tally-open=mRDkVd&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
             target="_blank"
             rel="noreferrer"
-            className={cn(styles.MapFeedback, {
-                [styles[`MapFeedback_Size-${size}`]]: size
-            })}
+            className={cn(styles.Feedback, { [styles[`Feedback_Size-${size}`]]: size })}
         >
-            {caption}
+            Фидбек
         </a>
     );
 }
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}
+                            sidebar={openedArticle.sidebar}
                             external
                         />
                     </Modal>