fix(page-header): fix padding and optional item - FRONT-2964 (#2185)

ec-europa · Aug 23, 2021 · ff8110e · ff8110e · github-actions · Aug 23, 2021
1 parent e47d980
commit ff8110e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/src/implementations/twig/components/page-header-core/page-header-core.html.twig b/src/implementations/twig/components/page-header-core/page-header-core.html.twig
@@ -81,7 +81,7 @@
 
     <h1 class="ecl-page-header-core__title">{{ _title }}</h1>
 
-  {% if _description is not empty %}
+  {% if _description is not empty or _thumbnail is not empty %}
     <div class="ecl-page-header-core__description-container">
     {% if _thumbnail is not empty %}
       <img 
@@ -90,8 +90,10 @@
         alt="{{ _thumbnail.alt|default('') }}"
       />
     {% endif %}
+    {% if _description is not empty %}
       <p class="ecl-page-header-core__description">{{ _description }}</p>
     </div>
+    {% endif %}
   {% endif %}
   </div>
 </div>

diff --git a/...plementations/twig/components/page-header-standardised/page-header-standardised.html.twig b/...plementations/twig/components/page-header-standardised/page-header-standardised.html.twig
@@ -81,7 +81,7 @@
 
     <h1 class="ecl-page-header-standardised__title">{{ _title }}</h1>
 
-  {% if _description is not empty %}
+  {% if _description is not empty or _thumbnail is not empty %}
     <div class="ecl-page-header-standardised__description-container">
     {% if _thumbnail is not empty %}
       <img 
@@ -90,8 +90,10 @@
         alt="{{ _thumbnail.alt|default('') }}"
       />
     {% endif %}
+    {% if _description is not empty %}
       <p class="ecl-page-header-standardised__description">{{ _description }}</p>
     </div>
+    {% endif %}
   {% endif %}
   </div>
 </div>

diff --git a/src/implementations/vanilla/components/page-header-core/page-header-core-eu.scss b/src/implementations/vanilla/components/page-header-core/page-header-core-eu.scss
@@ -10,7 +10,7 @@
 .ecl-page-header-core {
   background-color: map.get(theme.$color, 'white-100');
   margin: 0;
-  padding-bottom: map.get(theme.$spacing, '3xl');
+  padding-bottom: map.get(theme.$spacing, 'xl');
 
   .ecl-container > :first-child:not(.ecl-page-header-core__breadcrumb) {
     margin-top: 0;
@@ -78,10 +78,6 @@
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
-  .ecl-page-header-core {
-    padding-bottom: map.get(theme.$spacing, '4xl');
-  }
-
   .ecl-page-header-core__breadcrumb {
     margin-bottom: map.get(theme.$spacing, 'l');
   }

diff --git a/...lementations/vanilla/components/page-header-standardised/page-header-standardised-eu.scss b/...lementations/vanilla/components/page-header-standardised/page-header-standardised-eu.scss
@@ -10,7 +10,7 @@
 .ecl-page-header-standardised {
   background-color: map.get(theme.$color, 'white-100');
   margin: 0;
-  padding-bottom: map.get(theme.$spacing, '3xl');
+  padding-bottom: map.get(theme.$spacing, 'xl');
 
   .ecl-container > :first-child:not(.ecl-page-header-standardised__breadcrumb) {
     margin-top: 0;
@@ -78,10 +78,6 @@
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
-  .ecl-page-header-standardised {
-    padding-bottom: map.get(theme.$spacing, '4xl');
-  }
-
   .ecl-page-header-standardised__breadcrumb {
     margin-bottom: map.get(theme.$spacing, 'l');
   }