CSR-257 WIP

src/common-components/funnel-footer/funnel-footer.vue

@@ -3,7 +3,7 @@
     <div class="container-fluid g-2">
       <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
         </div>
       </div>
       <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col d-flex justify-content-end" id="stacked">
+        <div class="col-auto d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col">
+        <div class="col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -42,15 +42,13 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
+      currentYear: new Date().getFullYear(),
     }
   },
   mounted() {
     this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
-    })
-    this.$nextTick(function () { // Give it a moment to set the date
-      document.getElementById('years').innerHTML += new Date().getFullYear();
       this.checkHeight();
     })
   },
@@ -76,8 +74,8 @@ export default {
       }
     },
     initializeComponent(cmsContent) {
-      this.buttonText = cmsContent.BackButtonText;
-      this.backLink = cmsContent.ForwardButtonText;
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
       this.$emit("forwardClicked");

src/styles/common-styles.scss

@@ -6,6 +6,7 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
+    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }