From daa959a5a5af3ca6010d64b5985eba8a63c717d7 Mon Sep 17 00:00:00 2001
From: Shaun Lum <shaun.lum@gov.bc.ca>
Date: Tue, 3 Oct 2023 15:12:40 -0700
Subject: [PATCH] added breadcrumbs

---
 frontend/src/assets/main.css               | 12 +++++++++++-
 frontend/src/components/Header.vue         | 11 +++--------
 frontend/src/components/OffshoreSelect.vue |  1 +
 frontend/src/components/SchoolSelect.vue   |  6 +++---
 frontend/src/views/AuthorityView.vue       |  3 ++-
 frontend/src/views/DistrictView.vue        |  3 +++
 frontend/src/views/HomeView.vue            |  1 +
 frontend/src/views/OffshoreView.vue        | 12 +++++++++++-
 frontend/src/views/SchoolSearchView.vue    |  1 +
 frontend/src/views/SchoolView.vue          |  4 +++-
 10 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index e528c9df..b78679b2 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -19,11 +19,21 @@ a,
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
-
+.fill-screen-height{
+  height: calc(100vh - 200px) !important
+}
 .full-width {
   margin: 0 -40em;
 }
+.breadcrumbs {
+  margin: 0 -40em;
+  padding-left: 40em !important;
+}
 
+.v-toolbar__extension {
+  max-width: 1280px;
+  padding: 0 2rem;
+}
 @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index b3b3e69e..79d38321 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -8,19 +8,14 @@
         alt="B.C. Government Logo"
         class="logo"
         src="@/assets/images/bc-gov-logo.svg"
-        width="125"
+        width="200"
         height="125"
       />
     </a>
     <h1>BC School & District Contact Information</h1>
-    <!-- TODO: Move to DEBUG component? Links are temporary until we build out our views.-->
-    <template v-slot:extension>
-      <div>
-        <RouterLink class="mx-2" to="/">Home</RouterLink>
-        <!-- <RouterLink class="mx-2" to="/offshore">Offshore</RouterLink> -->
-      </div>
-    </template>
+
   </v-app-bar>
+  
 </template>
 
 <style>
diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
index 8f145146..04b76924 100644
--- a/frontend/src/components/OffshoreSelect.vue
+++ b/frontend/src/components/OffshoreSelect.vue
@@ -27,6 +27,7 @@ function downloadOffshoreSchoolReps() {
 </script>
 
 <template>
+
   <v-container fluid>
     <v-card class="pa-6">
       <h2 class="mb-3">BC Offshore Schools</h2>
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index 20593c10..3914d4f2 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -47,9 +47,9 @@ function downloadAllSchoolsMailing() {
         <img
           src="@/assets/images/BCMapGraphic.png"
           alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 78px; left: -80px"
+          style="height: 268px; position: absolute; top: 85px; left: -80px"
         />
-        <v-col class="mr-6">
+        <v-col class="mr-6" >
           <h2 class="mb-3">Find a School in BC</h2>
           <v-autocomplete
             v-model="selectedSchool"
@@ -70,7 +70,7 @@ function downloadAllSchoolsMailing() {
       </v-row>
     </v-sheet>
 
-    <div class="mt-8">
+    <div class="mt-8" >
       <v-card class="pa-6">
         <h2 class="mb-3">School Information</h2>
         <v-row no-gutters justify="space-between">
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 24dcaebd..8d0ffc78 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -62,6 +62,7 @@ onMounted(async () => {
 
 <template>
   <div>
+    <v-breadcrumbs class="breadcrumbs" bg-color="primary" :items="[{title: 'Home', href:'/'}, 'Authority', authority.value.authorityData?.authorityNumber + ' ' + authority.value.authorityData?.displayName]"></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-row no-gutters justify="space-between">
         <v-spacer />
@@ -108,7 +109,7 @@ onMounted(async () => {
       <v-tabs v-model="tab">
         <v-tab :value="tabOptions.contacts"> Authority Contacts </v-tab>
         <v-tab :value="tabOptions.schools">
-          Authority Schools ({{ authority.value.authoritySchools.length }} )
+          Authority Schools ({{ authority.value.authoritySchools?.length }} )
         </v-tab>
       </v-tabs>
 
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 89bf04e9..31bf88b8 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -75,6 +75,9 @@ function downloadDistrictSchools() {
 </script>
 
 <template>
+  <v-spacer />
+  <v-breadcrumbs class="breadcrumbs" bg-color="primary" :items="[{title: 'Home', href:'/'}, 'District', district.value.districtData?.districtNumber + ' ' + district.value.districtData?.displayName]"></v-breadcrumbs>
+  
   <div>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-row no-gutters justify="space-between">
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6d8cb542..9ad3753b 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -6,6 +6,7 @@ import SchoolSelect from '../components/SchoolSelect.vue'
 </script>
 
 <template>
+  <v-breadcrumbs bg-color="primary" class="breadcrumbs" :items="[{title: 'Home', href:'/'}]"></v-breadcrumbs>
   <div>
     <SchoolSelect />
     <DistrictSelect />
diff --git a/frontend/src/views/OffshoreView.vue b/frontend/src/views/OffshoreView.vue
index c9e09b08..343182ae 100644
--- a/frontend/src/views/OffshoreView.vue
+++ b/frontend/src/views/OffshoreView.vue
@@ -1,5 +1,7 @@
 <template>
+  <v-breadcrumbs class="breadcrumbs" bg-color="primary" :items="[{title: 'Home', href:'/'}, 'Offshore Schools']"></v-breadcrumbs>
   <div>
+    
     <h1>Offshore Schools</h1>
 
     <ul>
@@ -16,4 +18,12 @@ const appStore = useAppStore()
 const { offshoreSchools } = storeToRefs(appStore)
 </script>
 
-<style></style>
+
+<style>
+/* sizes header to align with content on desktop */
+.v-toolbar__content,
+.v-toolbar__extension {
+  max-width: 1280px;
+  padding: 0 2rem;
+}
+</style>
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index 0f31055f..7dcdcf8f 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -1,4 +1,5 @@
 <template>
+  <v-breadcrumbs class="breadcrumbs" bg-color="primary" :items="[{title: 'Home', href:'/'}, 'Search']"></v-breadcrumbs>
   <v-container class="my-4">
     <v-row>
       <v-col cols="12" md="4">
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index 293780dc..76c60aed 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -51,8 +51,10 @@ onBeforeMount(async () => {
 </script>
 
 <template>
+  
   <div>
-    <v-card width="100%" v-if="schoolData.value">
+    <v-breadcrumbs class="breadcrumbs" bg-color="primary" :items="[{title: 'Home', href:'/'}, 'School', schoolData.value.displayName]"></v-breadcrumbs>
+    <v-card class="fill-screen-height"  width="100%" v-if="schoolData.value" >
       <v-card-item>
         <v-card-title v-if="schoolData.value.displayName">
           {{ schoolData.value.displayName }} - {{ schoolData.value.mincode }}</v-card-title