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