From d6ef1013c9b8d989684f08f9e520798cd9c2ab80 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 17 Oct 2022 19:24:16 +0300
Subject: [PATCH] Fixed single article block

---
 src/components/Feed/Card.module.scss | 58 ++++++++++++++++++++++++++++
 src/components/Feed/Card.tsx         |  4 +-
 src/components/Feed/Row1.scss        | 50 ------------------------
 src/components/Feed/Row1.tsx         |  3 +-
 4 files changed, 62 insertions(+), 53 deletions(-)
 delete mode 100644 src/components/Feed/Row1.scss

diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss
index 863ec09d..84664914 100644
--- a/src/components/Feed/Card.module.scss
+++ b/src/components/Feed/Card.module.scss
@@ -601,3 +601,61 @@
     }
   }
 }
+
+.shoutCardSingle {
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+
+    .shoutCardTitlesContainer {
+      flex: 1;
+    }
+
+    .shoutCardCover {
+      margin-bottom: 0;
+    }
+
+    .shoutCardCoverContainer {
+      flex: 1 58.3333%;
+    }
+
+    .shoutCardContent {
+      display: flex;
+      flex-direction: column;
+      flex: 1 41.6666%;
+      justify-content: space-between;
+      margin-bottom: 0;
+      padding-left: 4rem;
+    }
+
+    .shoutTopic {
+      margin-bottom: 3.2rem;
+    }
+
+    .shoutCardTitle {
+      margin-bottom: 2.4rem;
+    }
+
+    .shoutAuthor {
+      align-items: end;
+      display: flex;
+      flex: 1;
+    }
+  }
+
+  .shoutCardType {
+    top: 0;
+  }
+
+  .shoutCardTitle {
+    @include font-size(4rem);
+
+    font-weight: 900;
+    line-height: 1.1;
+  }
+
+  .shoutCardSubtitle {
+    color: #696969;
+    flex: 1;
+    @include font-size(2.4rem);
+  }
+}
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index 49726b00..3be727e3 100644
--- a/src/components/Feed/Card.tsx
+++ b/src/components/Feed/Card.tsx
@@ -32,6 +32,7 @@ interface ArticleCardProps {
     isShort?: boolean
     withBorder?: boolean
     isCompact?: boolean
+    isSingle?: boolean
   }
   article: Shout
 }
@@ -84,7 +85,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [style.shoutCardBigTitle]: props.settings?.isBigTitle,
         [style.shoutCardVertical]: props.settings?.isVertical,
         [style.shoutCardWithBorder]: props.settings?.withBorder,
-        [style.shoutCardCompact]: props.settings?.isCompact
+        [style.shoutCardCompact]: props.settings?.isCompact,
+        [style.shoutCardSingle]: props.settings?.isSingle
       }}
     >
       <Show when={!props.settings?.noimage && cover}>
diff --git a/src/components/Feed/Row1.scss b/src/components/Feed/Row1.scss
deleted file mode 100644
index 0d41d4fe..00000000
--- a/src/components/Feed/Row1.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.floor--one-article {
-  @include media-breakpoint-up(md) {
-    .shout-card {
-      flex-direction: row;
-    }
-
-    .shout-card__cover {
-      margin-bottom: 0;
-    }
-
-    .shout-card__cover-container {
-      flex: 1 58.3333%;
-    }
-
-    .shout-card__content {
-      display: flex;
-      flex-direction: column;
-      flex: 1 41.6666%;
-      justify-content: space-between;
-      padding-left: 4rem;
-    }
-
-    .shout__topic {
-      margin-bottom: 3.2rem;
-    }
-
-    .shout-card__title {
-      margin-bottom: 2.4rem;
-    }
-
-    .shout__author {
-      align-items: end;
-      display: flex;
-      flex: 1;
-    }
-  }
-
-  .shout-card__title {
-    @include font-size(4rem);
-
-    font-weight: 900;
-    line-height: 1.1;
-  }
-
-  .shout-card__subtitle {
-    color: #696969;
-    flex: 1;
-    @include font-size(2.4rem);
-  }
-}
diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx
index a12c5a8c..abf6b9f8 100644
--- a/src/components/Feed/Row1.tsx
+++ b/src/components/Feed/Row1.tsx
@@ -1,14 +1,13 @@
 import { Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
-import './Row1.scss'
 
 export default (props: { article: Shout }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
       <div class="wide-container row">
         <div class="col-12">
-          <ArticleCard article={props.article} />
+          <ArticleCard article={props.article} settings={{isSingle: true}} />
         </div>
       </div>
     </div>