diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 13fba3cf1c27833e321c5e9802f1cd6bcfe30c5c..78f22a979c697e32b51e602c2d6bb11a1287d416 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -21,5 +21,14 @@ export class AppComponent { if (this.authService.isLoggedIn()) { this.profilService.getProfile(); } + this.setHeightApp(); + window.addEventListener('resize', () => { + this.setHeightApp(); + }); + } + + private setHeightApp(): void { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); } } diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index 2bea200b728d9f6bc64473137bb2b9704fc71ef5..a3d85c2a6c444ba89b0008442c29479f0b66a29b 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -62,7 +62,7 @@ fxLayoutAlign="space-between center" fxLayoutAlign.lt-sm="center" > - <h2 class="no-wrap"> + <h2> {{ isJoinMode ? 'Rejoindre' : 'Revendiquer' }} la structure <span>{{ claimStructure.structureName }}</span> </h2> <div> diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss index d32ba5a2cc79f9c57c473f12142886501002b6e7..0bc3f77041f85ffcd5f1d622330e59938b39eb07 100644 --- a/src/app/form/form.component.scss +++ b/src/app/form/form.component.scss @@ -16,11 +16,11 @@ h3 { .form { background: white; width: 100vw; - height: calc(100vh - #{$header-height} - #{$footer-height}); + height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height}); top: #{$header-height}; z-index: $structure-details-z-index; @media #{$tablet} { - height: calc(100vh - #{$header-height}); + height: calc(var(--vh, 1vh) * 100 - #{$header-height}); position: fixed; //Hide default header app. } } @@ -115,9 +115,6 @@ h3 { span { color: $secondary-color; } - &.no-wrap { - white-space: nowrap; - } } h3 { @include cn-bold-26; @@ -137,7 +134,6 @@ h3 { height: auto; color: $grey-1; &.home { - height: 100%; .btnStart { margin-top: 90px; margin-bottom: 10px; diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 7470c080a1e12b117c225ac5910cdbc98606a54f..8369791d6b97afa68908f614481edc4f8e6f8fdf 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -101,7 +101,7 @@ a { animation: slideMenu 0.5s; .menu-content { background-color: $white; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); width: 350px; padding: 27px 25px; } diff --git a/src/styles.scss b/src/styles.scss index 1b700410763a8f5081ce70ea690a0d1e1d74485d..3e61ddf25ce08ffc657451fb5d0d6c85baa59b9b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -74,9 +74,6 @@ a { &.full-screen { min-height: calc(100vh - #{$header-height} - #{$footer-height}); } - @media #{$phone} { - padding-top: 30px; - } } .section-container { width: 80%;