From 3854aa5dffb1d8011c75fe9653fdcbbb0832ae4e Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 5 May 2022 16:38:26 -0400
Subject: [PATCH] CSR-240 | Implement transition as div wrapper

Also fix padding on first 4 pages
---
 .../license-plate-lookup.vue                  | 48 ++++++++++---------
 src/styles/common-styles.scss                 |  2 +-
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 1db7a57fd..d4cb19fd6 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -4,30 +4,32 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
-            </div>
+        <div class="fade-on-route-transition sub-container make-tall">
+          <div class="row my-2">
+              <div class="col">
+                  <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
+              </div>
+          </div>
+          <div class="row my-2">
+              <div class="col">
+                  <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+              </div>
+          </div>
+          <div class="row my-2">
+              <div class="col">
+                  <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+              </div>
+          </div>
+          <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
+          <div class="row my-2">
+              <div class="col">
+                  <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
+              </div>
+          </div>
+          <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
+          <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
+          <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
         </div>
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
-            </div>
-        </div>
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
-            </div>
-        </div>
-        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
-            </div>
-        </div>
-        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
-        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
     </div>
 </Form>
 </template>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 50a9f92b7..a0201d429 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -28,7 +28,7 @@ body {
 
   .sub-container{
     &.make-tall {
-      height: 100vh;
+      height: 100%;
       width: 100%;
       display: flex;
       flex-direction: column;