Page and icon refinements

LibrariesHacked · Jul 11, 2024 · c157475 · c157475
1 parent 72fea43
commit c157475
Show file tree

Hide file tree

Showing 13 changed files with 518 additions and 415 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - run: npm install --force
+      - run: npm install
 
       - name: Deploy with gh-pages
         run: |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,33 +15,33 @@
     "axios": "^1.7.2",
     "colorbrewer": "^1.5.6",
     "file-saver": "^2.0.5",
-    "jose": "^5.3.0",
+    "jose": "^5.6.3",
     "maplibre-gl": "^3.6.2",
     "moment": "^2.30.1",
     "papaparse": "^5.4.1",
     "vue": "^3.4.21",
     "vue-carbonbadge": "^2.0.0",
     "vue-maplibre-gl": "^3.1.3",
     "vue-markdown-render": "^2.2.1",
-    "vue-router": "^4.3.2",
-    "vuetify": "^3.6.8",
+    "vue-router": "^4.4.0",
+    "vuetify": "^3.6.12",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-vue": "^9.27.0",
     "gh-pages": "^6.1.1",
-    "sass": "^1.77.2",
+    "sass": "^1.77.8",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-router": "^0.8.8",
-    "vite": "^5.2.12",
+    "vite": "^5.3.3",
     "vite-plugin-vuetify": "^2.0.3"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -9,86 +9,142 @@
     </v-app-bar>
     <v-navigation-drawer border v-model="drawer" elevation="0">
       <v-list nav>
-        <v-list-item color="info" :to="'/about'" active-class="highlighted"
-          :class="'/about' === $route.path ? 'highlighted' : ''" prepend-icon="mdi-information-variant">
-          <v-list-item-title>About</v-list-item-title>
-        </v-list-item>
-        <v-divider />
-        <v-list-group value="Events" no-action prepend-icon="mdi-calendar-badge">
+        <v-list-subheader>Data types</v-list-subheader>
+        <v-list-group value="Catalogue" prepend-icon="mdi-bookshelf">
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" title="Catalogue"></v-list-item>
+          </template>
+          <v-list-item
+            color="success"
+            :to="'/stock-summary'"
+            active-class="highlighted"
+            :class="'/stock-summary' === $route.path ? 'highlighted' : ''"
+          >
+            <v-list-item-title>Stock summary</v-list-item-title>
+          </v-list-item>
+        </v-list-group>
+        <v-list-group
+          value="Events"
+          no-action
+          prepend-icon="mdi-calendar-badge"
+        >
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Events"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/events'" active-class="highlighted"
-            :class="'/events' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/events'"
+            active-class="highlighted"
+            :class="'/events' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Events</v-list-item-title>
           </v-list-item>
         </v-list-group>
-        <v-list-group value="Library locations" no-action prepend-icon="mdi-office-building-marker">
+        <v-list-group
+          value="Library locations"
+          no-action
+          prepend-icon="mdi-office-building-marker"
+        >
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Library locations"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/libraries'" active-class="highlighted"
-            :class="'/libraries' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/libraries'"
+            active-class="highlighted"
+            :class="'/libraries' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Locations</v-list-item-title>
           </v-list-item>
-          <v-list-item color="success" :to="'/libraries-edit'" active-class="highlighted"
-            :class="'/libraries' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/libraries-edit'"
+            active-class="highlighted"
+            :class="'/libraries' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Edit locations</v-list-item-title>
           </v-list-item>
         </v-list-group>
-        <v-list-group value="Loans" prepend-icon="mdi-book-account-outline">
+        <v-list-group value="Loans" prepend-icon="mdi-book-account">
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Loans"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/loans'" active-class="highlighted"
-            :class="'/loans' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/loans'"
+            active-class="highlighted"
+            :class="'/loans' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Loans</v-list-item-title>
           </v-list-item>
         </v-list-group>
         <v-list-group value="Membership" prepend-icon="mdi-account-group">
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Membership"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/membership'" active-class="highlighted"
-            :class="'/membership' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/membership'"
+            active-class="highlighted"
+            :class="'/membership' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Membership</v-list-item-title>
           </v-list-item>
-          <v-list-item color="success" :to="'/postcode-to-lsoa'" active-class="highlighted"
-            :class="'/postcode-to-lsoa' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/postcode-to-lsoa'"
+            active-class="highlighted"
+            :class="'/postcode-to-lsoa' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Postcode converter</v-list-item-title>
           </v-list-item>
