Merge pull request #1301 from UN-OCHA/berliner/HPC-10015

HPC-10015: Sync some gho components from CM
UN-OCHA · Jan 29, 2025 · afb9aec · afb9aec
2 parents c4949c8 + 2017041
commit afb9aec
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 16 deletions.
diff --git a/...emes/custom/common_design_subtheme/components/gho-interactive-content/README.md b/...emes/custom/common_design_subtheme/components/gho-interactive-content/README.md
@@ -1,4 +1,4 @@
-Global Humanitarian Overview - Interactive Content Component
+HPC Content Module - Interactive Content Component
 ============================================================
 
 Styling of interactive content (ex: map, infographic etc.).
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
@@ -165,7 +165,7 @@
 /**
  * Support for 4-col interactive content.
  */
- .layout--fourcol--interactive-content {
+.layout--fourcol--interactive-content {
   display: flex;
   flex-wrap: wrap;
 }

diff --git a/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css b/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css
@@ -135,4 +135,4 @@
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
-}
+}
diff --git a/...hemes/custom/common_design_subtheme/components/gho-top-figures/gho-top-figures--small.css b/...hemes/custom/common_design_subtheme/components/gho-top-figures/gho-top-figures--small.css
@@ -30,7 +30,6 @@
   padding-top: 0;
   padding-bottom: 2rem;
   border-top: 0;
-  border-bottom: 1px solid #d8d8d8;
 }
 
 .gho-top-figures--small .gho-figures * {

diff --git a/html/themes/custom/common_design_subtheme/components/gho-top-figures/gho-top-figures.css b/html/themes/custom/common_design_subtheme/components/gho-top-figures/gho-top-figures.css
@@ -1,6 +1,10 @@
+.gho-top-figures::after {
+  display: block;
+  content: "";
+  border-bottom: 1px solid #d8d8d8;
+}
 .gho-top-figures .gho-figures {
   padding-bottom: 2rem;
-  border-bottom: 1px solid #d8d8d8;
 }
 .gho-top-figures:not(.gho-top-figures--small) .gho-figures .gho-figure {
   padding: 2rem 0;
@@ -29,29 +33,31 @@
   font-weight: bold;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 576px) {
   .gho-top-figures .gho-figures {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
+    margin-left: -1.5rem;
     padding-top: 2rem;
+    padding-bottom: 0;
     border-top: 1px solid #d8d8d8;
   }
-  /* hide border-top when NaR immediately follows a Hero image caption */
+  /* hide border-top when top figures immediately follows a Hero image caption */
   .gho-caption--article + .gho-top-figures .gho-figures {
     border-top: 0;
   }
   .gho-top-figures:not(.gho-top-figures--small) .gho-figures .gho-figure {
     display: inline-block;
     flex-grow: 1;
-    flex-shrink: 0;
+    margin-bottom: 2rem;
     padding: 0 1.5rem;
     border-width: 0 0 0 1px;
   }
   [dir="ltr"]
     .gho-top-figures:not(.gho-top-figures--small)
     .gho-figures
     .gho-figure:first-child {
-    padding-left: 0;
     border-width: 0;
   }
   [dir="ltr"]
@@ -64,13 +70,6 @@
     .gho-top-figures:not(.gho-top-figures--small)
     .gho-figures
     .gho-figure:first-child {
-    padding-right: 0;
-  }
-  [dir="rtl"]
-    .gho-top-figures:not(.gho-top-figures--small)
-    .gho-figures
-    .gho-figure:last-child {
-    padding-left: 0;
     border-width: 0;
   }
   .gho-top-figures .gho-figure__label {
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,4 +135,4 @@ @@
         font-size: 2.25rem;
         line-height: 2.5rem;
       }
-    }
+    }