Merge branch 'develop' into feature/CSR-347
This commit is contained in:
Adam Caouette
commit
47a3f97c61
5 changed files with 224 additions and 89 deletions
|
|
@ -11,8 +11,33 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="mb-0 text-center">We're processing your information.</p>
|
||||
<p class="mb-0 text-center">This could take up to 30 seconds...</p>
|
||||
<div class="text-container slide">
|
||||
<p>Finishing up
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Nearly there
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Generating your quote
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Finding your glass
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Assessing your damage
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,10 +84,6 @@ export default {
|
|||
overflow-y: auto;
|
||||
outline: 0;
|
||||
background: $gray-100;
|
||||
p {
|
||||
font-family: Roboto;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.tagbg {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
|
||||
|
|
@ -80,5 +101,136 @@ export default {
|
|||
border: 0.45em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
background: rgb(245,245,245);
|
||||
background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.slide p {
|
||||
animation: slide-in 20s ease-in-out 1s forwards 1;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin: 0 175px;
|
||||
transform: translateX(-2346px);
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(-2346px)
|
||||
}
|
||||
11% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
22% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
33% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
44% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
55% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
66% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
77% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
88% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-40px)
|
||||
}
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
animation: blinking-elipsis .75s linear infinite;
|
||||
@keyframes blinking-elipsis {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
animation: blinking-elipsis-2 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
21% {
|
||||
opacity: 0;
|
||||
}
|
||||
22% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
animation: blinking-elipsis-3 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-3 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
43% {
|
||||
opacity: 0;
|
||||
}
|
||||
44% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1
src/common-components/menu-button/menu-button.spec.js
Normal file
1
src/common-components/menu-button/menu-button.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
53
src/common-components/menu-button/menu-button.vue
Normal file
53
src/common-components/menu-button/menu-button.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menuButton',
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue-400;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<menuButton/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
|
||||
|
|
@ -1064,81 +1074,6 @@
|
|||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Dismissible Alert"
|
||||
alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
|
||||
v-bind:isDismissible="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="NON-Dismissible Alert"
|
||||
alertCopy="This is an example of a NON-DISMISSIBLE alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-warning"
|
||||
alertHeadline="Warning Alert"
|
||||
alertCopy="This is an example of a WARNING alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-info"
|
||||
alertHeadline="Info Alert"
|
||||
alertCopy="This is an example of a INFO alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="Danger Alert"
|
||||
alertCopy="This is an example of a DANGER alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="No Body Copy Alert"
|
||||
alertCopy=""
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Multi-Paragraph Alert"
|
||||
:alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -1147,7 +1082,6 @@
|
|||
import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import checkbox from "@/ux-components/checkbox/checkbox";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
|
@ -1155,6 +1089,7 @@
|
|||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import menuButton from "@/common-components/menu-button/menu-button";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -1162,7 +1097,6 @@
|
|||
buttonBack,
|
||||
listCard,
|
||||
listButton,
|
||||
alert,
|
||||
listButtonHorizontal,
|
||||
checkbox,
|
||||
radio,
|
||||
|
|
@ -1170,6 +1104,7 @@
|
|||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
vinInformation,
|
||||
menuButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
|
|||
// Components
|
||||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
import FormTest from "@/layouts/form-test/form-test.vue";
|
||||
import Modal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
|
||||
|
||||
const routes = [
|
||||
|
|
@ -35,11 +34,6 @@ const routes = [
|
|||
name: "FormTest",
|
||||
component: FormTest,
|
||||
},
|
||||
{
|
||||
path: "/loading-modal", // This is a temporary route for testing.
|
||||
name: "Modal",
|
||||
component: Modal,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
|
|||
Loading…
Reference in a new issue