From 9d3d1809821b7c868be5bafa5ff5802b41b1bf7c Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Thu, 23 Dec 2021 16:13:37 +0000
Subject: [PATCH] fix(profile): display correctly the navigation in the profile
type form for iphone 11 and above
---
src/components/Content/content.scss | 2 ++
src/components/ProfileType/profileTypeNavigation.scss | 8 +++++---
src/components/ProfileType/profileTypeView.scss | 1 +
src/styles/index.scss | 6 ++++++
src/targets/browser/index.ejs | 4 ++--
5 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
index 7857cee4e..82f9454a4 100644
--- a/src/components/Content/content.scss
+++ b/src/components/Content/content.scss
@@ -2,6 +2,8 @@
@import 'src/styles/base/color';
.content-view {
+ position: relative;
+ height: 100%;
margin-top: 116px;
background-color: $default-background;
@media #{$large-phone} {
diff --git a/src/components/ProfileType/profileTypeNavigation.scss b/src/components/ProfileType/profileTypeNavigation.scss
index c30ad0f86..bbf073147 100644
--- a/src/components/ProfileType/profileTypeNavigation.scss
+++ b/src/components/ProfileType/profileTypeNavigation.scss
@@ -5,15 +5,17 @@
border-top: 1px solid $grey-dark;
background: $dark-2;
position: fixed;
- bottom: 3.5rem;
+ bottom: 0;
+ height: 6.5rem;
width: 100%;
display: flex;
justify-content: center;
- align-items: center;
+ align-items: flex-start;
+ padding: 0 0 env(safe-area-inset-bottom) 0;
@media (min-width: $width-tablet) {
background: none;
position: absolute;
- bottom: 0;
+ height: 3rem;
}
.rounded {
border-radius: 22px;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index f49d6d996..2723a89e3 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,4 +1,5 @@
.profile-type-container {
+ position: relative;
height: 100%;
min-height: inherit;
display: flex;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b7006ea15..012d28314 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,6 +52,12 @@
--waterColorRadialGradient: #{$water-color-radial-gradient};
}
+html {
+ // min-height: calc(100% + env(safe-area-inset-top));
+ // padding: env(safe-area-inset-top) env(safe-area-inset-right)
+ // env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
.application {
@media #{$large-phone} {
min-height: 100vh;
diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs
index a7ca033c5..41ed7c3d0 100644
--- a/src/targets/browser/index.ejs
+++ b/src/targets/browser/index.ejs
@@ -8,7 +8,7 @@
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2">
- <meta name="theme-color" content="#ffffff">
+ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, viewport-fit=cover">
<!-- PWA Chrome -->
<link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
@@ -17,8 +17,8 @@
<link rel="apple-touch-startup-image" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-title" content="Ecolyo">
<meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover">
<% _.forEach(htmlWebpackPlugin.files.css, function(file) { %>
<link rel="stylesheet" href="<%- file %>">
<% }); %>
--
GitLab