-          <v-list-item color="success" :to="'/membership-map'" active-class="highlighted"
-            :class="'/membership-map' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/membership-map'"
+            active-class="highlighted"
+            :class="'/membership-map' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Membership map</v-list-item-title>
           </v-list-item>
         </v-list-group>
         <v-list-group value="MobileLibraries" prepend-icon="mdi-bus-clock">
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Mobile libraries"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/mobile-library-stops'" active-class="highlighted" :class="'/mobile-library-stops' === $route.path ? 'highlighted' : ''
-            ">
+          <v-list-item
+            color="success"
+            :to="'/mobile-library-stops'"
+            active-class="highlighted"
+            :class="
+              '/mobile-library-stops' === $route.path ? 'highlighted' : ''
+            "
+          >
             <v-list-item-title>Mobile library stops</v-list-item-title>
           </v-list-item>
         </v-list-group>
         <v-list-group value="Visits" prepend-icon="mdi-shoe-print">
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" title="Visits"></v-list-item>
           </template>
-          <v-list-item color="success" :to="'/physical-visits'" active-class="highlighted"
-            :class="'/physical-visits' === $route.path ? 'highlighted' : ''">
+          <v-list-item
+            color="success"
+            :to="'/physical-visits'"
+            active-class="highlighted"
+            :class="'/physical-visits' === $route.path ? 'highlighted' : ''"
+          >
             <v-list-item-title>Physical visits</v-list-item-title>
           </v-list-item>
         </v-list-group>
-        <v-list-group value="Catalogue" prepend-icon="mdi-bookshelf">
-          <template v-slot:activator="{ props }">
-            <v-list-item v-bind="props" title="Catalogue"></v-list-item>
-          </template>
-          <v-list-item color="success" :to="'/stock-summary'" active-class="highlighted"
-            :class="'/stock-summary' === $route.path ? 'highlighted' : ''">
-            <v-list-item-title>Stock summary</v-list-item-title>
-          </v-list-item>
-        </v-list-group>
+        <v-divider />
+        <v-list-item
+          color="info"
+          :to="'/about'"
+          active-class="highlighted"
+          :class="'/about' === $route.path ? 'highlighted' : ''"
+          prepend-icon="mdi-information"
+        >
+          <v-list-item-title>About</v-list-item-title>
+        </v-list-item>
       </v-list>
       <template v-slot:append>
         <v-card>
@@ -116,7 +172,7 @@ export default {
     'layout-footer': Footer
   },
   methods: {
-    async logout() {
+    async logout () {
       await this.$store.dispatch('logout')
       this.$router.push('/')
     }

diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
@@ -13,7 +13,7 @@
       persistent-hint
       persistent-clear
       prepend-icon=""
-      prepend-inner-icon="mdi-file-document-outline"
+      prepend-inner-icon="mdi-file-document"
     ></v-file-input>
   </v-card>
 </template>

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,11 +1,12 @@
 <template>
   <v-footer app color="grey-lighten-5" class="pa-3">
     <v-row justify="center" class="text-xs-center w-100" no-gutters>
-      <v-btn variant="text" color="info" to="/accessibility">
+      <v-btn variant="text" color="info" to="/accessibility" class="mx-1">
         Accessibility
       </v-btn>
-      &nbsp;
-      <v-btn variant="text" color="info" to="/privacy">Privacy</v-btn>
+      <v-btn variant="text" color="info" to="/privacy" class="mx-1">
+        Privacy
+      </v-btn>
     </v-row>
   </v-footer>
 </template>
diff --git a/src/components/UserProfile.vue b/src/components/UserProfile.vue
@@ -4,28 +4,48 @@
       <p v-if="this.$store.state.loginKey">
         Logged in as <strong>{{ this.$store.state.loginSubject }}</strong>
         <span v-if="this.$store.state.loginAdmin">
-          <v-chip color="info" class="mx-2 my-2" prepend-icon="mdi-shield-crown">
+          <v-chip
+            color="info"
+            class="mx-2 my-2"
+            prepend-icon="mdi-shield-crown"
+          >
             Admin
           </v-chip>
         </span>
-        <v-chip class="mr-1" v-for="code in this.$store.state.loginCodes" :key="'chip_' + code">
+        <v-chip
+          class="mr-1"
+          v-for="code in this.$store.state.loginCodes"
+          :key="'chip_' + code"
+        >
           <v-icon left>mdi-map-legend</v-icon>
           {{
             library_services.length > 0
               ? library_services.filter(s => s.code === code)[0].nice_name
               : code
-          }}</v-chip>
+          }}</v-chip
+        >
       </p>
       <p v-if="!this.$store.state.loginKey">You are not logged in</p>
     </v-card-text>
     <v-card-actions v-if="this.actions">
       <v-spacer></v-spacer>
