Top banner fixes

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>
bcgov · Oct 24, 2023 · 23872c7 · 23872c7
1 parent 54dfc0f
commit 23872c7
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 24 deletions.
diff --git a/services/tenant-ui/frontend/src/assets/layout.scss b/services/tenant-ui/frontend/src/assets/layout.scss
@@ -7,14 +7,16 @@ body {
 }
 
 // The app layout
-.layout-container {
+.alert-container {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
   min-height: 100vh;
+}
+.layout-container {
+  flex-grow: 1;
+  display: flex;
   width: 100%;
   .layout-sidebar {
-    align-self: stretch;
     background-color: $tenant-ui-primary-color;
     color: $tenant-ui-text-on-primary;
     min-width: 20em;
@@ -27,13 +29,11 @@ body {
 
   .layout-page {
     width: 100%;
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
 
   .layout-header {
-    flex: 0;
     background-color: white;
   }
 

diff --git a/services/tenant-ui/frontend/src/components/Login.vue b/services/tenant-ui/frontend/src/components/Login.vue
@@ -1,10 +1,7 @@
 <template>
   <!--TODO: This should eventually go somewhere else-->
-  <div class="traction-login grid w-screen h-screen">
+  <div class="traction-login grid w-screen flex-grow-1">
     <div class="col-12 md:col-6 xl:col-4">
-      <div class="notification">
-        <Alert />
-      </div>
       <div class="px-8">
         <div class="pt-4 pb-6">
           <img src="/img/bc/bc_logo.png" class="logo-bc" />
@@ -118,7 +115,6 @@ import Reserve from './reservation/Reserve.vue';
 import Status from './reservation/Status.vue';
 import SessionTimeoutModal from './common/SessionTimeoutModal.vue';
 import { stringOrBooleanTruthy } from '@/helpers';
-import Alert from './notifications/Alert.vue';
 // State
 import { storeToRefs } from 'pinia';
 import { useConfigStore, useReservationStore, useOidcStore } from '@/store';
@@ -175,7 +171,4 @@ const doGoBack = () => {
 .cover-image {
   background-image: url('/img/default-login-image.jpg');
 }
-.notification {
-  margin: 2rem;
-}
 </style>
diff --git a/services/tenant-ui/frontend/src/components/innkeeper/InnkeeperLogin.vue b/services/tenant-ui/frontend/src/components/innkeeper/InnkeeperLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="traction-login grid w-screen h-screen">
+  <div class="traction-login grid w-screen h-full">
     <div class="col-12 md:col-6 xl:col-4">
       <div class="px-8">
         <div class="pt-4 pb-6">

diff --git a/services/tenant-ui/frontend/src/components/layout/mainCard/MainCard.vue b/services/tenant-ui/frontend/src/components/layout/mainCard/MainCard.vue
@@ -27,6 +27,7 @@ const { cardExpanded } = storeToRefs(useCommonStore());
   height: calc(100% - 20px);
   width: calc(100% - 20px);
   overflow: auto;
+  z-index: 3;
 
   border: 1px solid lightgray;
 }

diff --git a/services/tenant-ui/frontend/src/components/notifications/Alert.vue b/services/tenant-ui/frontend/src/components/notifications/Alert.vue
@@ -1,15 +1,16 @@
 <template>
   <Message
-    v-if="config.frontend.ux.infoBanner.showMessage"
+    v-if="stringOrBooleanTruthy(config.frontend.ux.infoBanner?.showMessage)"
     :severity="config.frontend.ux.infoBanner.messageLevel"
     :closable="false"
   >
     {{ config.frontend.ux.infoBanner.message }}
   </Message>
 </template>
 <script setup lang="ts">
+import Message from 'primevue/message';
 import { storeToRefs } from 'pinia';
 import { useConfigStore } from '@/store/configStore';
-import Message from 'primevue/message';
 const { config } = storeToRefs(useConfigStore());
+import { stringOrBooleanTruthy } from '@/helpers';
 </script>
diff --git a/services/tenant-ui/frontend/src/views/TenantUi.vue b/services/tenant-ui/frontend/src/views/TenantUi.vue
@@ -1,22 +1,23 @@
 <template>
-  <Alert v-if="tenantReady" />
-  <AppLayout v-if="tenantReady" />
-  <Login v-else />
+  <div class="alert-container">
+    <Alert class="z-2" />
+    <AppLayout v-if="tenantReady" />
+    <Login v-else />
+  </div>
 </template>
 
 <script setup lang="ts">
+import Alert from '@/components/notifications/Alert.vue';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import Login from '@/components/Login.vue';
-import Alert from '@/components/notifications/Alert.vue';
 import { storeToRefs } from 'pinia';
 import { useTenantStore } from '@/store';
 
 const { tenantReady } = storeToRefs(useTenantStore());
 </script>
 
 <style scoped lang="scss">
-/* This is a header notificaiton that is shown on all pages */
-.notification,
+// This is the info banner alert that is shown on all pages
 .p-message {
   margin: 0;
   border-radius: 0;

diff --git a/services/tenant-ui/frontend/test/components/layout/__snapshots__/Header.test.ts.snap b/services/tenant-ui/frontend/test/components/layout/__snapshots__/Header.test.ts.snap
@@ -4,7 +4,6 @@ exports[`Header > mount matches snapshot with expected values 1`] = `
 "<div data-v-243d8871=\\"\\" class=\\"p-toolbar p-component traction-header\\" role=\\"toolbar\\" data-pc-name=\\"toolbar\\" data-pc-section=\\"root\\">
   <div class=\\"p-toolbar-group-start p-toolbar-group-left\\" data-pc-section=\\"start\\">
     <div data-v-243d8871=\\"\\" class=\\"hamburger\\" title=\\"layout.header.toggleSideMenu\\"><i data-v-243d8871=\\"\\" class=\\"pi pi-bars p-toolbar-separator mr-2\\"></i></div>
-    <alert-stub data-v-243d8871=\\"\\"></alert-stub>
   </div>
   <div class=\\"p-toolbar-group-center\\" data-pc-section=\\"center\\"></div>
   <div class=\\"p-toolbar-group-end p-toolbar-group-right\\" data-pc-section=\\"end\\">