From c122ba6952989e91983948ad0f748aefa1776cea Mon Sep 17 00:00:00 2001
From: kreafox <krisztina.n.elekes@gmail.com>
Date: Tue, 30 Jan 2024 10:21:02 +0200
Subject: [PATCH] fix: country header styling

---
 .../Blocks/CountryHeaderDataBlock/View.jsx    |  90 ++++----
 .../Blocks/CountryHeaderDataBlock/style.less  | 194 ++++--------------
 theme/globals/site.overrides                  |  25 ++-
 3 files changed, 107 insertions(+), 202 deletions(-)

diff --git a/src/components/Blocks/CountryHeaderDataBlock/View.jsx b/src/components/Blocks/CountryHeaderDataBlock/View.jsx
index f62e775..c5f03ec 100644
--- a/src/components/Blocks/CountryHeaderDataBlock/View.jsx
+++ b/src/components/Blocks/CountryHeaderDataBlock/View.jsx
@@ -96,56 +96,54 @@ const View = (props) => {
             ''
           )}
           <div className="country-data-wrapper">
-            <div className="uww-country-wrapper">
-              {hide_data_section ||
-                (provider_url && (
-                  <div className="uww-country-block">
-                    <div className={'uww-left ' + getClassName(column_value)}>
-                      <div className="uww-data">
-                        <div>
-                          {column_value[0] === 0 ? (
-                            <span>0%</span>
-                          ) : (
-                            <>
-                              <DataConnectedValue
-                                url={provider_url}
-                                column={column_data}
-                                placeholder={placeholder}
-                              />
-                              %
-                            </>
-                          )}
-                        </div>
+            {hide_data_section ||
+              (provider_url && (
+                <div className="uww-country-block">
+                  <div className={'uww-left ' + getClassName(column_value)}>
+                    <div className="uww-data">
+                      <div>
+                        {column_value[0] === 0 ? (
+                          <span>0%</span>
+                        ) : (
+                          <>
+                            <DataConnectedValue
+                              url={provider_url}
+                              column={column_data}
+                              placeholder={placeholder}
+                            />
+                            %
+                          </>
+                        )}
                       </div>
-                      {description && (
-                        <span className="uww-text">{description}</span>
-                      )}
                     </div>
-                    <div className="uww-country-legend">
-                      <div className="legend-wrapper">
-                        <span className="legend-box blue-bg"></span>
-                        <span className="legend-text">97.1 - 100%</span>
-                      </div>
-                      <div className="legend-wrapper">
-                        <span className="legend-box green-bg"></span>
-                        <span className="legend-text">95.1 - 97%</span>
-                      </div>
-                      <div className="legend-wrapper">
-                        <span className="legend-box yellow-bg"></span>
-                        <span className="legend-text">85.1 - 95%</span>
-                      </div>
-                      <div className="legend-wrapper">
-                        <span className="legend-box orange-bg"></span>
-                        <span className="legend-text">70.1 - 85%</span>
-                      </div>
-                      <div className="legend-wrapper">
-                        <span className="legend-box red-bg"></span>
-                        <span className="legend-text">0 - 70%</span>
-                      </div>
+                    {description && (
+                      <span className="uww-text">{description}</span>
+                    )}
+                  </div>
+                  <div className="uww-country-legend">
+                    <div className="legend-wrapper">
+                      <span className="legend-box blue-bg"></span>
+                      <span className="legend-text">97.1 - 100%</span>
+                    </div>
+                    <div className="legend-wrapper">
+                      <span className="legend-box green-bg"></span>
+                      <span className="legend-text">95.1 - 97%</span>
+                    </div>
+                    <div className="legend-wrapper">
+                      <span className="legend-box yellow-bg"></span>
+                      <span className="legend-text">85.1 - 95%</span>
+                    </div>
+                    <div className="legend-wrapper">
+                      <span className="legend-box orange-bg"></span>
+                      <span className="legend-text">70.1 - 85%</span>
+                    </div>
+                    <div className="legend-wrapper">
+                      <span className="legend-box red-bg"></span>
+                      <span className="legend-text">0 - 70%</span>
                     </div>
                   </div>
-                ))}
-            </div>
+                </div>
+              ))}
           </div>
         </div>
       </div>
diff --git a/src/components/Blocks/CountryHeaderDataBlock/style.less b/src/components/Blocks/CountryHeaderDataBlock/style.less
index a0a5c7d..d264223 100644
--- a/src/components/Blocks/CountryHeaderDataBlock/style.less
+++ b/src/components/Blocks/CountryHeaderDataBlock/style.less
@@ -10,7 +10,7 @@
 
 .country-data-wrapper {
   display: flex;
-  align-items: center;
+  flex-flow: row-reverse;
 }
 
 .country-profile-wrapper {
@@ -18,48 +18,21 @@
   align-items: center;
 }
 
