using a centrailzed container styles

bcgov · May 8, 2024 · 0c5cb83 · 0c5cb83
1 parent 3b35e64
commit 0c5cb83
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 111 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -56,6 +56,12 @@ a {
   color: #255a90;
 }
 
+.v-container {
+  width: 85%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 a:hover {
   cursor: pointer;
 }

diff --git a/frontend/src/components/ContactError.vue b/frontend/src/components/ContactError.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col sm="4" md="4" lg="4" xl="4">
         <v-alert class="alert-error mb-3">

diff --git a/frontend/src/components/DraftReportPage.vue b/frontend/src/components/DraftReportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
@@ -183,14 +183,6 @@ async function downloadPdf(reportId: string | undefined) {
 </script>
 
 <style scoped lang="scss">
-@import "../scss/_common.scss";
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
 
 .back-button-banner {
   padding-left: 0;

diff --git a/frontend/src/components/ErrorPage.vue b/frontend/src/components/ErrorPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense outlined class="alert-error mb-3" v-if="errorMessage">

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -1,32 +1,27 @@
 <template>
-  <v-app-bar
-    absolute
-    style="z-index: 1002"
-    class="pt-header"
-  >
-    <!-- Navbar content -->
-    <a tabindex="-1" href="/" class="d-flex align-center">
-      <img
-        tabindex="-1"
-        src="../assets/images/bc-gov-logo-light.png"
-        width="155"
-        class="logo"
-        alt="B.C. Government Logo"
-      />
-      <v-toolbar-title
-        ><h3
-          data-testid="header-title"
-          class="mainTitle"
-          style="color: rgb(32, 31, 30)"
+  <v-app-bar absolute style="z-index: 1002">
+    <v-container class="d-flex">
+      <a tabindex="-1" href="/" class="d-flex align-center">
+        <img
+          tabindex="-1"
+          src="../assets/images/bc-gov-logo-light.png"
+          width="155"
+          class="logo"
+          alt="B.C. Government Logo"
+        />
+        <v-toolbar-title
+          ><h3
+            data-testid="header-title"
+            class="mainTitle"
+            style="color: rgb(32, 31, 30)"
+          >
+            {{ appTitle }}
+          </h3></v-toolbar-title
         >
-          {{ appTitle }}
-        </h3></v-toolbar-title
-      >
-    </a>
+      </a>
 
-    <v-spacer />
+      <v-spacer />
 
-    <template #append>
       <v-menu
         v-if="isAuthenticated"
         v-model="menu"
@@ -75,7 +70,8 @@
           </v-card-actions>
         </v-card>
       </v-menu>
-    </template>
+    </v-container>
+    <!-- Navbar content -->
   </v-app-bar>
 </template>
 
@@ -109,14 +105,6 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "../scss/_common.scss";
-
-.pt-header {
-  .v-toolbar__content {
-    @include layout-margins;
-  }
-}
-
 .gov-header .v-icon {
   padding-left: 10px;
 }

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
@@ -1,6 +1,6 @@
 <!--suppress ALL -->
 <template>
-  <v-container fluid class="d-flex justify-center fill-height w-85">
+  <v-container class="d-flex justify-center fill-height">
     <dashboard></dashboard>
   </v-container>
 </template>
@@ -43,9 +43,5 @@ export default {
 .margin-initial {
   margin: initial;
 }
-
-.w-85 {
-  width: 85%;
-}
 </style>
 
diff --git a/frontend/src/components/InputForm.vue b/frontend/src/components/InputForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" @submit.prevent="submit" class="w-100 h-100">
       <v-row no-gutters>
         <v-col>
@@ -1162,16 +1162,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
-@import "../scss/_common.scss";
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
-
 .back-button-banner {
   padding-left: 0;
 }

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
@@ -1,11 +1,7 @@
 <template>
-  <v-container class="undized">
     <v-row no-gutters>
       <v-col cols="12">
-        <v-container :class="{
-          'justify-center': true, 
-          narrow: true,
-          }">
+        <v-container>
           <v-row no-gutters>
             <v-col>
               <!-- begin -->  
@@ -39,7 +35,7 @@
     </v-row>
     <v-row no-gutters class="grey-div">
       <v-col>
-        <v-container class="justify-center narrow">
+        <v-container class="justify-center">
           <v-row no-gutters>
             <v-col>
               <h3 class="centered-text mt-14 mb-8">
@@ -144,7 +140,7 @@
 
       </v-col>
     </v-row>  
-  </v-container>
+  <!-- </v-container> -->
 </template>
 
 <script>
@@ -199,11 +195,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import "../scss/_common.scss";
-
-  .narrow {
-    @include layout-margins;
-  }
+  
 
   .image-monitor {
     border-style: none;
@@ -303,13 +295,5 @@ export default {
     height: 100%;
   }
 
-  .undized {
-    margin: 0;
-    padding: 0;
-    min-width: 100%;
-    max-width: 100%;
-    height: 100%;
-    overflow: hidden; 
-    word-wrap: break-word;
-  }
+  
 </style>
diff --git a/frontend/src/components/LoginError.vue b/frontend/src/components/LoginError.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="alert-error mb-3">

diff --git a/frontend/src/components/Logout.vue b/frontend/src/components/Logout.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="mb-3 alert-info">

diff --git a/frontend/src/components/NotFound.vue b/frontend/src/components/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert

diff --git a/frontend/src/components/PublishedReportPage.vue b/frontend/src/components/PublishedReportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
@@ -110,15 +110,6 @@ const editReport = async () => {
 </script>
 
 <style lang="scss">
-@import '../scss/_common.scss';
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
-
 .sticky-top {
   padding-left: 0;
   z-index: 190;

diff --git a/frontend/src/components/TokenExpired.vue b/frontend/src/components/TokenExpired.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="alert-error mb-3">

diff --git a/frontend/src/scss/_common.scss b/frontend/src/scss/_common.scss