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> </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"> <div class="row d-flex flex-row-reverse align-items-center">
<div class="col"> <div class="col d-flex justify-content-end" id="stacked">
<buttonMain <buttonMain
isPrimary isPrimary
buttonText="Review Appointment Details" buttonText="Button test"
loaderColor="white" loaderColor="white"
sizeInRem="1" sizeInRem="1"
isFloat
/> />
</div>
<div class="col">
<textLink <textLink
navigation=true navigation=true
text="back" text="back"
@ -75,7 +76,28 @@ export default {
methods: { methods: {
onResize() { onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight; 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> </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"> <div class="row g-2">
<listCard <listCard
isMultiSelect isMultiSelect
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Checkbox 1" buttonID="List Card Checkbox 1"
@ -94,7 +94,7 @@
/> />
<listCard <listCard
isMultiSelect isMultiSelect
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Checkbox 3" buttonID="List Card Checkbox 3"
@ -115,7 +115,7 @@
<legend class="sr-only">Functioning as Checkbox</legend> <legend class="sr-only">Functioning as Checkbox</legend>
<listCard <listCard
isMultiSelect isMultiSelect
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Checkbox" buttonID="List Card Checkbox"
@ -132,7 +132,7 @@
<legend class="sr-only">Checkbox no Description</legend> <legend class="sr-only">Checkbox no Description</legend>
<listCard <listCard
isMultiSelect isMultiSelect
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Checkbox b" buttonID="List Card Checkbox b"
@ -149,7 +149,7 @@
<legend class="sr-only">Functioning as Radio Button</legend> <legend class="sr-only">Functioning as Radio Button</legend>
<listCard <listCard
isRadio isRadio
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Radio Button" buttonID="List Card Radio Button"
@ -166,7 +166,7 @@
<legend class="sr-only">Radio Button no Description</legend> <legend class="sr-only">Radio Button no Description</legend>
<listCard <listCard
isRadio isRadio
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Radio Button b" buttonID="List Card Radio Button b"
@ -184,7 +184,7 @@
<listCard <listCard
isMultiSelect isMultiSelect
isWide isWide
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Horizontal Checkbox" buttonID="List Card Horizontal Checkbox"
@ -219,7 +219,7 @@
<legend class="sr-only">Horizontal Radio Button</legend> <legend class="sr-only">Horizontal Radio Button</legend>
<listCard <listCard
isWide 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" buttonLabel="Rear Window"
altText="" altText=""
buttonID="List Card Horizontal Radio Button" buttonID="List Card Horizontal Radio Button"
@ -236,7 +236,7 @@
<legend class="sr-only">Radio Button no Description</legend> <legend class="sr-only">Radio Button no Description</legend>
<listCard <listCard
isWide isWide
buttonImage="windshield-damage.svg" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield" buttonLabel="Windshield"
altText="" altText=""
buttonID="List Card Horizontal Radio Button b" 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; border-radius: $border-radius-lg;
color: $white; color: $white;
transition: all 150ms linear; transition: all 150ms linear;
white-space: nowrap; justify-content: center;
// white-space: nowrap;
&:hover { &:hover {
background: linear-gradient( background: linear-gradient(
270deg, 270deg,

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

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