HPC-9265: Add necessary styles to support 2 column interactive conten…

…t paragraphs
UN-OCHA · Oct 27, 2023 · 34fe527 · 34fe527
1 parent 46e54e9
commit 34fe527
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/html/modules/custom/ghi_content/src/Plugin/Block/Paragraph.php b/html/modules/custom/ghi_content/src/Plugin/Block/Paragraph.php
@@ -262,6 +262,10 @@ public function getThemeComponents(RemoteParagraphInterface $paragraph) {
       // Stories always use the gho-aside component.
       $theme_components[] = 'common_design_subtheme/gho-aside';
     }
+    if ($paragraph->getType() == 'interactive_content_2_columns') {
+      // Interactive content in 2 columns still needs styles.
+      $theme_components[] = 'common_design_subtheme/gho-interactive-content';
+    }
     if ($paragraph->getType() == 'sub_article') {
       // Find the paragraph types used in the sub article and add the
       // components for those too.

diff --git a/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css b/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css
@@ -20,3 +20,51 @@
   font-size: 0.875rem;
   line-height: 1.5rem;
 }
+
+/**
+ * Support for 2-col interactive content.
+ */
+ .layout--twocol--interactive-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--twocol--interactive-content > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 1024px) {
+  .layout--twocol--interactive-content {
+    gap: 2rem;
+  }
+
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--50-50 > .layout__region--first,
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--50-50 > .layout__region--second {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+  }
+
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--33-67 > .layout__region--first,
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--67-33 > .layout__region--second {
+    flex: 0 1 33%;
+    flex-basis: calc(33% - 1rem);
+  }
+
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--33-67 > .layout__region--second,
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--67-33 > .layout__region--first {
+    flex: 0 1 67%;
+    flex-basis: calc(67% - 1rem);
+  }
+
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--25-75 > .layout__region--first,
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--75-25 > .layout__region--second {
+    flex: 0 1 25%;
+    flex-basis: calc(25% - 1rem);
+  }
+
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--25-75 > .layout__region--second,
+  .layout--twocol--interactive-content.layout--twocol--interactive-content--75-25 > .layout__region--first {
+    flex: 0 1 75%;
+    flex-basis: calc(75% - 1rem);
+  }
+}