Added style slider and Row2 additional modes

src/components/Feed/Row2.tsx

@@ -8,7 +8,7 @@ const x = [
   ['8', '4']
 ]
 
-export const Row2 = (props: { articles: Shout[] }) => {
+export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
   const [y, setY] = createSignal(0)
 
   createComputed(() => setY(Math.floor(Math.random() * x.length)))
@@ -20,8 +20,11 @@ export const Row2 = (props: { articles: Shout[] }) => {
           {(a, i) => {
             return (
               <Show when={!!a}>
-                <div class={`col-md-${x[y()][i()]}`}>
+                <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
-                  <ArticleCard article={a} settings={{ isWithCover: x[y()][i()] === '8' }} />
+                  <ArticleCard
+                    article={a}
+                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8' }}
+                  />
                 </div>
               </Show>
             )

src/components/Feed/Slider.scss

@@ -1,15 +1,18 @@
 .swiper-slide {
-  height: 0 !important;
   min-height: 0 !important;
   margin-bottom: 0 !important;
-  padding-top: 100%;
 
-  @include media-breakpoint-up(sm) {
+  .cards-with-cover & {
-    padding-top: 56.2% !important;
+    height: 0 !important;
-  }
+    padding-top: 100%;
 
-  @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(sm) {
-    padding-top: 35% !important;
+      padding-top: 56.2% !important;
+    }
+
+    @include media-breakpoint-up(md) {
+      padding-top: 35% !important;
+    }
   }
 }
 

src/components/Feed/Slider.tsx

@@ -12,6 +12,8 @@ import { Icon } from '../Nav/Icon'
 interface SliderProps {
   title?: string
   articles: Shout[]
+  slidesPerView?: number
+  isCardsWithCover?: boolean
 }
 
 export default (props: SliderProps) => {
@@ -19,12 +21,14 @@ export default (props: SliderProps) => {
   let pagEl: HTMLDivElement | undefined
   let nextEl: HTMLDivElement | undefined
   let prevEl: HTMLDivElement | undefined
+
+  const isCardsWithCover = typeof props.isCardsWithCover === 'boolean' ? props.isCardsWithCover : true
+
   const opts: SwiperOptions = {
     roundLengths: true,
     loop: true,
     centeredSlides: true,
     slidesPerView: 1,
-    spaceBetween: 8,
     modules: [Navigation, Pagination],
     speed: 500,
     navigation: { nextEl, prevEl },
@@ -35,7 +39,12 @@ export default (props: SliderProps) => {
     },
     breakpoints: {
       768: {
-        slidesPerView: 1.66666
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 26
+      },
+      992: {
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 52
       }
     }
   }
@@ -49,12 +58,13 @@ export default (props: SliderProps) => {
     }
   })
   const articles = createMemo(() => props.articles)
+
   return (
     <div class="floor floor--important">
       <div class="wide-container row">
         <h2 class="col-12">{props.title}</h2>
         <Show when={!!articles()}>
-          <div class="swiper" ref={el}>
+          <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
             <div class="swiper-wrapper">
               <For each={articles()}>
                 {(a: Shout) => (
@@ -63,7 +73,7 @@ export default (props: SliderProps) => {
                     settings={{
                       additionalClass: 'swiper-slide',
                       isFloorImportant: true,
-                      isWithCover: true,
+                      isWithCover: isCardsWithCover,
                       nodate: true
                     }}
                   />

src/components/Views/Topic.tsx

@@ -26,7 +26,7 @@ interface TopicProps {
   topicSlug: string
 }
 
-export const PRERENDERED_ARTICLES_COUNT = 21
+export const PRERENDERED_ARTICLES_COUNT = 28
 const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
 
 export const TopicView = (props: TopicProps) => {
@@ -112,7 +112,7 @@ export const TopicView = (props: TopicProps) => {
         </div>
 
         <Row1 article={sortedArticles()[0]} />
-        <Row2 articles={sortedArticles().slice(1, 3)} />
+        <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} />
 
         <Beside
           title={t('Topic is supported by')}
@@ -131,11 +131,18 @@ export const TopicView = (props: TopicProps) => {
         />
 
         <Show when={sortedArticles().length > 5}>
-          <Row3 articles={sortedArticles().slice(13, 16)} />
+          <Row2 articles={sortedArticles().slice(13, 15)} isEqual={true} />
-          <Row2 articles={sortedArticles().slice(16, 18)} />
+          <Row1 article={sortedArticles()[15]} />
-          <Row3 articles={sortedArticles().slice(18, 21)} />
+
-          <Row3 articles={sortedArticles().slice(21, 24)} />
+          <Slider
-          <Row3 articles={sortedArticles().slice(24, 27)} />
+            title={title()}
+            articles={sortedArticles().slice(16, 22)}
+            slidesPerView={3}
+            isCardsWithCover={false}
+          />
+
+          <Row3 articles={sortedArticles().slice(23, 26)} />
+          <Row2 articles={sortedArticles().slice(26, 28)} />
         </Show>
 
         <For each={pages()}>