jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

small changes

Browse source
This commit is contained in:
FrankRua 2022-02-08 08:59:24 -05:00
parent f5c981e670
commit 9581dcc974
2 changed files with 61 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -14,18 +14,17 @@ describe("funnel-footer.vue", () => {
remove: jest.fn() remove: jest.fn()
}, },
}; };
global.document.getElementById = jest.fn().mockImplementation(()=> { global.document.getElementById = jest.fn().mockImplementation(()=> {
return r; return r;
}); });
const wrapper = mount(funnelFooter, { const wrapper = mount(funnelFooter, {
propsData: {
footer: true
},
}); });
// Assert // Assert
const link = wrapper.find("a"); const link = wrapper.find("a");
console.log(wrapper.html());
// Expect // Expect
expect(link.attributes('class')).toContain("footer-link"); expect(link.attributes('class')).toContain("footer-link");

140
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -1,104 +1,82 @@
<template> <template>
<div class="container-fluid g-2 footer"> <div class="container-fluid g-2 footer">
<div class="row"> <div class="row">
<div class="col-12 d-flex justify-content-center pb-2 fs-7"> <div class="col-12 d-flex justify-content-center pb-2 fs-7">
&copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
</div> </div>
</div> </div>
<div class="row" :style="`padding-bottom: ${paddingHeight}px`"> <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
<div class="col d-flex justify-content-center justify-content-around text-center"> <div class="col d-flex justify-content-center justify-content-around text-center">
<textLink <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
footer=true <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
text="Terms of use" <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
href="https://www.safelite.com/terms-of-use" </div>
/>
<textLink
footer=true
text="Privacy policy"
href="https://www.safelite.com/safelite-group-privacy-policy"
/>
<textLink
footer=true
text="Do not sell my information"
href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
/>
</div>
</div> </div>
</div> </div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox"> <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="row d-flex flex-row-reverse align-items-center">
<div class="col d-flex justify-content-end" id="stacked"> <div class="col d-flex justify-content-end" id="stacked">
<buttonMain <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
isPrimary </div>
buttonText="Button test" <div class="col">
loaderColor="white" <textLink linkType="navigation" text="back" />
sizeInRem="1" </div>
/>
</div>
<div class="col">
<textLink
navigation=true
text="back"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main"; import buttonMain from "@/ux-components/button-main/button-main";
export default { export default {
name: "funnelFooter", name: "funnelFooter",
components: { components: {
textLink, textLink,
buttonMain buttonMain
},
data() {
return {
paddingHeight: 0
}
},
mounted() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
})
setTimeout(function(){ // Give it a moment to set the date
document.getElementById('years').innerHTML += new Date().getFullYear();
}, 100);
this.checkHeight();
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
},
methods: {
onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.checkHeight();
}, },
checkHeight() { data() {
const parentHeight = document.getElementById('infoBox').clientHeight; return {
const wrapper2 = document.getElementById('stacked'); paddingHeight: 0
console.log(parentHeight); }
console.log(wrapper2); },
if (parentHeight > 80) { mounted() {
wrapper2.classList.add("justify-content-start"); this.paddingHeight = document.getElementById("infoBox").offsetHeight;
wrapper2.classList.remove("justify-content-end"); this.$nextTick(() => {
} else { window.addEventListener('resize', this.onResize);
wrapper2.classList.add("justify-content-end"); })
wrapper2.classList.remove("justify-content-start"); setTimeout(function () { // Give it a moment to set the date
} document.getElementById('years').innerHTML += new Date().getFullYear();
}, 100);
this.checkHeight();
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
},
methods: {
onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.checkHeight();
},
checkHeight() {
const parentHeight = document.getElementById('infoBox').clientHeight;
const wrapper2 = document.getElementById('stacked');
if (parentHeight > 80) {
wrapper2.classList.add("justify-content-start");
wrapper2.classList.remove("justify-content-end");
} else {
wrapper2.classList.add("justify-content-end");
wrapper2.classList.remove("justify-content-start");
}
}
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
button { button {
min-width: 200px; min-width: 200px;
width: 100%; width: 100%;
} }
</style> </style>