fix: fixing landing page style

bcgov · Sep 7, 2023 · f8948c6 · f8948c6
1 parent c6a0025
commit f8948c6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 57 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -61,7 +61,7 @@ toastBus.on(openToast)
     <main-header-component v-if="!$route.meta.hideHeader"></main-header-component>
   </div>
   <div :class="{[`${$route.meta.format}`]:true}">
-    <div class="content">
+    <div :class="$route.meta.style">
     <router-view></router-view>
     </div>
   </div>

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -232,6 +232,10 @@ hr {
   margin: 0rem;
   padding-bottom: 0px;
   display: flex;
+  align-items: stretch;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
   background: var(--light-theme-background-background, #fff);
 }
 .screen {
@@ -403,6 +407,17 @@ hr {
   gap: 3rem;
 }
 
+.content-landing {
+  margin: 0px;
+  margin-left: 2.5rem;
+  padding-bottom: 0px;
+  display: flex;
+  align-items: stretch;
+  height: 100vh;
+  width: 100vw;
+
+}
+
 .form-header {
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/pages/LandingPage.vue b/frontend/src/pages/LandingPage.vue
@@ -20,67 +20,76 @@ if (query.ref && query.ref === 'external') {
 }
 </script>
 
-<template>
-  <div class="full-width">
-    <div class="row bx--row landing-grid">
-      <div class="bx--col-sm-8 bx--col-md-10 bx--col-lg-10">
+<template>  
+  <div class="login-content">
 
-        <img :src="logo" alt="Government of British Columbia Logo" width="160" class="logo" />
-
-        <h1 id="landing-title" class="landing-title">Client Management System</h1>
-
-        <h2 id="landing-subtitle" class="landing-subtitle">
-          Create and manage client accounts
-        </h2>
-        <div class="spacing"></div>
-        <div class="form-footer-group-buttons">
-          <cds-button
-            kind="primary"
-            iconLayout=""
-            class="landing-button"
-            :href="$backend+'/login?code=idir'"
-          >
-            <span>Login with IDIR</span>
-            <login16 slot="icon" />
-          </cds-button>
-
-          <cds-button
-            v-if="$features.BCSC_LOGIN"
-            kind="primary"
-            iconLayout=""
-            class="landing-button"
-            :href="$backend+'/login?code=bcsc'"
-          >
-            <span>Login with BC Services Card</span>
-            <login16 slot="icon" />
-          </cds-button>
-
-          <cds-button
-            v-if="$features.BCEID_LOGIN"
-            kind="primary"
-            iconLayout=""
-            class="landing-button"
-            :href="$backend+'/login?code=bceidbusiness'"
-          >
-            <span>Login with BCeID</span>
-            <login16 slot="icon" />
-          </cds-button>
-
-        </div>
-      </div>
-
-      <div class="bx--col-sm-8 bx--col-md-6 bx--col-lg-6 landing-img-column">
-        <img
-          :src="Seeding"
-          alt="Small green seedling on the dirt and watered"
-          class="landing-img"
-        />
-      </div>
+    <img 
+      :src="logo" 
+      alt="Government of British Columbia Logo" 
+      />
 
+    <h1 id="landing-title" class="landing-title">Client Management System</h1>
+
+    <h2 id="landing-subtitle" class="landing-subtitle">Create and manage client accounts</h2>
+
+    <div class="spacing"></div>
+
+    <div class="form-footer-group-buttons">
+    <cds-button
+      kind="primary"
+      iconLayout=""
+      class="landing-button"
+      :href="$backend+'/login?code=idir'"
+    >
+      <span>Log in with IDIR</span>
+      <login16 slot="icon" />
+    </cds-button>
+    <cds-button
+      v-if="$features.BCSC_LOGIN"
+      kind="primary"
+      iconLayout=""
+      class="landing-button"
+      :href="$backend+'/login?code=bcsc'"
+    >
+      <span>Log in with BC Services Card</span>
+      <login16 slot="icon" />
+    </cds-button>
+    <cds-button
+      v-if="$features.BCEID_LOGIN"
+      kind="primary"
+      iconLayout=""
+      class="landing-button"
+      :href="$backend+'/login?code=bceidbusiness'"
+    >
+      <span>Log in with BCeID</span>
+      <login16 slot="icon" />
+    </cds-button>
     </div>
   </div>
+
+  <div class="login-content">
+    <img
+      :src="Seeding"
+      alt="Small green seedling on the dirt and watered"
+    />
+  </div>
 </template>
 
 <style lang="scss">
 @import '@bcgov-nr/nr-fsa-theme/style-sheets/landing-page-components-overrides.scss';
+
+.login-content:first-child{
+  padding-top: 3rem;
+  width: 55vw;
+}
+.login-content:last-child {  
+  width: 45vw;
+}
+.login-content:first-child img {
+  width: 10.5rem;
+}
+.login-content:last-child img {
+  width: 100%;
+  object-fit: cover;
+}
 </style>
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         bceidbusiness: 'form',
         bcsc: 'bcsc-form',
       },
+      style: 'content-landing',
     },
   },
   {
@@ -47,6 +48,7 @@ const routes: RouteRecordRaw[] = [
         idir: 'internal',
         bcsc: 'bcsc-form',
       },
+      style: 'content',
     },
   },
   {
@@ -65,6 +67,7 @@ const routes: RouteRecordRaw[] = [
         idir: 'internal',
         bceidbusiness: 'form',
       },
+      style: 'content',
     },
   },
   {
@@ -81,6 +84,7 @@ const routes: RouteRecordRaw[] = [
       redirectTo: {
         idir: 'internal',
       },
+      style: 'content',
     },
   },
   {
@@ -98,6 +102,7 @@ const routes: RouteRecordRaw[] = [
         bceidbusiness: 'form',
         bcsc: 'form',
       },
+      style: 'content',
     },
   },
   {
@@ -106,7 +111,7 @@ const routes: RouteRecordRaw[] = [
     component: UserLoadingPage,
     props: true,
     meta: {
-      format: 'full',
+      format: 'full-centered',
       hideHeader: true,
       requireAuth: false,
       showLoggedIn: false,
@@ -116,6 +121,7 @@ const routes: RouteRecordRaw[] = [
         bceidbusiness: 'form',
         bcsc: 'bcsc-form',
       },
+      style: 'content',
     },
   },
   {
@@ -130,6 +136,7 @@ const routes: RouteRecordRaw[] = [
       showLoggedIn: true,
       visibleTo: ['idir', 'bceidbusiness', 'bcsc'],
     },
+    style: 'content',
   },
   {
     path: '/:pathMatch(.*)*',
@@ -143,6 +150,7 @@ const routes: RouteRecordRaw[] = [
       showLoggedIn: true,
       visibleTo: ['idir', 'bceidbusiness', 'bcsc'],
     },
+    style: 'content',
   },
 ]