finetune spacing on front page

bcgov · Apr 3, 2024 · 34aa98e · 34aa98e
1 parent 78f01de
commit 34aa98e
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 66 deletions.
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
@@ -24,34 +24,38 @@ function goToAuthority() {
 <template>
   <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">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedAuthority"
-            label="Select an Authority"
-            :items="appStore.getAuthoritiesList"
-            :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
-            :item-value="(item) => item"
-            class="w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToAuthority"
-            class="text-none text-subtitle-1 ml-3"
-          />
+    <v-row no-gutters justify="space-between">
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedAuthority"
+              label="Select an Authority"
+              :items="appStore.getAuthoritiesList"
+              :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToAuthority"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/INDEPENDNT?filepath=authoritymailing"
             variant="text"
             class="v-btn-align-left text-none wrap text-subtitle-1 my-1 text-wrap"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Contact information
-            for all Authorities (CSV)</v-btn
+            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Mailing for All
+            Authorities (CSV)</v-btn
           >
         </v-row>
       </v-col>

diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
@@ -33,27 +33,32 @@ function downloadDistrictsMailing() {
   <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">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedDistrict"
-            label="Select a District"
-            :items="appStore.getDistrictList"
-            :item-title="
-              (item) => (item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : '')
-            "
-            :item-value="(item) => item"
-            class="selectDistrictInput w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToDistrict"
-            class="v-btn-align-left text-none text-subtitle-1 ml-3"
-          />
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedDistrict"
+              label="Select a District"
+              :items="appStore.getDistrictList"
+              :item-title="
+                (item) =>
+                  item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : ''
+              "
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToDistrict"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
@@ -63,7 +68,7 @@ function downloadDistrictsMailing() {
             block
             class="text-none text-subtitle-1 my-1"
             ><template v-slot:append> <v-icon icon="mdi-chevron-right" /> </template>
-            View Contacts by Type
+            View District Contacts by Type
           </v-btn>
 
           <v-btn

diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
@@ -48,25 +48,30 @@ function goToSchoolSearch() {
         </v-col>
         <v-col cols="10" md="8" xl="6" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedSchool"
-              label="Select a School"
-              :items="appStore.getSchools"
-              :item-title="
-                (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
-              "
-              :item-value="(item) => (item?.mincode ? item : null)"
-            ></v-autocomplete>
-            <v-btn
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              @click="goToSchool"
-              class="mx-3"
-            />
+          <v-row justify="space-between">
+            <v-col cols="10" md="false" class="pa-0">
+              <v-autocomplete
+                class="mr-1 mr-md-n10"
+                v-model="selectedSchool"
+                label="Select a School"
+                :items="appStore.getSchools"
+                :item-title="
+                  (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
+                "
+                :item-value="(item) => (item?.mincode ? item : null)"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2" md="auto" class="pa-0">
+              <v-btn
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                @click="goToSchool"
+                class="mx-2 mx-md-0"
+              />
+            </v-col>
           </v-row>
           <v-row>
             <v-col class="px-0 py-4 py-md-0 my-md-1">

diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
@@ -241,7 +241,7 @@ function goToDistrict() {
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row v-if="schoolData.value" no-gutters justify="space-between" class="pa-4 pa-md-0">
-          <v-col cols="11" md="auto">
+          <v-col cols="11" md="12">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
                 <span class="">{{ schoolData.value.mincode }}</span>
@@ -313,7 +313,7 @@ function goToDistrict() {
                 "
               >
                 <strong> Group Classification:</strong><br />
-                <ul>
+                <ul class="pl-2 pl-md-5">
                   <li v-if="schoolData.value.primaryK3">
                     {{ schoolData.value.primaryK3 }} - Primary K-3
                   </li>
@@ -347,7 +347,7 @@ function goToDistrict() {
       </v-container>
     </v-sheet>
 
-    <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">
+    <v-card class="pa-6" width="100%" v-if="schoolData.value">
       <v-tabs v-model="tab">
         <v-tab :value="tabOptions.contacts">School Contacts</v-tab>
       </v-tabs>
@@ -377,3 +377,11 @@ function goToDistrict() {
     </v-card>
   </div>
 </template>
+
+<style scoped>
+@media (max-width: 768px) {
+  ul {
+    list-style-type: none;
+  }
+}
+</style>