Merge pull request #541 from bcgov/ccfri-3634-navbar-enhancement

CCFRI-3634 and CCFRI-3713 - navbar enhancement, ELCCA update
bcgov · Oct 17, 2024 · fd5852c · fd5852c
2 parents a724a93 + 9ac4e3f
commit fd5852c
Show file tree

Hide file tree

Showing 14 changed files with 277 additions and 311 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,32 +1,18 @@
 <template>
   <v-app id="app">
-    <MsieBanner v-if="isIE" />
-    <HeaderComponent />
-    <SnackBar />
-    <v-main fluid style="--v-layout-top: 64px" class="align-start">
-      <div class="v-main__wrap">
-        <v-app-bar
-          v-if="bannerColor !== ''"
-          :color="bannerColor"
-          sticky
-          dense
-          height="20rem"
-          clipped-left
-          class="px-4 appBar"
-        >
-          <div>
-            <h3 class="envBanner">{{ bannerEnvironment }} Environment</h3>
-          </div>
-        </v-app-bar>
-        <div>
-          <h3 v-if="subtitleBanner != ''" class="subBanner">
-            {{ subtitleBanner }}
-          </h3>
-        </div>
-        <ModalIdle v-if="isAuthenticated" />
-        <NavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
-        <router-view />
-      </div>
+    <div>
+      <MsieBanner v-if="isIE" />
+      <HeaderComponent />
+      <SnackBar />
+      <TheEnvBar />
+    </div>
+    <v-main>
+      <h3 v-if="subtitleBanner" class="subBanner">
+        {{ subtitleBanner }}
+      </h3>
+      <ModalIdle v-if="isAuthenticated" />
+      <NavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
+      <router-view />
     </v-main>
     <FooterComponent />
   </v-app>
@@ -46,6 +32,7 @@ import ModalIdle from '@/components/ModalIdle.vue';
 import MsieBanner from '@/components/MsieBanner.vue';
 import SnackBar from '@/components/util/SnackBar.vue';
 import NavBar from '@/components/util/NavBar.vue';
+import TheEnvBar from '@/components/TheEnvBar.vue';
 
 export default {
   name: 'App',
@@ -56,16 +43,11 @@ export default {
     MsieBanner,
     SnackBar,
     NavBar,
+    TheEnvBar,
   },
   metaInfo: {
     meta: StaticConfig.VUE_APP_META_DATA,
   },
-  data() {
-    return {
-      bannerEnvironment: StaticConfig.BANNER_ENVIRONMENT,
-      bannerColor: StaticConfig.BANNER_COLOR,
-    };
-  },
   computed: {
     ...mapState(useAuthStore, ['isAuthenticated', 'loginError', 'isLoading']),
     ...mapState(useAppStore, ['pageTitle', 'showNavBar', 'subtitleBanner']),
@@ -96,12 +78,6 @@ export default {
 </script>
 
 <style>
-.appBar {
-  height: 20px !important;
-  color: white !important;
-  position: relative !important;
-  top: 0 !important;
-}
 /*Some BCSans fonts (i.e. g, y) get clipped in v-selects. This heightens the display to fix clipping. */
 .v-select__selection.v-select__selection--comma {
   line-height: 20px !important;

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-footer inset color="#003366" dark>
+  <v-footer absolute color="#003366" dark>
     <v-row justify="center" align="center">
       <v-btn id="footer-home" variant="text" href="https://www.gov.bc.ca/"> Home </v-btn>
       <v-btn id="footer-about" variant="text" href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca">
@@ -22,18 +22,13 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .v-footer {
   border-top: 2px solid rgb(252, 186, 25) !important;
   min-width: 100%;
+  flex-grow: 0;
 }
-/*
-  .footer {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-  }
-  */
+
 .v-btn--active.footer:before,
 .v-btn.footer:focus:before,
 .v-btn.footer:hover:before {

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-system-bar absolute color="rgb(0, 51, 102)" class="sysBar">
+  <v-app-bar color="#003366" class="px-5 px-md-10 app-header" height="64">
     <!-- Navbar content -->
     <v-container :class="{ sizingForIconXLScreen: $vuetify.display.xl }">
       <v-row class="justify-space-between">
@@ -52,12 +52,11 @@
           </v-menu>
         </div>
         <div v-else-if="isAuthenticated && !dataReady">
-          <v-skeleton-loader type="chip" width="150"
-          class="bg-transparent mt-2" />
+          <v-skeleton-loader type="chip" width="150" class="bg-transparent mt-2" />
         </div>
       </v-row>
     </v-container>
-  </v-system-bar>
+  </v-app-bar>
 </template>
 
 <script>
@@ -111,11 +110,9 @@ a {
   color: #fff;
   text-decoration: none;
 }
-.sysBar {
+.app-header {
   border-bottom: 2px solid rgb(252, 186, 25) !important;
-  z-index: 8;
-  height: 66px !important;
-  text-align: left;
+  z-index: 1002;
 }
 .gov-header .v-btn,
 .v-btn--active.title:before,

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
@@ -39,7 +39,7 @@
         <p class="pt-4">
           <strong>NOTE:</strong> The information collected through My ChildCareBC Services is collected under the
           authority of the <i>Freedom of Information and Protection of Privacy Act</i> (FOIPPA) and the
-          <i>Early Learning and Child Care Act</i> (SBC 2001, c. 4) and will be used for the purpose of administering
+          <i>Early Learning and Child Care Act</i> and will be used for the purpose of administering
           the Child Care Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early
           Childhood Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is
           protected from unauthorized use and disclosure in accordance with FOIPPA. Any questions or concerns about the