minor cleanup in prep for consolidation across projects (#4)

* minor cleanup in prep for consolidation across projects Signed-off-by: Kial Jinnah <kialj876@gmail.com> * PR review update Signed-off-by: Kial Jinnah <kialj876@gmail.com> * system banner tweak Signed-off-by: Kial Jinnah <kialj876@gmail.com> --------- Signed-off-by: Kial Jinnah <kialj876@gmail.com>
bcgov · Jun 5, 2024 · 6a5817e · 6a5817e
1 parent 140ca89
commit 6a5817e
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 17 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -60,7 +60,8 @@ export default defineNuxtConfig({
       appEnv: `${process.env.VUE_APP_POD_NAMESPACE || 'unknown'}`,
       requireLogin: true,
       version: process.env.npm_package_version || '',
-      appName: process.env.npm_package_name || ''
+      appName: process.env.npm_package_name || '',
+      appNameDisplay: 'BCROS Business Dashboard'
     }
   }
 })
diff --git a/src/app.config.ts b/src/app.config.ts
@@ -11,8 +11,6 @@ export default defineAppConfig({
       }
     },
     alert: {
-      // NB: gap classes are applied to the div underneath the wrapper
-      gap: 'max-w-[1360px] p-4 mx-auto',
       inner: 'pt-2',
       color: {
         yellow: {

diff --git a/src/app/router.options.ts b/src/app/router.options.ts
@@ -9,7 +9,7 @@ export default <RouterConfig> {
       path: '/:identifier',
       component: () => import('~/pages/dashboard.vue').then(r => r.default || r),
       meta: {
-        layout: 'default',
+        layout: 'business',
         title: 'Business Dashboard',
         breadcrumbs: [getBcrosHomeCrumb, getRegistryDashCrumb, getBusinessDashCrumb]
       }

diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
@@ -3,6 +3,10 @@
   @apply bg-gray-100 text-gray-700 min-h-[100vh] flex flex-col;
 }
 
+.app-inner-container {
+  @apply max-w-[1360px] w-[100vw] mx-auto px-4;
+}
+
 .app-body {
-  @apply grow relative max-w-[1360px] w-[100vw] mx-auto my-0 px-4 py-0;
+  @apply grow relative;
 }
diff --git a/src/components/bcros/Breadcrumb.vue b/src/components/bcros/Breadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-blue-350" data-cy="bcros-breadcrumb">
-    <div class="flex flex-wrap divide-x divide-white mx-auto py-[7px] px-4 h-[45px] w-full max-w-[1360px] text-white">
+    <div class="flex flex-wrap divide-x divide-white py-[7px] h-[45px] text-white app-inner-container">
       <UButton
         class="mr-3 mt-[1px] px-1 h-[28px] w-[28px] rounded-full"
         color="white"

diff --git a/src/components/bcros/BusinessDetails.vue b/src/components/bcros/BusinessDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="bcros-business-details" class="bg-white h-[150px]" data-cy="business-details">
-    <div class="grid grid-cols-2 m-auto px-4 pt-5 w-full max-w-[1360px] text-bcGovGray-900">
+    <div class="grid grid-cols-2 pt-5 text-bcGovGray-900 app-inner-container">
       <div class="col-auto" data-cy="business-details-name">
         <h2 class="font-bold text-xl">
           {{ currentBusinessName }}

diff --git a/src/components/bcros/Footer.vue b/src/components/bcros/Footer.vue
@@ -3,7 +3,7 @@
     class="flex items-center h-[56px] border-t-2 border-yellow-400 bg-bcGovColor-darkBlue text-sm"
     data-cy="bcros-footer"
   >
-    <div class="m-auto px-4 h-[30.5px] w-full max-w-[1360px]">
+    <div class="h-[30.5px] w-full app-inner-container">
       <nav class="flex flex-grow">
         <ul class="p-0 -ml-2 list-none">
           <li v-for="link in links" :key="link.text" class="inline-block mr-2 pr-2 border-r last:mr-0 last:border-r-0">
@@ -36,7 +36,8 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ aboutText: string }>()
+const aboutText = useRuntimeConfig().public.appNameDisplay +
+  ` v${useRuntimeConfig().public.version}`
 
 const links = [
   { text: 'Home', href: '/', newTab: false },

diff --git a/src/components/bcros/SystemBanner.vue b/src/components/bcros/SystemBanner.vue
@@ -1,12 +1,12 @@
 <template>
   <UAlert
     v-show="!!message && !close"
-    class="border-b-2 border-yellow-400"
+    class="border-b-2 border-yellow-400 py-0"
     color="yellow"
     :description="message"
     variant="solid"
     :close-button="{ class: 'pr-2 text-gray-900' }"
-    :ui="{ rounded: 'rounded-none', padding: 'p-0' }"
+    :ui="{ rounded: 'rounded-none', padding: 'p-0', gap: 'app-inner-container py-2' }"
     @close="close = true"
   >
     <template #icon>

diff --git a/src/components/bcros/header/Index.vue b/src/components/bcros/header/Index.vue
@@ -6,7 +6,7 @@
   >
     <div
       id="bcros-main-header__container"
-      class="flex flex-wrap content-center m-auto px-4 h-[68px] w-full max-w-[1360px]"
+      class="flex flex-wrap content-center h-[68px] app-inner-container"
     >
       <nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center h-[50px] w-full">
         <a id="bcros-main-header__container__actions__home-redirect" class="flex" @click="goToBcrosHome()">

diff --git a/src/layouts/business.vue b/src/layouts/business.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="app-container" data-cy="default-layout">
+    <bcros-header />
+    <bcros-system-banner
+      class="justify-center"
+      :message="systemMessage"
+    />
+    <bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
+    <bcros-business-details />
+    <div class="app-inner-container app-body">
+      <slot />
+    </div>
+    <bcros-footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
+
+const systemMessage = ref('')
+onMounted(async () => {
+  await useBcrosLaunchdarkly().ldClient.waitUntilReady()
+  systemMessage.value = useBcrosLaunchdarkly().getStoredFlag('banner-text')
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -6,11 +6,10 @@
       :message="systemMessage"
     />
     <bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
-    <bcros-business-details />
-    <div class="app-body">
+    <div class="app-inner-container app-body">
       <slot />
     </div>
-    <bcros-footer :about-text="'BCROS Business Dashboard UI v' + version" />
+    <bcros-footer />
   </div>
 </template>
 
@@ -23,8 +22,6 @@ onMounted(async () => {
   await useBcrosLaunchdarkly().ldClient.waitUntilReady()
   systemMessage.value = useBcrosLaunchdarkly().getStoredFlag('banner-text')
 })
-
-const version = useRuntimeConfig().public.version
 </script>
 
 <style scoped>