From 838095086f50ed244259e8f876593fafc3ac3ebe Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Fri, 9 Aug 2024 01:38:35 +0200
Subject: [PATCH] add space to bottom of block content, shrink featurebox

---
 web/src/components/blocks/Blocks.tsx          | 114 +++++++++---------
 .../blocks/featuredBlock.module.scss          |  35 +++---
 .../blocks/imageSliderBlock.module.scss       |   2 +-
 .../components/general/accordion.module.scss  |   4 +
 web/src/css/base.scss                         |   8 ++
 5 files changed, 86 insertions(+), 77 deletions(-)

diff --git a/web/src/components/blocks/Blocks.tsx b/web/src/components/blocks/Blocks.tsx
index 9c6f81a..cfc367c 100644
--- a/web/src/components/blocks/Blocks.tsx
+++ b/web/src/components/blocks/Blocks.tsx
@@ -18,59 +18,63 @@ export const Blocks = ({ blocks }: any) => {
     (block: any) => block?.__typename === "PageSectionBlock"
   );
 
-  return blocks.map((block: any) => {
-    switch (block?.blockType) {
-      case "RichTextBlock":
-        return <RichTextBlock block={block} />;
-        break;
-      case "ImageWithTextBlock":
-        return <ImageWithTextBlock block={block} />;
-        break;
-        case "EmbedBlock":
-          return <EmbedBlock block={block} />;
-          break;
-      case "ImageSliderBlock":
-        return <ImageSliderBlock block={block} />;
-        break;
-      case "HorizontalRuleBlock":
-        return <HorizontalRuleBlock block={block} />;
-        break;
-      case "FeaturedBlock":
-        return <FeaturedBlock block={block} />;
-        break;
-      case "AccordionBlock":
-        return <AccordionBlock block={block} />;
-        break;
-      case "FactBoxBlock":
-        return <FactBoxBlock block={block} />;
-        break;
-      case "PageSectionBlock":
-        return <PageSectionBlock block={block} />;
-        break;
-      case "PageSectionNavigationBlock":
-        return <PageSectionNavigationBlock sections={sections} />;
-        break;
-      case "ContactSectionBlock":
-        return <ContactSectionBlock block={block} />;
-        break;
-      case "ContactSubsectionBlock":
-        return <ContactSubsectionBlock block={block} />;
-        break;
-      case "ContactListBlock":
-        return <ContactListBlock block={block} />;
-        break;
-      case "ContactEntityBlock":
-        return <ContactEntityBlock block={block} />;
-        break;
-      case "NeufAddressSectionBlock":
-        return <NeufAddressSectionBlock />;
-        break;
-      case "OpeningHoursSectionBlock":
-        return <OpeningHoursSectionBlock />;
-        break;
-      default:
-        console.log("unsupported block", block);
-        return <div>Unsupported block type {block?.blockType}</div>;
-    }
-  });
+  return (
+    <div className="blockContent">
+      {blocks.map((block: any) => {
+        switch (block?.blockType) {
+          case "RichTextBlock":
+            return <RichTextBlock block={block} />;
+            break;
+          case "ImageWithTextBlock":
+            return <ImageWithTextBlock block={block} />;
+            break;
+            case "EmbedBlock":
+              return <EmbedBlock block={block} />;
+              break;
+          case "ImageSliderBlock":
+            return <ImageSliderBlock block={block} />;
+            break;
+          case "HorizontalRuleBlock":
+            return <HorizontalRuleBlock block={block} />;
+            break;
+          case "FeaturedBlock":
+            return <FeaturedBlock block={block} />;
+            break;
+          case "AccordionBlock":
+            return <AccordionBlock block={block} />;
+            break;
+          case "FactBoxBlock":
+            return <FactBoxBlock block={block} />;
+            break;
+          case "PageSectionBlock":
+            return <PageSectionBlock block={block} />;
+            break;
+          case "PageSectionNavigationBlock":
+            return <PageSectionNavigationBlock sections={sections} />;
+            break;
+          case "ContactSectionBlock":
+            return <ContactSectionBlock block={block} />;
+            break;
+          case "ContactSubsectionBlock":
+            return <ContactSubsectionBlock block={block} />;
+            break;
+          case "ContactListBlock":
+            return <ContactListBlock block={block} />;
+            break;
+          case "ContactEntityBlock":
+            return <ContactEntityBlock block={block} />;
+            break;
+          case "NeufAddressSectionBlock":
+            return <NeufAddressSectionBlock />;
+            break;
+          case "OpeningHoursSectionBlock":
+            return <OpeningHoursSectionBlock />;
+            break;
+          default:
+            console.log("unsupported block", block);
+            return <div>Unsupported block type {block?.blockType}</div>;
+        }
+      })}
+    </div>
+  )
 };
diff --git a/web/src/components/blocks/featuredBlock.module.scss b/web/src/components/blocks/featuredBlock.module.scss
index 8a1a91c..e5d1b18 100644
--- a/web/src/components/blocks/featuredBlock.module.scss
+++ b/web/src/components/blocks/featuredBlock.module.scss
@@ -1,10 +1,9 @@
 .featuredBlock {
   background: var(--color-background-secondary);
-  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
-  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
+  margin: calc(var(--spacing-sitepadding-block)*2) 0;
+  padding: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  column-gap: var(--spacing-gap-column);
 
   &[data-background-color="deepBrick"] {
     background-color: var(--color-deepBrick);
@@ -31,42 +30,26 @@
   &:nth-of-type(even) {
     .text {
       order: 2;
-      align-items: flex-start;
-
-      p {
-        text-align: left;
-      }
     }
 
     .image {
       order: 1;
     }
   }
-
-  +.featuredBlock {
-    margin-top: calc(var(--spacing-sitepadding-block)*-2);
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .text {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-end;
+  align-items: flex-start;
   gap: var(--spacing-gap-row);
+  padding: var(--spacing-l);
 
   h2 {
     font-size: var(--font-size-h2);
   }
 
-  p {
-    text-align: right;
-  }
-
   a {
     font-family: var(--font-serif);
     font-size: var(--font-size-lead);
@@ -93,4 +76,14 @@
   width: 100%;
   padding-top: 60%;
   background: var(--color-placeholder);
+}
+
+@media (max-width: 800px) {
+  .featuredBlock {
+    grid-template-columns: 1fr;
+
+    .text {
+      order: 2;
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/blocks/imageSliderBlock.module.scss b/web/src/components/blocks/imageSliderBlock.module.scss
index 81b7cd6..b04ba45 100644
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -43,7 +43,7 @@
   }
 
   &:last-child {
-    margin-bottom: 0;
+    margin-bottom: calc(var(--spacing-section-bottom)*-1);
   }
 
   &[data-hero] {
diff --git a/web/src/components/general/accordion.module.scss b/web/src/components/general/accordion.module.scss
index 3819aa9..e96daa7 100644
--- a/web/src/components/general/accordion.module.scss
+++ b/web/src/components/general/accordion.module.scss
@@ -52,6 +52,10 @@
 .accordionContent {
   padding: var(--spacing-m) 0 var(--spacing-s);
   display: none;
+
+  >div {
+    padding-bottom: 0;
+  }
 }
 
 .icon {
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 7f23fea..18d1611 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -339,4 +339,12 @@ select {
   font-size: var(--font-size-caption);
   font-weight: 500;
   text-decoration: none;
+}
+
+.blockContent {
+  padding-bottom: var(--spacing-section-bottom);
+}
+
+.accordion .blockContent {
+  padding-bottom: 0;
 }
\ No newline at end of file