-      <v-btn v-if="this.$store.state.loginKey" color="warning" variant="tonal" text @click="logout">
+      <v-btn
+        v-if="this.$store.state.loginKey"
+        color="warning"
+        variant="tonal"
+        text
+        @click="logout"
+      >
         Log out
         <v-icon right>mdi-logout</v-icon>
       </v-btn>
-      <v-btn v-if="!this.$store.state.loginKey" color="info" variant="tonal" :to="'/login'"
-        append-icon="mdi-account-circle-outline">
+      <v-btn
+        v-if="!this.$store.state.loginKey"
+        color="info"
+        variant="tonal"
+        :to="'/login'"
+        append-icon="mdi-account-circle"
+      >
         Log in
       </v-btn>
     </v-card-actions>
@@ -37,21 +57,21 @@ import * as authoritiesHelper from '../helpers/libraryAuthorities.js'
 
 export default {
   props: ['actions'],
-  data() {
+  data () {
     return {}
   },
   methods: {
-    async getServices() {
+    async getServices () {
       let services = await authoritiesHelper.getLibraryAuthorities()
       services = services.sort((a, b) => a.name.localeCompare(b.name))
       this.$store.commit('setServices', services)
       this.library_services = services
     },
-    async logout() {
+    async logout () {
       this.$store.commit('logout')
     }
   },
-  beforeMount() {
+  beforeMount () {
     this.getServices()
   }
 }

diff --git a/src/markdown/login.md b/src/markdown/login.md
@@ -1,4 +1,4 @@
-Anyone can browse this site, as well use any of the tools to create and visualise library data.
+Anyone can browse this site, as well use the tools to create and visualise library data.
 
 To publish updates to existing data, you need to login. If your organisation has access you will be able to login using your organisation email address.
 

diff --git a/src/markdown/membershippostcodetolsoa.md b/src/markdown/membershippostcodetolsoa.md
@@ -1,3 +1,3 @@
-This tool converts UK postcodes into statistical areas for further analysis. England and Wales store data at the census-based 'lower super output area' geographic level. In Scotland, 'Data Zones' are commonly used, and in Northern Ireland, 'Small Areas'.
+This tool converts UK postcodes into statistical areas. This is useful for then doing location based analysis. England and Wales compile demographic data at census-based 'lower super output area' geographic level. In Scotland, 'Data Zones' are commonly used, and in Northern Ireland, 'Small Areas'.
 
-All postcodes are stored securely on your own computer, and never published online.
+When using this tool, all postcodes are stored securely on your own computer, and never sent online.
diff --git a/src/plugins/store.js b/src/plugins/store.js
@@ -1,3 +1,5 @@
+/* global localStorage */
+
 import { createStore } from 'vuex'
 
 import * as jose from 'jose'

diff --git a/src/views/libraries-data.vue b/src/views/libraries-data.vue
@@ -1,9 +1,18 @@
 <template>
   <v-container>
-    <layout-header title="Libraries" subtitle="Public library locations, hours, and contact details" />
+    <layout-header
+      title="Libraries"
+      subtitle="Public library locations, hours, and contact details"
+    />
     <p class="text-center">
-      <v-btn size="large" prepend-icon="mdi-information-outline" variant="tonal" color="info"
-        href="https://schema.librarydata.uk/libraries" target="_blank">
+      <v-btn
+        size="large"
+        prepend-icon="mdi-information"
+        variant="tonal"
+        color="info"
+        href="https://schema.librarydata.uk/libraries"
+        target="_blank"
+      >
         Explore the locations schema
       </v-btn>
     </p>
@@ -18,7 +27,7 @@
 import MarkDownData from '../markdown/librariesdata.md?raw'
 
 export default {
-  data() {
+  data () {
     return {
       mdText: MarkDownData
     }