added breadcrumbs

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);

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>

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>

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">

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>
 

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">

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 />

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>

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">

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