diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html index cfcc6394a..bf50403cf 100644 --- a/src/app/core/components/root/root.component.html +++ b/src/app/core/components/root/root.component.html @@ -1,31 +1,24 @@ -@if (isWeb()) { -
+
+ @if (isWeb()) { + } -
- - - - +
+ - -
-
-} @else { -
-
- + @if (isWeb()) { + + } @else { - @if (isMedium()) { } + } - + - -
+
-} +
diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss index a79b10a3b..75e7a3a05 100644 --- a/src/app/core/components/root/root.component.scss +++ b/src/app/core/components/root/root.component.scss @@ -44,3 +44,43 @@ } } } + +.layout { + display: flex; + flex: 1; + max-width: 100vw; + + .content-wrapper { + display: flex; + flex-direction: column; + flex: 1; + overflow-y: auto; + background-color: var(--bg-blue-3); + } +} + +.layout.layout-desktop { + background-color: var(--dark-blue-1); + + .content-wrapper { + position: relative; + border-radius: mix.rem(12px); + margin: mix.rem(6px); + } +} + +.layout.layout-tablet { + @include mix.flex-center; + + .content-wrapper { + @include mix.flex-column; + width: 100%; + height: 100%; + + .content { + position: relative; + @include mix.flex-column; + flex: 1; + } + } +} diff --git a/src/app/features/admin-institutions/admin-institutions.component.html b/src/app/features/admin-institutions/admin-institutions.component.html index bbdd54d54..2e86a3b56 100644 --- a/src/app/features/admin-institutions/admin-institutions.component.html +++ b/src/app/features/admin-institutions/admin-institutions.component.html @@ -1,4 +1,4 @@ -
+
@if (isInstitutionLoading()) {
@@ -28,7 +28,7 @@

{{ institution().name }}

/>
-