Merge pull request #103 from bcgov/nav-bar-and-stylings

JASPER: 176: Vuetify NavBar/Styling
bcgov · Dec 13, 2024 · 5d4c136 · 5d4c136
2 parents d6b888c + c7dec38
commit 5d4c136
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 46 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,18 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head lang="en">
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="./favicon.ico">
+  <head lang="en">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/fonts.css" />
+    <link rel="stylesheet" href="./styles/common.css" />
+    <link rel="icon" href="./favicon.ico" />
     <title>JASPER</title>
-</head>
-<body>
+  </head>
+  <body>
     <noscript>
-        <strong>We're sorry but SCV.App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but JASPER doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
     <script type="module" src="./src/main.ts"></script>
     <!-- built files will be auto injected -->
-</body>
+  </body>
 </html>
diff --git a/web/public/styles/WorkSans-Regular.ttf b/web/public/styles/WorkSans-Regular.ttf
diff --git a/web/public/styles/common.css b/web/public/styles/common.css
@@ -0,0 +1,9 @@
+a:hover {
+  color: inherit !important;
+}
+
+select {
+  -webkit-appearance: auto !important;
+  appearance: auto !important;
+  border-style: solid !important;
+}
diff --git a/web/public/styles/fonts.css b/web/public/styles/fonts.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'WorkSans-Regular';
+  font-style: normal;
+  src: url('WorkSans-Regular.ttf') format('truetype');
+}
+
+html {
+  font-family: 'WorkSans-Regular', 'Work Sans', sans-serif;
+}
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -1,30 +1,35 @@
 <template>
-  <div class="app-outer fill-body" id="app">
-    <navigation-topbar />
-    <router-view />
-    <navigation-footer id="footer" />
-  </div>
+  <v-app>
+    <v-app-bar app>
+      <v-app-bar-title>
+        <router-link to="/"> JASPER </router-link>
+      </v-app-bar-title>
+      <v-tabs align-tabs="start">
+        <v-tab to="/dashboard">Dashboard</v-tab>
+        <v-tab to="/court-list">Court list</v-tab>
+        <v-tab to="/court-file-search">Court file search</v-tab>
+      </v-tabs>
+    </v-app-bar>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
 </template>
 
 <script lang="ts">
-  import NavigationFooter from '@components/NavigationFooter.vue';
-  import NavigationTopbar from '@components/NavigationTopbar.vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     name: 'App',
-    components: {
-      NavigationTopbar,
-      NavigationFooter,
-    },
   });
 </script>
 
 <style>
-/* todo: remove */
-  select {
-    -webkit-appearance: auto !important;
-    appearance: auto !important;
-    border-style: solid !important;
+  .v-tabs {
+    flex: 10;
+  }
+  .v-app-bar-title a {
+    text-decoration: none;
+    color: inherit;
   }
 </style>
diff --git a/web/src/components/dashboard/Dashboard.vue b/web/src/components/dashboard/Dashboard.vue
@@ -545,9 +545,9 @@
 </style>
 <script lang="ts">
   import { HttpService } from '@/services/HttpService';
-  import NavigationTopbar from '@components/NavigationTopbar.vue';
-  import Calendar from '@components/calendar/Calendar.vue';
-  import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
+import NavigationTopbar from '@components/NavigationTopbar.vue';
+import Calendar from '@components/calendar/Calendar.vue';
+import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
 
   export default defineComponent({
     components: {
@@ -612,8 +612,6 @@
             if (data) {
               //   ar = JSON.parse(JSON.stringify(data, null, 2));
               locations = [...data];
-            } else {
-              window.alert('bad data!');
             }
           });
       };
@@ -729,8 +727,6 @@
               //   arEvents = [...ar];
               //   loadActivities(data.activities);
               //   loadPresiders(data.presiders);
-            } else {
-              window.alert('bad data!');
             }
           });
       };

diff --git a/web/src/main.ts b/web/src/main.ts
@@ -1,4 +1,5 @@
 import LoadingSpinner from '@components/LoadingSpinner.vue';
+import '@mdi/font/css/materialdesignicons.css';
 import { createBootstrap } from 'bootstrap-vue-next';
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import 'bootstrap/dist/css/bootstrap.css';
@@ -9,27 +10,17 @@ import './filters';
 import router from './router/index';
 import { registerRouter } from './services';
 import { registerPinia } from './stores';
-import '@mdi/font/css/materialdesignicons.css';
-// Vuetify
-import { createVuetify } from 'vuetify';
-import * as components from 'vuetify/components';
-import * as directives from 'vuetify/directives';
-import 'vuetify/styles';
+import { registerPlugins } from '@/plugins';
 
 const app = createApp(App);
-const vuetify = createVuetify({
-  components,
-  directives,
-});
 registerPinia(app);
 app.use(router);
 app.use(createBootstrap());
-app.use(vuetify);
 //Vue.config.productionTip = true
 app.component('loading-spinner', LoadingSpinner);
 
 registerRouter(app);
-
+registerPlugins(app);
 app.mount('#app');
 
 // Redirect from / to /jasper/

diff --git a/web/src/plugins/index.ts b/web/src/plugins/index.ts
@@ -0,0 +1,5 @@
+import vuetify from './vuetify';
+
+export function registerPlugins(app) {
+  app.use(vuetify);
+}
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
@@ -0,0 +1,33 @@
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import { VBtn } from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import 'vuetify/styles';
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+
+export default createVuetify({
+  components,
+  directives,
+  aliases: {
+    VBtnSecondary: VBtn,
+    VBtnTertiary: VBtn,
+  },
+  defaults: {
+    VBtn: {
+      rounded: true,
+      variant: 'flat',
+      class: 'text-none',
+    },
+    VBtnSecondary: {
+      rounded: true,
+      variant: 'outlined',
+      class: 'text-none',
+    },
+    VBtnTertiary: {
+      rounded: true,
+      variant: 'outlined',
+      class: 'text-none',
+    },
+  },
+});
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
@@ -11,8 +11,8 @@ async function authGuard(to: any, from: any, next: any) {
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    redirect: '/dashboard',
     name: 'HomeView',
-    component: () => import('@/components/Home.vue'),
   },
   {
     path: '/court-list',

diff --git a/web/vite.config.js b/web/vite.config.js
@@ -75,4 +75,7 @@ export default defineConfig({
       },
     },
   },
+  optimizeDeps: {
+    exclude: ['bootstrap-vue-next'],
+  },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,4 +75,7 @@ export default defineConfig({ @@
           },
         },
       },
+      optimizeDeps: {
+        exclude: ['bootstrap-vue-next'],
+      },
     });