-.uww-country-wrapper {
-  display: flex;
-  min-height: 60px;
-  flex-direction: column;
-  justify-content: center;
-
-  .blue-bg {
-    background-color: @blue-bg;
-  }
-
-  .green-bg {
-    background-color: @green-bg;
-  }
-
-  .yellow-bg {
-    background-color: @yellow-bg;
-  }
-
-  .orange-bg {
-    background-color: @orange-bg;
-  }
-
-  .red-bg {
-    background-color: @red-bg;
-  }
-}
-
 .uww-left {
   display: flex;
   width: 200px;
-  height: 158px;
+  height: 150px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1em;
+  color: @white;
 }
 
 .uww-country-block {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  gap: 4em;
+  gap: 1em;
 
   .uww-data {
     font-family: @headerFont;
@@ -74,6 +47,26 @@
     line-height: 16px;
     text-align: center;
   }
+
+  .blue-bg {
+    background-color: @blue-bg;
+  }
+
+  .green-bg {
+    background-color: @green-bg;
+  }
+
+  .yellow-bg {
+    background-color: @yellow-bg;
+  }
+
+  .orange-bg {
+    background-color: @orange-bg;
+  }
+
+  .red-bg {
+    background-color: @red-bg;
+  }
 }
 
 .uww-country-legend {
@@ -81,7 +74,6 @@
   flex-direction: column;
   justify-content: space-between;
   gap: 10px;
-  // padding-left: 25px;
 
   .legend-wrapper {
     display: flex;
@@ -92,50 +84,17 @@
     .legend-box {
       width: 44px;
       height: 22px;
-      // margin-right: 14px;
     }
 
     .legend-text {
-      // color: #3d5265;
       font-family: @headerFont;
       font-size: 14px;
-      // font-weight: 500;
-      // line-height: 26px;
     }
   }
-
-  .blue-bg {
-    background-color: @blue-bg;
-  }
-
-  .green-bg {
-    background-color: @green-bg;
-  }
-
-  .yellow-bg {
-    background-color: @yellow-bg;
-  }
-
-  .orange-bg {
-    background-color: @orange-bg;
-  }
-
-  .red-bg {
-    background-color: @red-bg;
-  }
 }
 
 .country-header-block {
   position: relative;
-  // color: darken(#3d5265, 15%);
-
-  .country-header-wrapper {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    // justify-content: center;
-  }
 
   .country-profile-flag {
     line-height: 12px !important;
@@ -196,106 +155,39 @@
   }
 }
 
-@media only screen and (min-width: 795px) and (max-width: 945px) {
-  .country-header-block .country-header-wrapper {
-    flex-direction: column;
-    align-items: flex-end;
-  }
-
-  .uww-country-block {
-    position: relative;
-    flex-direction: column;
-  }
-
-  .uww-country-legend {
-    position: absolute;
-    right: 0;
-    bottom: -60px;
-    min-width: 650px;
-    flex-direction: row;
-  }
-}
-
-@media only screen and (max-width: 794px) {
-  .country-header-block .country-header-wrapper {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .uww-country-block {
-    position: relative;
-    flex-direction: row;
-  }
-
-  .country-data-wrapper {
-    padding-top: 1em;
-  }
-
-  #view .country-header-block {
-    position: relative;
-    height: 300px;
-  }
-}
-
-@media only screen and (max-width: 790px) and (min-width: 650px) {
+@media only screen and (max-width: 767px) {
   .country-data-wrapper {
-    align-self: flex-end;
+    flex-direction: row;
   }
 }
 
-@media only screen and (max-width: @tabletBreakpoint) {
-  .contenttype-country_profile {
-    .content-area {
-      padding-top: 0 !important;
-      margin-top: 0 !important;
-    }
-  }
-
-  .country-header-block {
-    &:before {
-      top: -1px !important;
-      height: 131px !important;
-      border-top: 1px solid #d8d8d8;
-    }
+@media only screen and (max-width: 480px) {
+  .uww-left {
+    width: 100%;
   }
-}
-
-@media only screen and (max-width: @mobileLandscapeBreakpoint) {
-  .country-header-block {
-    .country-profile-flag img {
-      height: 90px;
-    }
 
-    &:before {
-      height: 92px !important;
-    }
-
-    .ui.selection.dropdown.countries-dd > .text,
-    .ui.selection.dropdown.countries-dd i.icon {
-      font-size: 24px;
-    }
+  .uww-country-block .uww-data {
+    font-size: 2.8em;
   }
-}
 
-@media only screen and (max-width: 360px) {
   .uww-country-block {
     flex-direction: column;
-    align-items: flex-start;
+    width: 100%;
   }
 
   .uww-country-legend {
-    flex-direction: row;
-    padding: 0;
-    margin-top: 1rem;
+    column-count: 2;
+    column-gap: 2em;
+    display: block;
+  }
 
-    .legend-wrapper .legend-box {
-      width: 15px;
-      height: 15px;
-    }
+  .uww-country-legend .legend-wrapper {
+    break-inside: avoid-column;
+    padding: 4px 0;
+    gap: 0.5em;
+  }
 
-    .legend-wrapper .legend-text {
-      font-size: 11px;
-      line-height: 13px;
-    }
+  .uww-country-legend .legend-wrapper .legend-box {
+    width: 30px;
   }
 }
diff --git a/theme/globals/site.overrides b/theme/globals/site.overrides
index e616e8e..807cf65 100644
--- a/theme/globals/site.overrides
+++ b/theme/globals/site.overrides
@@ -99,13 +99,28 @@ ul.metadata.geolocation-widget {
 }
 
 // Custom page header
-#page-header .content-box {
-  margin-bottom: 0px;
+body.custom-page-header {
+  #page-header {
+    .column-blocks-wrapper,
+    .content-box {
+      margin-bottom: 0;
+    }
+
+    .country-header-block {
+      padding-right: 1em;
+    }
+
+    .country-flag {
+      padding-left: 1.25rem;
+    }
+  }
 }
 
-body.custom-page-header #page-header {
-  margin-right: auto !important;
-  margin-left: auto !important;
+@media only screen and (min-width: 991px) {
+  body.custom-page-header #page-header {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
 }
 
 body.custom-page-header .breadcrumbs {