From bd3ee3e991d7c3177c84d704c243c8a9b0653a25 Mon Sep 17 00:00:00 2001 From: FORESTIER Fabien <fabien.forestier@soprasteria.com> Date: Mon, 11 May 2020 15:48:41 +0200 Subject: [PATCH] Improve cookie banner display on mobile --- .../cookie-banner.component.html | 3 -- .../cookie-banner.component.scss | 53 ++++++++++++++----- 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.html b/src/app/core/components/cookie-banner/cookie-banner.component.html index 9986bc7d..13467410 100644 --- a/src/app/core/components/cookie-banner/cookie-banner.component.html +++ b/src/app/core/components/cookie-banner/cookie-banner.component.html @@ -48,9 +48,6 @@ <p i18n="@@cookieModal.tab1title">Why do we use cookies?</p> </div> <div class="tab" (click)='toggleTab(1)' [ngClass]="{'tab-active' : tab === 1}"> - <svg class="circle" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"> - <circle cx="5.5" cy="5.5" r="5.5" fill="#3C8225" /> - </svg> <p i18n="@@cookieModal.tab2title">Necessary cookies</p> </div> </div> diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.scss b/src/app/core/components/cookie-banner/cookie-banner.component.scss index 423dd8c6..8eae3a3c 100644 --- a/src/app/core/components/cookie-banner/cookie-banner.component.scss +++ b/src/app/core/components/cookie-banner/cookie-banner.component.scss @@ -110,13 +110,15 @@ .box { width: 100%; max-width: 600px; - min-height: 360px; + min-height: 400px; background: #FFFFFF; box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.55); position: relative; @media screen and(max-width: $tablet) { - margin: 95%; + width: calc(100% - 50px); + height: 450px; + max-width: unset; } .title { @@ -139,7 +141,7 @@ .content { display: flex; - height: 100%; + height: calc(450px - 53px); // minus the height of the popup header @media screen and(max-width: $tablet) { flex-direction: column; @@ -152,6 +154,7 @@ @media screen and(max-width: $tablet) { width: 100%; + display: flex; } .tab { @@ -160,6 +163,14 @@ border-bottom: 1px solid #B4B4B4; position: relative; + @media screen and(max-width: $tablet) { + width: 50%; + + &:not(:last-of-type) { + border-right: 1px solid $grey-super-light-color; + } + } + p { display: inline-block; } @@ -173,15 +184,32 @@ .tab-active { background: white; - //remove border - &:after { - content: ''; - height: 100%; - width: 2px; - position: absolute; - right: -2px; - top: 0; - background: white; + @media screen and(max-width: $tablet) { + + //remove border + &:after { + content: ''; + height: 2px; + width: 100%; + position: absolute; + bottom: -2px; + left: 0; + background: white; + } + } + + @media screen and(min-width: $tablet) { + + //remove border + &:after { + content: ''; + height: 100%; + width: 2px; + position: absolute; + right: -2px; + top: 0; + background: white; + } } } } @@ -191,6 +219,7 @@ border-left: 1px solid #B4B4B4; padding: 1.3rem 1rem; background-color: #fff; + overflow: auto; @media screen and(max-width: $tablet) { width: 100%; -- GitLab