fix: header height on grw app

GeotrekCE · Oct 15, 2024 · 5e4f0be · 5e4f0be
1 parent 9640a4d
commit 5e4f0be
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/grw-app/grw-app.scss b/src/components/grw-app/grw-app.scss
@@ -27,7 +27,7 @@ grw-app {
 
 .grw-header-container,
 .grw-large-view-header-container {
-  height: var(--header-height);
+  height: calc(var(--header-height) + var(--header-with-offline) + var(--header-with-languages));
   .grw-arrow-back-container {
     display: flex;
     align-items: center;
@@ -92,7 +92,7 @@ grw-app {
 }
 
 .grw-content-treks {
-  height: calc(100% - var(--header-height) - var(--header-with-languages));
+  height: calc(100% - var(--header-height) - var(--header-with-languages) - var(--header-with-offline));
 }
 
 .grw-content-trek {

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -468,14 +468,13 @@ export class GrwApp {
           '--app-width': this.appWidth,
           '--app-height': this.appHeight,
           '--header-height':
-            Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) + Number(this.outdoor) > 1
-              ? this.enableOffline && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent
-                ? '188px'
-                : '64px'
-              : this.enableOffline && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent
+            this.showTrek && this.showTouristicContent && this.showTouristicEvent
               ? '116px'
+              : Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) + Number(this.outdoor) > 1
+              ? '148px'
               : '64px',
           '--header-with-languages': this.languages.split(',').length > 1 ? '38px' : '0px',
+          '--header-with-offline': this.enableOffline ? '48px' : '0px',
           '--border-radius': this.rounded ? '' : '0px',
         }}
       >