CASH-1042 progress bar updates. WIP
This commit is contained in:
Bryan Mauger
parent
f7f6654915
commit
f5d67aa9f8
3 changed files with 117 additions and 66 deletions
|
|
@ -1,20 +1,20 @@
|
|||
const pagePercentageMapper = {
|
||||
vehicle: 4,
|
||||
"vehicle-damage": 16,
|
||||
estimate: 28,
|
||||
"service-zip": 32,
|
||||
"vin-lookup": 32,
|
||||
"license-plate-lookup": 32,
|
||||
"address-lookup": 32,
|
||||
"address-vehicles": 36,
|
||||
"part-questions": 40,
|
||||
"molding-questions": 40,
|
||||
"vehicle-parts": 40,
|
||||
"capability-questions": 40,
|
||||
quote: 48,
|
||||
vehicle: 3.57,
|
||||
"vehicle-damage": 7.14,
|
||||
estimate: 10.71,
|
||||
"service-zip": 14.28,
|
||||
"vin-lookup": 14.28,
|
||||
"license-plate-lookup": 14.28,
|
||||
"address-lookup": 14.28,
|
||||
"address-vehicles": 17.85,
|
||||
"part-questions": 21.42,
|
||||
"molding-questions": 21.42,
|
||||
"vehicle-parts": 21.42,
|
||||
"capability-questions": 21.42,
|
||||
quote: 25,
|
||||
"insurance-company": 52,
|
||||
"service-location": 60,
|
||||
schedule: 72,
|
||||
schedule: 70.5,
|
||||
"mobile-details": 76,
|
||||
"customer-details": 84,
|
||||
"payment-method": 92,
|
||||
|
|
|
|||
|
|
@ -28,40 +28,21 @@
|
|||
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
|
||||
</div>
|
||||
<div class="modal-body d-flex flex-column">
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Terms of service"
|
||||
href="//www.safelite.com/terms-of-service"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Your privacy choices"
|
||||
href="//www.safelite.com/privacy-center"
|
||||
target="_blank">
|
||||
<template v-slot:after-text>
|
||||
<img
|
||||
class="ccpa-icon"
|
||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||
alt="Your privacy choices" />
|
||||
</template>
|
||||
</textLink>
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Cookie preferences"
|
||||
href="javascript:OneTrust.ToggleInfoDisplay();" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Warranty"
|
||||
href="//www.safelite.com/national-lifetime-warranty"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Notice at collection"
|
||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||
target="_blank" />
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-start">
|
||||
© {{ new Date().getFullYear() }} Safelite Group
|
||||
<div class="step-grid">
|
||||
<div class="bar-container">
|
||||
<progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
|
||||
<span class="dot1"></span>
|
||||
<span class="dot2"></span>
|
||||
<span class="dot3"></span>
|
||||
<span class="dot4"></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="step-containers"><span class="step-number">Step 1 of 4</span><br><span class="step-name">Vehicle</span></div>
|
||||
<div class="step-containers"><span class="step-number">Step 2 of 4</span><br><span class="step-name">Quote</span></div>
|
||||
<div class="step-containers"><span class="step-number">Step 3 of 4</span><br><span class="step-name">Schedule</span></div>
|
||||
<div class="step-containers"><span class="step-number">Step 4 of 4</span><br><span class="step-name">Review</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,8 +50,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import { Modal } from "bootstrap";
|
||||
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
export default {
|
||||
|
|
@ -78,6 +59,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
barOrientation: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -104,8 +86,8 @@ export default {
|
|||
},
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
},
|
||||
progressBar,
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -182,6 +164,8 @@ export default {
|
|||
}
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.ccpa-icon {
|
||||
width: 2.0625rem;
|
||||
height: 1rem;
|
||||
|
|
@ -190,6 +174,48 @@ export default {
|
|||
:deep(.navigation-link) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.step-grid {
|
||||
display: grid;
|
||||
max-width: 140px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.step-containers {
|
||||
line-height: 1;
|
||||
}
|
||||
.bar-container {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
.dot1,
|
||||
.dot2,
|
||||
.dot3,
|
||||
.dot4 {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: $white;
|
||||
border-radius: 50rem;
|
||||
border: 1px solid $gray;
|
||||
left: 1px;
|
||||
}
|
||||
.dot1 {
|
||||
top: 1px;
|
||||
}
|
||||
.dot2 {
|
||||
top: 114px;
|
||||
}
|
||||
.dot3 {
|
||||
top: 227px;
|
||||
}
|
||||
.dot4 {
|
||||
top: 332px;
|
||||
}
|
||||
}
|
||||
.step-number {
|
||||
font-size: .75rem;
|
||||
}
|
||||
.step-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="progress-bar-outer">
|
||||
<div :class="barClass">
|
||||
<div class="progress-bar-inner" :style="progressStyle"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,6 +18,10 @@ export default {
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -45,10 +49,21 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
progressStyle() {
|
||||
return {
|
||||
width: this.displayedProgress + "%",
|
||||
};
|
||||
if (this.vertical) {
|
||||
return {
|
||||
height: this.displayedProgress + "%",
|
||||
width: "100%",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: this.displayedProgress + "%",
|
||||
height: "100%",
|
||||
};
|
||||
}
|
||||
},
|
||||
barClass() {
|
||||
return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -62,26 +77,36 @@ export default {
|
|||
margin-top: 0;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
.progress-bar-inner {
|
||||
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
|
||||
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: width;
|
||||
height: 5px;
|
||||
height: 100%;
|
||||
background-color: $red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
progress {
|
||||
height: 5px;
|
||||
.progress-bar-outer-vertical {
|
||||
background: $blue-100;
|
||||
width: 24px;
|
||||
height: 356px;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
overflow: hidden;
|
||||
border-radius: 50rem;
|
||||
.progress-bar-inner {
|
||||
transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
will-change: height !important;
|
||||
width: 100%;
|
||||
|
||||
/* Firefox */
|
||||
appearance: none;
|
||||
background-color: $gray-100;
|
||||
border: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
box-shadow: $box-shadow-inset;
|
||||
background-color: $red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue