Merge pull request #135 from bcgov/samara-mobile

Spacing fixes to app and main styles in preparation for responsive layouts
bcgov · Nov 30, 2023 · 8a3f1de · 8a3f1de
2 parents ebdd7ab + 6366578
commit 8a3f1de
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 299 deletions.
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -1,27 +1,37 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0rem;
   font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-weight: normal;
 }
 
+#main {
+  max-width: 1280px;
+  padding: 0rem;
+}
+
 a {
   color: #2a6496;
 }
 
+div.v-application__wrap {
+  min-height: 100vh; /* override dvh property */
+}
+
+.full-width {
+  margin-left: calc(-1*(100vw - 1024px)/2);
+  margin-right: calc(-1*(100vw - 1024px)/2);
+}
+
 @media (max-width: 768px) {
   #app {
-    min-width: 1130px; /* Adjust as needed */
+    /* min-width: 600px; */
     padding: 0; /* Adjust as needed */
   }
 
   .full-width {
-    margin: 0 calc(-1*(100vw - 768px)/2);
-    padding: 0 calc((100vw - 768px)/2);
-    background-color: red;
+    margin-left: calc(-1*(100vw - 400px)/2);
+    margin-right: calc(-1*(100vw - 400px)/2);
   }
 }
 .school-search{
@@ -43,10 +53,12 @@ button.link-btn, .link-btn .v-btn__content {
 }
 
 .territorial-acknowledgement {
-  background-color: #494949;
-  color: #fff;
-  border-bottom: 3px solid #FCBA19;
-  border-top: 3px solid #FCBA19;
+  background-color: #292929;
+  color: #faf9f8;
+  font-size: 14px;
+  line-height: 21px;
+  border-bottom: 4px solid #FCBA19;
+  border-top: 4px solid #FCBA19;
 }
 
 .v-toolbar__extension {
@@ -76,11 +88,14 @@ button.link-btn, .link-btn .v-btn__content {
 
   #app {
     display: grid;
-    padding: 0;
+    padding: 0!important;
+    margin: 0 auto;
   }
 
-  .full-width {
-    margin: 0 calc(-1*(100vw - 1024px)/2);
-    padding: 0 calc((100vw - 1024px)/2);
-  }
+  /* .full-width {
+    position: relative;
+    width: 100vw;
+    left: calc(-1*(100vw - 1280px)/2);
+    padding: 0!important;
+  } */
 }
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
@@ -19,17 +19,10 @@ function goToAuthority() {
     }
   })
 }
