PI-779 enhance UI (#47)

* PI-779 enhance UI * remove usage of main page class
Dataport · Dec 16, 2024 · b5b8ea2 · b5b8ea2
1 parent 9b126a2
commit b5b8ea2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 58 deletions.
diff --git a/frontend/src/app/containers/default-layout/default-layout.component.html b/frontend/src/app/containers/default-layout/default-layout.component.html
@@ -1,47 +1,49 @@
-<div class="header-wrapper">
-  <c-navbar class="header border-0" expand="lg">
-    <c-container fluid>
-      <a [routerLink]="['/']" cNavbarBrand class="logo">
-        <img [alt]="'POSSIBLE-X Logo'" width="142" src="assets/images/brand/possible_blue.svg"/>
-      </a>
-      <c-navbar-nav class="navbar-nav">
-        <c-nav-item>
-          <a [href]="environment.possible_website_possible_url" cNavLink target="_blank">Possible</a>
-        </c-nav-item>
-        <c-nav-item>
-          <a [href]="environment.possible_website_group_url" cNavLink target="_blank">Verbund</a>
-        </c-nav-item>
-      </c-navbar-nav>
+<div class="h-screen">
+  <div class="header-wrapper">
+    <c-navbar class="header border-0" expand="lg">
+      <c-container fluid>
+        <a [routerLink]="['/']" cNavbarBrand class="logo">
+          <img [alt]="'POSSIBLE-X Logo'" width="142" src="assets/images/brand/possible_blue.svg"/>
+        </a>
+        <c-navbar-nav class="navbar-nav">
+          <c-nav-item>
+            <a [href]="environment.possible_website_possible_url" cNavLink target="_blank">Possible</a>
+          </c-nav-item>
+          <c-nav-item>
+            <a [href]="environment.possible_website_group_url" cNavLink target="_blank">Verbund</a>
+          </c-nav-item>
+        </c-navbar-nav>
+      </c-container>
+    </c-navbar>
+  </div>
+  <div class="page-container" [ngClass]="{'admin-page-container': isAdminPage}">
+    <c-container [fluid]="isMainPage" [ngClass]="{'main-page-content': isMainPage, 'content': !isMainPage}">
+      <router-outlet></router-outlet>
     </c-container>
-  </c-navbar>
-</div>
-<div class="page-container" [ngClass]="{'admin-page-container': isAdminPage, 'main-page-container': isMainPage}">
-  <c-container [fluid]="isMainPage" [ngClass]="{'main-page-content': isMainPage, 'content': !isMainPage}">
-    <router-outlet></router-outlet>
-  </c-container>
-</div>
-<div class="footer-wrapper" [ngClass]="{'admin-footer-wrapper': isAdminPage, 'main-footer-wrapper': isMainPage}">
-  <ng-container *ngIf="!isMainPage">
-    <img *ngIf="isAdminPage; else defaultImage" alt="" ngSrc="assets/images/brand/bottom-blue.svg" style="margin-left: auto;" width="423" height="238"/>
-    <ng-template #defaultImage>
-      <img alt="" ngSrc="assets/images/brand/bottom-white.svg" style="margin-left: auto;" width="423" height="238"/>
-    </ng-template>
-  </ng-container>
-  <div>
-    <c-footer class="footer border-0">
-      <div class="logo">
-        <div class="circle-visual"></div>
-        <img alt="POSSIBLE-X Logo" height="49" src="assets/images/brand/possible_white.svg" width="190"/>
-      </div>
-      <div>
-        <div class="mb-8">
-          <div class="mb-2 text-2xl">POSSIBLE-X</div>
+  </div>
+  <div class="footer-wrapper" [ngClass]="{'admin-footer-wrapper': isAdminPage, 'main-footer-wrapper': isMainPage}">
+    <ng-container *ngIf="!isMainPage">
+      <img *ngIf="isAdminPage; else defaultImage" alt="" ngSrc="assets/images/brand/bottom-blue.svg" style="margin-left: auto;" width="423" height="238"/>
+      <ng-template #defaultImage>
+        <img alt="" ngSrc="assets/images/brand/bottom-white.svg" style="margin-left: auto;" width="423" height="238"/>
+      </ng-template>
+    </ng-container>
+    <div>
+      <c-footer class="footer border-0">
+        <div class="logo">
+          <div class="circle-visual"></div>
+          <img alt="POSSIBLE-X Logo" height="49" src="assets/images/brand/possible_white.svg" width="190"/>
+        </div>
+        <div>
+          <div class="mb-8">
+            <div class="mb-2 text-2xl">POSSIBLE-X</div>
+          </div>
+          <div class="text-sm">© 2024 POSSIBLE Consortium</div>
+        </div>
+        <div class="flex justify-end">
+          Release: {{ versionNumber }} ({{ versionDate | date:'yyyy-MM-dd' }})
         </div>
-        <div class="text-sm">© 2024 POSSIBLE Consortium</div>
-      </div>
-      <div class="flex justify-end">
-        Release: {{ versionNumber }} ({{ versionDate | date:'yyyy-MM-dd' }})
-      </div>
-    </c-footer>
+      </c-footer>
+    </div>
   </div>
 </div>
diff --git a/frontend/src/app/containers/default-layout/default-layout.component.scss b/frontend/src/app/containers/default-layout/default-layout.component.scss
@@ -1,11 +1,13 @@
 .header-wrapper {
   @apply bg-white;
+  height: 8vh;
 }
 
 .header {
   @apply flex items-end justify-between;
-  @apply container max-w-screen-4xl px-8 py-4 xl:px-20;
+  @apply container fixed max-w-screen-4xl px-8 py-4 xl:px-20;
   @apply pr-4;
+  z-index: 998;
 
   .logo {
     @apply flex flex-shrink-0 items-baseline;
@@ -18,19 +20,16 @@
 
 .footer-wrapper {
   @apply overflow-hidden bg-brand-700;
-  @apply w-full h-[26rem];
+  @apply w-full h-[40vh];
   @apply divide-y divide-brand-100;
 }
 
 .admin-footer-wrapper {
-  @apply overflow-hidden bg-brand-50;
-  @apply w-full h-[26rem];
-  @apply divide-y divide-brand-100;
+  @apply bg-brand-50;
 }
 
 .main-footer-wrapper {
-  @apply border-t border-brand-100;
-  height: calc(26rem - 238px);
+  @apply border-t border-brand-100 h-[17vh];
 }
 
 .footer {

diff --git a/frontend/src/app/views/participant/registration/registration.component.html b/frontend/src/app/views/participant/registration/registration.component.html
@@ -1,5 +1,5 @@
 <div class="flex items-center justify-center">
-  <div class="p-6 w-full max-w-3xl">
+  <div class="p-6 w-full xl:max-w-screen-lg">
     <div class="flex flex-col items-center pb-14 text-brand-50">
       <div class="text-3xl font-bold">
         Register organization

diff --git a/frontend/src/styles/_layout.scss b/frontend/src/styles/_layout.scss
@@ -1,14 +1,10 @@
 .page-container {
   @apply flex flex-col bg-brand-700;
-  min-height: calc(100vh - 5rem - 26rem);
+  min-height: 75vh;
 }
 
 .admin-page-container {
-  @apply min-h-screen bg-brand-50;
-}
-
-.main-page-container {
-  min-height: calc(100vh - 5rem);
+  @apply bg-brand-50;
 }
 
 .main-page-content {
@@ -20,5 +16,5 @@
 }
 
 .content {
-  @apply flex-1 mx-auto h-auto lg:max-w-screen-xl;
+  @apply flex-1 mx-auto h-auto xl:max-w-screen-xl;
 }