From d1126631496df16fe0e85bb1c529f8e8a6b667e8 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 23 Jul 2020 09:26:47 +0000
Subject: [PATCH] Fix half height background images of sections not appearing
in mobile resolutions
---
CHANGELOG.md | 5 +--
cern_components.info.yml | 2 +-
patterns/molecules/row/css/row.component.css | 22 +++++-------
.../molecules/row/scss/row.component.scss | 36 ++++++++++++-------
4 files changed, 36 insertions(+), 29 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30e3b61a..708f6fd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,11 +4,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-## [2.7.3]
+## [2.7.3] - 23/07/2020
- Fix white spaces appearing above Hero Header is some cases
+- Fix Fix half height background images of sections not appearing in mobile resolutions
-## [2.7.2]- 18/06/2020
+## [2.7.2] - 18/06/2020
- Fixed Related Card/Preview Card components not receiving correct colors when used in Landing Pages
- Fixed issue of half height images w/o has Header looking squashed
diff --git a/cern_components.info.yml b/cern_components.info.yml
index 5dd5e33a..6af84a6b 100755
--- a/cern_components.info.yml
+++ b/cern_components.info.yml
@@ -2,7 +2,7 @@ name: "CERN Components"
type: module
description: "Provides all the necessary modules regarding CERN Web Components."
core: 8.x
-version: 2.7.2
+version: 2.7.3
package: CERN Components
dependencies:
- components:components (>=8.x-1.1-alpha1)
diff --git a/patterns/molecules/row/css/row.component.css b/patterns/molecules/row/css/row.component.css
index 930b19e5..5d6c21ed 100644
--- a/patterns/molecules/row/css/row.component.css
+++ b/patterns/molecules/row/css/row.component.css
@@ -216,18 +216,6 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie
min-height: calc((100vh - 116px) / 2);
height: calc((100vh - 116px) / 2); }
- /* body.cern-toolbar.toolbar-vertical {
- @media only screen and (max-width: 767px) {
- // tool bars: 79px + sticky header: 76px
- .component-row.is_half_height {
- .cern-component-header-blocks {
- body.component-header {
- height: calc(50vh - 155px);
- }
- }
- }
- }
- } */
body.cern-toolbar.toolbar-fixed .component-row.is_half_height {
min-height: calc((100vh - 155px) / 2);
height: calc((100vh - 155px) / 2); }
@@ -343,11 +331,19 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie
padding: 0 0 10px !important; }
.component-row__sidebar-right {
- padding: 0 0 10px !important; } }
+ padding: 0 0 10px !important; }
+
+ body.cern-toolbar.toolbar-fixed .component-row.is_half_height {
+ min-height: calc((100vh - 155px) / 2);
+ height: calc((100vh - 155px) / 2); } }
@media only screen and (max-width: 767px) {
.component-row .row-component-title {
font-size: calc(100vh / 20); }
+ body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height {
+ min-height: calc((100vh - 79px) / 2);
+ height: calc((100vh - 79px) / 2); }
+
.component-row.effect_background_rotation .background__image {
right: -50% !important;
opacity: 0.4 !important; } }
diff --git a/patterns/molecules/row/scss/row.component.scss b/patterns/molecules/row/scss/row.component.scss
index 5482944b..44599830 100644
--- a/patterns/molecules/row/scss/row.component.scss
+++ b/patterns/molecules/row/scss/row.component.scss
@@ -497,18 +497,6 @@ body:not(.has-header) {
}
}
- /* body.cern-toolbar.toolbar-vertical {
- @media only screen and (max-width: 767px) {
- // tool bars: 79px + sticky header: 76px
- .component-row.is_half_height {
- .cern-component-header-blocks {
- body.component-header {
- height: calc(50vh - 155px);
- }
- }
- }
- }
- } */
body.cern-toolbar.toolbar-fixed {
// tool bars: 79px + sticky header: 76px
.component-row.is_half_height {
@@ -780,6 +768,14 @@ body:not(.has-header) {
.component-row__sidebar-right {
padding: 0 0 10px !important;
}
+
+ body.cern-toolbar.toolbar-fixed {
+ // tool bars: 79px + sticky header: 76px
+ .component-row.is_half_height {
+ min-height: calc((100vh - 155px) / 2);
+ height: calc((100vh - 155px) / 2);
+ }
+ }
}
@media only screen and (max-width: 767px) {
@@ -789,7 +785,21 @@ body:not(.has-header) {
}
}
- .component-row.effect_background_rotation {
+ body.has-header {
+ &.cern-toolbar.toolbar-fixed.toolbar-vertical {
+ // tool bars: 79px
+ .field--items > .field--item:first-child {
+ .component-row.is_half_height {
+ min-height: calc((100vh - 79px) / 2);
+ height: calc((100vh - 79px) / 2);
+ }
+ }
+ }
+ }
+
+
+
+ .component-row.effect_background_rotation {
.background__image {
right: -50% !important;
opacity: 0.4 !important;
--
GitLab