fix cards justify when less than 3 cards

Author: cherylli

components/containers/CardsColumns.js

@@ -10,33 +10,41 @@ import styles from '@/styles/CardsColumns.module.scss';
 export default function CardsColumns({ cards, customClass }) {
   return (
     <Container>
-      <Swiper
-        className={styles.swiper}
-        mousewheel={true}
-        grabCursor={true}
-        modules={[Pagination]}
-        pagination
-        centerInsufficientSlides={false}
-        slidesPerView={1}
-        breakpoints={{
-          768: {
-            slidesPerView: 2,
-            spaceBetween: 20,
-          },
-          1334: {
-            slidesPerView: cards.length,
-            spaceBetween: cards.length < 3 ? 75 : 20,
-          },
-        }}
+      <div
+        className={
+          customClass
+            ? `${styles.cardColumns} ${styles[customClass]}`
+            : styles.cardColumns
+        }
       >
-        {cards.map((card, index) => (
-          <SwiperSlide key={index} className={styles.swiperSlide}>
-            <div className={styles.inner__content}>
-              <Card key={index} card={card} customClass={customClass} />
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper>
+        <Swiper
+          className={styles.swiper}
+          mousewheel={true}
+          grabCursor={true}
+          modules={[Pagination]}
+          pagination
+          centerInsufficientSlides={false}
+          slidesPerView={1}
+          breakpoints={{
+            768: {
+              slidesPerView: 2,
+              spaceBetween: 20,
+            },
+            1334: {
+              slidesPerView: 3,
+              spaceBetween: 20,
+            },
+          }}
+        >
+          {cards.map((card, index) => (
+            <SwiperSlide key={index} className={styles.swiperSlide}>
+              <div className={styles.inner__content}>
+                <Card key={index} card={card} customClass={customClass} />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
     </Container>
   );
 }

pages/blog/category/[tag].js

@@ -10,6 +10,7 @@ export default function BlogCategory({ posts }) {
       posts={posts}
       swipe={false}
       heading={tagToHeading[tag]}
+      viewall={false}
     />
   );
 }

pages/blog/category/all.js

@@ -1,9 +1,6 @@
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 
 export default function BlogCategory({ posts }) {
-  // TODO: Temporary, to show more posts
-  posts = posts.concat(posts).concat(posts);
-
   return (
     <BlogPostsContainer
       posts={posts}

styles/Card.module.scss

@@ -120,6 +120,7 @@
 
     @include desktop {
       min-width: 25%;
+      max-width: 18.75rem;
     }
 
     .card__image {
@@ -133,8 +134,8 @@
       overflow: hidden;
     }
 
-    &.swiper-wrapper {
-      justify-content: flex-start;
+    .swiper-wrapper {
+      justify-content: flex-end;
     }
   }
 

styles/CardsColumns.module.scss

@@ -1,25 +1,27 @@
 @use './variables' as *;
 @use './mixins' as *;
 
-.inner__content {
-  margin: 0 auto;
-  padding-bottom: 4rem;
-  justify-content: center;
+.cardColumns {
+  .inner__content {
+    margin: 0 auto;
+    padding-bottom: 4rem;
+    justify-content: center;
 
-  @include desktop-breakpoint-plus {
-    display: flex;
+    @include desktop-breakpoint-plus {
+      display: flex;
+    }
   }
-}
 
-.swiper {
-  margin-bottom: 5rem;
-  padding: 0 1rem;
+  .swiper {
+    margin-bottom: 5rem;
+    padding: 0 1rem;
 
-  :global(.swiper-pagination-bullet-active) {
-    background-color: $dark-bg-color;
+    :global(.swiper-pagination-bullet-active) {
+      background-color: $dark-bg-color;
+    }
   }
-}
 
-.swiperSlide {
-  max-width: 34.375rem;
+  .swiperSlide {
+    max-width: 34.375rem;
+  }
 }