From 5efd8b37133d0f16ef30b75321a5db6dc79ef9d7 Mon Sep 17 00:00:00 2001 From: Max S Date: Thu, 25 Jul 2024 10:27:40 +0200 Subject: [PATCH] fix header height --- .../Header/BurgerMenu/BurgerModal/classes.module.scss | 2 +- src/front/Components/DesignSystem/Header/classes.module.scss | 2 +- src/front/Components/DesignSystem/Header/index.tsx | 3 +++ .../DefaultCollaboratorDashboard/classes.module.scss | 4 ++-- .../DefaultDeedTypeDashboard/classes.module.scss | 4 ++-- .../DefaultDocumentTypesDashboard/classes.module.scss | 4 ++-- .../LayoutTemplates/DefaultDoubleSidePage/classes.module.scss | 4 ++-- .../DefaultNotaryDashboard/classes.module.scss | 4 ++-- .../DefaultOfficeDashboard/classes.module.scss | 4 ++-- .../LayoutTemplates/DefaultRoleDashboard/classes.module.scss | 4 ++-- .../LayoutTemplates/DefaultUserDashboard/classes.module.scss | 4 ++-- 11 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss index da462747..870ae3a1 100644 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss @@ -11,7 +11,7 @@ width: 100%; left: 0; text-align: center; - max-height: calc(100vh - 83px); + max-height: calc(100vh - var(--header-height)); overflow: auto; > *:not(:last-child) { margin-bottom: 24px; diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss index 929a37be..ee508b5a 100644 --- a/src/front/Components/DesignSystem/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/classes.module.scss @@ -6,7 +6,7 @@ align-items: center; flex-shrink: 0; - height: 75px; + height: var(--header-height); padding: 0px var(--spacing-lg, 24px); border-bottom: 1px solid var(--menu-border, #d7dce0); diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx index b0efedca..addada55 100644 --- a/src/front/Components/DesignSystem/Header/index.tsx +++ b/src/front/Components/DesignSystem/Header/index.tsx @@ -23,6 +23,8 @@ type IProps = { isUserConnected: boolean; }; +const headerHeight = 75; + export default function Header(props: IProps) { const { isUserConnected } = props; @@ -44,6 +46,7 @@ export default function Header(props: IProps) { }, []); useEffect(() => { + document.documentElement.style.setProperty("--header-height", `${headerHeight}px`); loadSubscription(); }, [loadSubscription]); diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss index e99cca13..8d431201 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss @@ -5,7 +5,7 @@ .content { display: flex; .sides { - min-height: calc(100vh - 83px); + min-height: calc(100vh - var(--header-height)); width: 50%; @media (max-width: $screen-m) { width: 100%; @@ -31,7 +31,7 @@ width: 50vw; top: 83px; right: 0; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); @media (max-width: $screen-m) { display: none; } diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss index 69cef63d..4a8599a1 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss @@ -15,7 +15,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -67,7 +67,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss index f4e58c6d..059853fe 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200 solid); @media (min-width: $screen-m) {