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()
},
};
global.document.getElementById = jest.fn().mockImplementation(()=> {
return r;
});
const wrapper = mount(funnelFooter, {
propsData: {
footer: true
},
});
// Assert
const link = wrapper.find("a");
console.log(wrapper.html());
// Expect
expect(link.attributes('class')).toContain("footer-link");

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

@ -1,104 +1,82 @@
<template>
<div class="container-fluid g-2 footer">
<div class="container-fluid g-2 footer">
<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
</div>
<div class="col-12 d-flex justify-content-center pb-2 fs-7">
&copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
</div>
</div>
<div class="row" :style="`padding-bottom: ${paddingHeight}px`">
<div class="col d-flex justify-content-center justify-content-around text-center">
<textLink
footer=true
text="Terms of use"
href="https://www.safelite.com/terms-of-use"
/>
<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 class="col d-flex justify-content-center justify-content-around text-center">
<textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
<textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
<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" />
</div>
</div>
</div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
</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">
<buttonMain
isPrimary
buttonText="Button test"
loaderColor="white"
sizeInRem="1"
/>
</div>
<div class="col">
<textLink
navigation=true
text="back"
/>
</div>
<div class="col d-flex justify-content-end" id="stacked">
<buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
</div>
<div class="col">
<textLink linkType="navigation" text="back" />
</div>
</div>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
export default {
name: "funnelFooter",
components: {
textLink,
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();
name: "funnelFooter",
components: {
textLink,
buttonMain
},
checkHeight() {
const parentHeight = document.getElementById('infoBox').clientHeight;
const wrapper2 = document.getElementById('stacked');
console.log(parentHeight);
console.log(wrapper2);
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");
}
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() {
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>
<style lang="scss" scoped>
button {
button {
min-width: 200px;
width: 100%;
}
}
</style>