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

CSR-257 update how button and text link wrap and stack.

Browse source
This commit is contained in:
bmauger 2022-02-03 13:06:58 -05:00
parent a4b6c40e00
commit e6a5648a59
4 changed files with 39 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,15 +26,16 @@
</div>
</div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
<div class="row">
<div class="col">
<div class="row d-flex flex-row-reverse align-items-center">
<div class="col d-flex justify-content-end" id="stacked">
<buttonMain
isPrimary
buttonText="Review Appointment Details"
buttonText="Button test"
loaderColor="white"
sizeInRem="1"
isFloat
/>
</div>
<div class="col">
<textLink
navigation=true
text="back"
@ -75,7 +76,28 @@ export default {
methods: {
onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.checkHeight();
},
checkHeight() {
const parentHeight = document.getElementById('infoBox').clientHeight;
const wrapper = document.getElementById('stacked');
const goWide = document.getElementById('go-wide');
if (parentHeight > 80) {
wrapper.classList.add("justify-content-start");
wrapper.classList.remove("justify-content-end");
wrapper.classList.add("justify-content-start");
wrapper.classList.remove("justify-content-end");
} else {
wrapper.classList.add("justify-content-end");
wrapper.classList.remove("justify-content-start");
}
}
}
};
</script>
<style lang="scss">
button {
min-width: 200px;
}
</style>

18
src/layouts/component-test/component-test.vue
View file

@ -76,7 +76,7 @@
<div class="row g-2">
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 1"
@ -94,7 +94,7 @@
/>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 3"
@ -115,7 +115,7 @@
<legend class="sr-only">Functioning as Checkbox</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox"
@ -132,7 +132,7 @@
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox b"
@ -149,7 +149,7 @@
<legend class="sr-only">Functioning as Radio Button</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button"
@ -166,7 +166,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button b"
@ -184,7 +184,7 @@
<listCard
isMultiSelect
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Checkbox"
@ -219,7 +219,7 @@
<legend class="sr-only">Horizontal Radio Button</legend>
<listCard
isWide
buttonImage="back-glass-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Rear Window"
altText=""
buttonID="List Card Horizontal Radio Button"
@ -236,7 +236,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Radio Button b"

3
src/ux-components/button-main/button-main.vue
View file

@ -50,7 +50,8 @@ export default {
border-radius: $border-radius-lg;
color: $white;
transition: all 150ms linear;
white-space: nowrap;
justify-content: center;
// white-space: nowrap;
&:hover {
background: linear-gradient(
270deg,

7
src/ux-components/text-link/text-link.vue
View file

@ -29,8 +29,7 @@ export default {
<style lang="scss">
a {
color: $blue;
text-decoration: none;
border-bottom: 1px solid $blue;
text-underline-offset: 0.5em;
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
@ -45,7 +44,6 @@ a {
}
&.navigation-link {
color: $black;
border-bottom: 1px solid $black;
line-height: 26px;
display: inline-flex;
text-transform: capitalize;
@ -54,14 +52,13 @@ a {
&.footer-link {
color: $gray-600;
text-decoration: none;
border-bottom: 1px solid transparent;
line-height: 20px;
padding: 0 0 2px 0;
font-weight: 400;
font-size: 0.75rem;
&:hover {
border-bottom: 1px solid $gray-500;
padding: 0 0 2px 0;
text-decoration: underline;
}
}
}