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

WIP add unique styles for two and three button options.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-16 09:11:33 -04:00
parent 8455534ef0
commit cebd5e7f81
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/digital-components/button-question/button-question.vue
View file

@ -191,7 +191,7 @@ export default {
classes = 'd-flex flex-row p-0'; classes = 'd-flex flex-row p-0';
break; break;
case 'listCard': case 'listCard':
classes = 'row g-2 justify-content-center'; classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
if (this.isWide) { if (this.isWide) {
classes += ' flex-column'; classes += ' flex-column';
} }
@ -226,6 +226,15 @@ export default {
break; break;
default: default:
} }
// Determine number of buttons and add class accordingly.
// This is to accommodate unique spacing per design specs.
if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) {
classes += ' two-list-card-width';
}
if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) {
classes += ' one-list-card-width';
}
return classes; return classes;
}, },

10
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -4,7 +4,7 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition replace-options-question">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
@ -469,9 +469,9 @@ export default {
<style lang="scss"> <style lang="scss">
.replace-options-question { .replace-options-question {
.two-list-card-width { .two-list-card-width {
width: 100%; width: 100%;
flex: 0 auto; flex: 0 auto;
} }
} }
</style> </style>