-
-function downloadAuthorityMailing() {
-  alert('TODO - Implement authority mailing download')
-}
-function downloadAuthorityContacts() {
-  alert('TODO - Implement authority contacts download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">Independent Authorities</h2>
     <v-row no-gutters>
       <v-col class="ma-1">

diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
@@ -30,7 +30,7 @@ function downloadDistrictsMailing() {
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">School Districts</h2>
     <v-row no-gutters justify="space-between">
       <v-col class="ma-1">

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-footer class="full-width">
+  <v-footer class="full-width pa-0">
     <v-col no-gutters justify="space-between"
       ><v-row class="territorial-acknowledgement"
         ><v-spacer /><v-col cols="6"

diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAppStore } from '@/stores/app'
+//import { ref } from 'vue'
+//import { useAppStore } from '@/stores/app'
 import router from '@/router'
-import { useSanitizeURL } from '@/composables/string'
+//import { useSanitizeURL } from '@/composables/string'
 
 // Type Imports
-import type { ListSchool } from '@/types/types'
-import type { Ref } from 'vue'
+//import type { ListSchool } from '@/types/types'
+//import type { Ref } from 'vue'
 
-const appStore = useAppStore()
-const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
+//const appStore = useAppStore()
+//const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
 
 function viewOffshoreSchools() {
   router.push({
     name: 'offshore'
   })
 }
-
-function downloadOffshoreSchoolInfo() {
-  alert('TODO - Implement offshore school info extract download')
-}
-
-function downloadOffshoreSchoolReps() {
-  alert('TODO - Implement offshore school representative extract download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">BC Offshore Schools</h2>
     <v-row no-gutters>
       <v-col class="ma-1">

diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
@@ -33,16 +33,17 @@ function goToSchoolSearch() {
 </script>
 
 <template>
-  <v-container fluid class="pt-0">
-    <v-sheet elevation="2" class="py-6 full-width">
+  <v-sheet elevation="2" class="py-6 full-width">
+    <v-container class="main">
       <v-row no-gutters justify="space-between">
-        <img
-          src="@/assets/images/BCMapGraphic.png"
-          alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 50px; left: -80px"
-        />
-        <v-spacer />
-        <v-col lg="6" md="8" class="ml-0 py-6 school-search">
+        <v-col>
+          <img
+            src="@/assets/images/BCMapGraphic.png"
+            alt="Map of British Columbia"
+            style="height: 268px; position: absolute; top: 50px; left: -80px"
+          />
+        </v-col>
+        <v-col cols="12" md="8" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
           <v-row>
             <v-autocomplete
@@ -64,7 +65,6 @@ function goToSchoolSearch() {
               class="mx-3"
             />
           </v-row>
-
           <v-row>
             <v-col class="px-0 my-1">
               <v-btn
@@ -76,14 +76,13 @@ function goToSchoolSearch() {
                 Schools</v-btn
               >
             </v-col>
-            <v-spacer />
             <v-col>
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
           </v-row>
         </v-col>
         <v-spacer />
       </v-row>
-    </v-sheet>
-  </v-container>
+    </v-container>
+  </v-sheet>
 </template>
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
@@ -105,7 +105,6 @@ export const useAppStore = defineStore('app', {
     },
     async setCodes() {
       await InstituteService.loadCache().then((response) => {
-          console.log(response)
       }).catch((error) => {
         console.error("ERRPR LOADING CACHE" + error)
       })

diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
@@ -212,54 +212,56 @@ onMounted(async () => {
       ]"
     ></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-col>
-          <h1 class="mt-3 mb-2">
-            {{ authority.value.authorityData?.authorityNumber }} -
-            {{ authority.value.authorityData?.displayName }}
-          </h1>
-          <v-row v-if="authority.value.authorityData">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
-              </p>
-              <p>
-                <strong>Email: </strong>
-                <a :href="'mailto:' + authority.value.authorityData?.email">{{
-                  authority.value.authorityData?.email
-                }}</a>
-              </p>
-            </v-col>
-            <v-col
-              v-for="item in authority.value.authorityData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthorityContacts()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Contacts (CSV)</v-btn
-              >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthoritySchools()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Schools (CSV)</v-btn
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-col>
+            <h1 class="mt-3 mb-2">
+              {{ authority.value.authorityData?.authorityNumber }} -
+              {{ authority.value.authorityData?.displayName }}
+            </h1>
+            <v-row v-if="authority.value.authorityData">
+              <v-col>
+                <p>
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
+                </p>
+                <p>
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
+                </p>
+                <p>
+                  <strong>Email: </strong>
+                  <a :href="'mailto:' + authority.value.authorityData?.email">{{
+                    authority.value.authorityData?.email
+                  }}</a>
+                </p>
+              </v-col>
+              <v-col
+                v-for="item in authority.value.authorityData.addresses"
+                :key="item.addressTypeCode"
               >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+              <v-col>
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthorityContacts()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthoritySchools()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Authority Info Header Block -->
     <v-sheet class="pa-6">

diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
@@ -108,33 +108,35 @@ onMounted(() => {
       :items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
     ></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 />
-        <v-col cols="12">
-          <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedContactType"
-              label="Select a Contact by Type"
-              :items="appStore.getDistrictContactTypeCodes"
-              item-title="label"
-              item-value="districtContactTypeCode"
-            ></v-autocomplete>
-            <v-btn
-              @click="searchContact"
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              class="text-none text-subtle-1 ml-3"
-            />
-          </v-row>
-          <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
-            >Reset</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-spacer />
+          <v-col cols="12">
+            <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
+            <v-row>
+              <v-autocomplete
+                v-model="selectedContactType"
+                label="Select a Contact by Type"
+                :items="appStore.getDistrictContactTypeCodes"
+                item-title="label"
+                item-value="districtContactTypeCode"
+              ></v-autocomplete>
+              <v-btn
+                @click="searchContact"
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                class="text-none text-subtle-1 ml-3"
+              />
+            </v-row>
+            <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
+              >Reset</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Contacts by Type header-->
     <v-container>