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 = {
|
const pagePercentageMapper = {
|
||||||
vehicle: 4,
|
vehicle: 3.57,
|
||||||
"vehicle-damage": 16,
|
"vehicle-damage": 7.14,
|
||||||
estimate: 28,
|
estimate: 10.71,
|
||||||
"service-zip": 32,
|
"service-zip": 14.28,
|
||||||
"vin-lookup": 32,
|
"vin-lookup": 14.28,
|
||||||
"license-plate-lookup": 32,
|
"license-plate-lookup": 14.28,
|
||||||
"address-lookup": 32,
|
"address-lookup": 14.28,
|
||||||
"address-vehicles": 36,
|
"address-vehicles": 17.85,
|
||||||
"part-questions": 40,
|
"part-questions": 21.42,
|
||||||
"molding-questions": 40,
|
"molding-questions": 21.42,
|
||||||
"vehicle-parts": 40,
|
"vehicle-parts": 21.42,
|
||||||
"capability-questions": 40,
|
"capability-questions": 21.42,
|
||||||
quote: 48,
|
quote: 25,
|
||||||
"insurance-company": 52,
|
"insurance-company": 52,
|
||||||
"service-location": 60,
|
"service-location": 60,
|
||||||
schedule: 72,
|
schedule: 70.5,
|
||||||
"mobile-details": 76,
|
"mobile-details": 76,
|
||||||
"customer-details": 84,
|
"customer-details": 84,
|
||||||
"payment-method": 92,
|
"payment-method": 92,
|
||||||
|
|
|
||||||
|
|
@ -28,40 +28,21 @@
|
||||||
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
|
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body d-flex flex-column">
|
<div class="modal-body d-flex flex-column">
|
||||||
<textLink
|
<div class="step-grid">
|
||||||
linkType="newWindowLink"
|
<div class="bar-container">
|
||||||
text="Terms of service"
|
<progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
|
||||||
href="//www.safelite.com/terms-of-service"
|
<span class="dot1"></span>
|
||||||
target="_blank" />
|
<span class="dot2"></span>
|
||||||
<textLink
|
<span class="dot3"></span>
|
||||||
linkType="newWindowLink"
|
<span class="dot4"></span>
|
||||||
text="Your privacy choices"
|
</div>
|
||||||
href="//www.safelite.com/privacy-center"
|
<div class="d-flex flex-column justify-content-between">
|
||||||
target="_blank">
|
<div class="step-containers"><span class="step-number">Step 1 of 4</span><br><span class="step-name">Vehicle</span></div>
|
||||||
<template v-slot:after-text>
|
<div class="step-containers"><span class="step-number">Step 2 of 4</span><br><span class="step-name">Quote</span></div>
|
||||||
<img
|
<div class="step-containers"><span class="step-number">Step 3 of 4</span><br><span class="step-name">Schedule</span></div>
|
||||||
class="ccpa-icon"
|
<div class="step-containers"><span class="step-number">Step 4 of 4</span><br><span class="step-name">Review</span></div>
|
||||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
</div>
|
||||||
alt="Your privacy choices" />
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -69,8 +50,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import textLink from "@/ux-components/text-link/text-link";
|
|
||||||
import { Modal } from "bootstrap";
|
import { Modal } from "bootstrap";
|
||||||
|
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
||||||
import baseMixin from "@/mixins/base-mixin.js";
|
import baseMixin from "@/mixins/base-mixin.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -78,6 +59,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isActive: false,
|
isActive: false,
|
||||||
|
barOrientation: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -104,8 +86,8 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
textLink,
|
progressBar,
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -182,6 +164,8 @@ export default {
|
||||||
}
|
}
|
||||||
.modal-body {
|
.modal-body {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
.ccpa-icon {
|
.ccpa-icon {
|
||||||
width: 2.0625rem;
|
width: 2.0625rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -190,6 +174,48 @@ export default {
|
||||||
:deep(.navigation-link) {
|
:deep(.navigation-link) {
|
||||||
margin-bottom: 1.5rem;
|
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 {
|
.modal-fullscreen {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="progress-bar-outer">
|
<div :class="barClass">
|
||||||
<div class="progress-bar-inner" :style="progressStyle"></div>
|
<div class="progress-bar-inner" :style="progressStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -18,6 +18,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
vertical: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -45,10 +49,21 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
progressStyle() {
|
progressStyle() {
|
||||||
return {
|
if (this.vertical) {
|
||||||
width: this.displayedProgress + "%",
|
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>
|
</script>
|
||||||
|
|
@ -62,26 +77,36 @@ export default {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||||
.progress-bar-inner {
|
.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;
|
will-change: width;
|
||||||
height: 5px;
|
height: 100%;
|
||||||
background-color: $red;
|
background-color: $red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
progress {
|
.progress-bar-outer-vertical {
|
||||||
height: 5px;
|
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%;
|
width: 100%;
|
||||||
|
background-color: $red;
|
||||||
/* Firefox */
|
position: absolute;
|
||||||
appearance: none;
|
left: 0;
|
||||||
background-color: $gray-100;
|
top: 0;
|
||||||
border: 0;
|
border-radius: 50rem;
|
||||||
border-radius: $border-radius-pill;
|
|
||||||
box-shadow: $box-shadow-inset;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue