Merge pull request #1358 from Safelite/CSR-1593-list-button-responsive-update

CSR-1593 set button width for specific pages.
This commit is contained in:
bmauger 2023-09-25 15:26:06 -04:00 committed by GitHub
commit 9ec4c2aef5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 3 deletions

View file

@ -57,7 +57,10 @@
cmsWidgetName="AlertNoShopsWidget" cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert" v-if="displayNoShopsAlert"
alertClass="alert-warning" /> alertClass="alert-warning" />
</div>
</div>
<div class="row justify-content-md-center appointment-type">
<div class="col-md-8">
<appointmentTypeQuestion <appointmentTypeQuestion
v-model="selectedAppointmentType" v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed" v-show="isAppointmentTypeDisplayed"
@ -68,7 +71,10 @@
groupName="appointmentTypeQuestion" groupName="appointmentTypeQuestion"
cmsWidgetName="AppointmentTypeQuestionWidget" cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" /> validationRules="option-required" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions <mobileLocationModalQuestions
customComponentId="mobileLocationQuestions" customComponentId="mobileLocationQuestions"
v-if="selectedAppointmentType === 'Mobile'" v-if="selectedAppointmentType === 'Mobile'"
@ -490,6 +496,14 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.appointment-type {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
}
.question-text { .question-text {
& > span { & > span {
text-align: center; text-align: center;

View file

@ -1,6 +1,6 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles"> <div class="container-fluid page-container-grouped-styles vehicle-damage">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@ -544,3 +544,14 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.vehicle-damage {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
}
</style>