jonathan/mmcm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP MMCM

Browse Source
This commit is contained in:
Jonathan Chevalier
2022-09-28 18:03:55 +02:00
parent c0ef555cea
commit 96c063865a
7 changed files with 198 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@@ -20,6 +20,7 @@
"@vitejs/plugin-vue": "^3.1.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"sass": "^1.55.0",
"tailwindcss": "^3.1.8",
"vite": "^3.1.0"
}
@@ -1014,6 +1015,12 @@
"node": ">= 0.4.0"
}
},
"node_modules/immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1488,6 +1495,23 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/sass": {
"version": "1.55.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
"integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2310,6 +2334,12 @@
"function-bind": "^1.1.1"
}
},
"immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2589,6 +2619,17 @@
"queue-microtask": "^1.2.2"
}
},
"sass": {
"version": "1.55.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
"integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

1
package.json
View File

@@ -21,6 +21,7 @@
"@vitejs/plugin-vue": "^3.1.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"sass": "^1.55.0",
"tailwindcss": "^3.1.8",
"vite": "^3.1.0"
}

2
src/App.vue
View File

@@ -2,11 +2,13 @@
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Home from './components/Home.vue'
import Wizard from "./components/Wizard.vue";
</script>
<template>
<div class="PARA">
<main id="product">
<wizard></wizard>
<router-view></router-view>
</main>
</div>

151
src/components/Wizard.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<ol class="step-indicator">
<li class="active">
<div class="step"><i class="fa-regular fa-location-dot fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>1</span>: <span>Mon adresse</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-file-medical fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>2</span>: <span>Mon ordonnance</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-truck fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>3</span>: <span>Ma livraison</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-calendar-days fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>4</span>: <span>Date</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-circle-check fa-fw"></i></div>
<div class="caption d-none d-sm-block">Step <span>5</span>: <span>Confirmation</span></div>
</li>
</ol>
</template>
<script>
export default {
name: "Wizard"
}
</script>
<style lang="scss">
$wizard-color-neutral: #ccc !default;
$wizard-color-active: #4183D7 !default;
$wizard-color-complete: #87D37C !default;
$wizard-step-width-height: 64px !default;
$wizard-step-font-size: 24px !default;
@import 'https://fonts.googleapis.com/css?family=Roboto';
body {
padding: 0;
margin: 0;
background-color: #f6f6f6;
font-family: 'Roboto', sans-serif;
}
.container {
background-color: #fff;
}
.step-wrapper {
padding: 20px 0;
display: none;
&.active {
display: block;
}
}
.step-indicator {
border-collapse: separate;
display: table;
margin-left: 0px;
position: relative;
table-layout: fixed;
text-align: center;
vertical-align: middle;
padding-left: 0;
padding-top: 20px;
li {
display: table-cell;
position: relative;
float: none;
padding: 0;
width: 1%;
&:after {
background-color: $wizard-color-neutral;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%;
top: $wizard-step-width-height*0.5;
}
&:after {
left: 50%;
}
&:last-child {
&:after {
display: none;
}
}
&.active {
.step {
border-color: $wizard-color-active;
color: $wizard-color-active;
}
.caption {
color: $wizard-color-active;
}
}
&.complete {
&:after {
background-color: $wizard-color-complete;
}
.step {
border-color: $wizard-color-complete;
color: $wizard-color-complete;
}
.caption {
color: $wizard-color-complete;
}
}
}
.step {
background-color: #fff;
border-radius: 50%;
border: 1px solid $wizard-color-neutral;
color: $wizard-color-neutral;
font-size: $wizard-step-font-size;
height: $wizard-step-width-height;
line-height: $wizard-step-width-height;
margin: 0 auto;
position: relative;
width: $wizard-step-width-height;
z-index: 1;
&:hover {
cursor: pointer;
}
}
.caption {
color: $wizard-color-neutral;
padding: 11px 16px;
}
}
</style>

2
src/views/address-check.vue
View File

@@ -1,7 +1,6 @@
<template>
<h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
<div class="input-group mb-3">
<div class="input-group-text">
<i v-if="isSearching" class="fa-solid fa-circle-notch fa-spin fa-fw color-success"></i>
@@ -27,6 +26,7 @@
<script>
import {useMMCMStore} from '../stores/mmcm.js'
export default {
setup() {
const store = useMMCMStore()

608
src/views/delivery-option-step-1.vue
View File

@@ -1,23 +1,4 @@
<template>
<!--
<div class="form-register">
<div class="steps clearfix"><ul role="tablist"><li role="tab" aria-disabled="false" class="first current" aria-selected="true"><a id="form-total-t-0" href="#form-total-h-0" aria-controls="form-total-p-0"><span class="current-info audible"> </span><div class="title">
<span class="step-icon"> <i class="fa-solid fa-user"></i> </span>
<span class="step-text">Ordonnance</span>
</div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-1" href="#form-total-h-1" aria-controls="form-total-p-1"><div class="title">
<span class="step-icon"><i class="zmdi zmdi-lock"></i></span>
<span class="step-text">Livraison</span>
</div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-2" href="#form-total-h-2" aria-controls="form-total-p-2"><div class="title">
<span class="step-icon"><i class="zmdi zmdi-card"></i></span>
<span class="step-text">Date</span>
</div></a></li><li role="tab" aria-disabled="false" class="last"><a id="form-total-t-3" href="#form-total-h-3" aria-controls="form-total-p-3"><div class="title">
<span class="step-icon"><i class="zmdi zmdi-receipt"></i></span>
<span class="step-text">Confirmation</span>
</div></a></li></ul></div>
</div>
-->
<div class="card">
<div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
@@ -86,593 +67,4 @@ export default {
<style scoped>
.form-register {
width: 100%;
display: flex;
}
.form-register .steps {
margin-bottom: 33px;
}
.form-register .steps ul {
display: flex;
list-style: none;
padding-left: 108px;
text-align: left;
}
.form-register .steps li,
.form-register .steps li.current {
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
position: relative;
}
.form-register .steps li .current-info {
display: none;
}
.form-register .steps li a {
text-decoration: none;
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
}
.form-register .steps li a .title span {
display: block;
}
.form-register .steps li a .title .step-icon {
width: 60px;
height: 60px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #ccc;
margin: 0 auto;
position: relative;
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
color: #fff;
font-size: 25.6px;
margin-right: 108px;
}
.form-register .steps li a .step-icon i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.form-register .steps li .step-icon::before,
.form-register .steps li:last-child .step-icon::after {
position: absolute;
content: "";
background: #e5e5e5;
width: 108px;
height: 2px;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.form-register .steps li .step-icon::before {
right: 100%;
}
.form-register .steps li:last-child .step-icon::after {
left: 100%;
}
.form-register .steps li.current a .step-icon,
.form-register .steps li.current a:active .step-icon,
.form-register .steps li.done a .step-icon,
.form-register .steps li.done a:active .step-icon {
background: #24c1e8;
}
.form-register .steps .current .step-icon::before,
.form-register .steps .current:last-child .step-icon::after,
.form-register .steps .done .step-icon::before {
background: #24c1e8;
}
.form-register .steps li a .step-text {
color: #999;
font-weight: 400;
font-size: 18px;
padding: 14px 0 8px;
}
.form-register .steps .current .step-text,
.form-register .steps .done .step-text {
color: #333;
}
.form-register .content h2 {
display: none;
}
.form-register .content .inner h3 {
font-size: 22px;
color: #333;
font-weight: 700;
margin: 0;
padding-bottom: 18px;
padding-top: 5px;
}
.form-register .content .form-total-p-1 .inner h3 {
padding-bottom: 13px;
padding-top: 0;
}
.form-register .content #form-total-p-3 .inner h3 {
padding-bottom: 5px;
}
.form-register .content .inner h4 {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0;
}
.inner .form-row {
display: flex;
margin: 0 -12px;
position: relative;
}
.form-row.form-row-date.form-row-date-1 {
margin-top: 50px;
margin-bottom: -18px;
}
.inner .form-row .form-holder {
width: 50%;
padding: 0 12px;
margin-bottom: 15px;
position: relative;
}
.inner .form-row .form-holder.form-holder-1 {
width: 84.1%;
}
.inner .form-row .form-holder.form-holder-2 {
width: 100%;
position: relative;
}
.inner .form-row .form-row-inner {
position: relative;
}
.inner .form-row .form-holder .label {
position: absolute;
top: -3px;
left: 10px;
font-size: 16px;
font-weight: 400;
color: #666;
transform-origin: 0 0;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
}
.inner .form-row .form-holder .border {
position: absolute;
bottom: 31px;
left: 0;
height: 2px;
width: 100%;
background: #6bc734;
transform: scaleX(0);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-ms-transform: scaleX(0);
transform-origin: 0 0;
transition: all .15s ease;
-webkit-transition: all .15s ease;
-moz-transition: all .15s ease;
-o-transition: all .15s ease;
-ms-transition: all .15s ease;
}
.inner .form-row #radio {
color: #666;
font-weight: 400;
font-size: 16px;
margin: 8px 12px;
}
.inner .form-row #checkbox {
margin: 10px 0 28px 11px;
font-size: 15px;
color: #666;
font-weight: 400;
}
.inner .form-row .form-holder label.special-label {
display: inline-block;
float: left;
margin-top: 25px;
padding-right: 20px;
color: #666;
font-size: 16px;
font-weight: 400;
}
.inner .form-row .form-holder label.pay-1-label,
.inner .form-row .form-holder label.pay-2-label {
width: 190px;
height: 95px;
border: 1px solid #e5e5e5;
display: block;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-right: 15px;
text-align: center;
color: #666;
font-size: 16px;
font-weight: 400;
margin-bottom: 5px;
}
.inner .form-row .form-holder label.pay-1-label img,
.inner .form-row .form-holder label.pay-2-label img {
padding-top: 15px;
padding-bottom: 8px;
}
.inner .form-row.form-row-date .form-holder select {
float: left;
width: 19%;
margin-right: 20px;
}
.inner .form-row .form-holder input,
.inner .form-row .form-holder select {
width: 100%;
padding: 13px 10px 8px;
border: none;
border-bottom: 2px solid #e5e5e5;
appearance: unset;
-moz-appearance: unset;
-webkit-appearance: unset;
-o-appearance: unset;
-ms-appearance: unset;
outline: none;
-moz-outline: none;
-webkit-outline: none;
-o-outline: none;
-ms-outline: none;
font-family: 'Roboto', sans-serif;
font-weight: 400;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.inner .form-row .form-holder input {
font-size: 18px;
color: #333;
font-weight: 700;
}
.inner .form-row .form-holder input#pay-1,
.inner .form-row .form-holder input#pay-2 {
display: none;
}
.inner .form-row .form-holder select {
font-size: 15px;
color: #666;
background: #fff url('../images/wizard_v4_icon.png') no-repeat scroll;
background-position: right 0 center;
z-index: 1;
cursor: pointer;
position: relative;
}
.inner .form-row .form-holder select:focus {
border-bottom: 2px solid #24c1e8;
}
.inner .form-row .form-holder .form-control:focus,
.inner .form-row .form-holder .form-control:valid {
border-bottom: 2px solid #24c1e8;
margin-top: 21px;
}
.inner .form-row .form-holder .form-control:focus + .label,
.inner .form-row .form-holder .form-control:valid + .label {
transform: translateY(-23px) scale(1);
-o-transform: translateY(-23px) scale(1);
-ms-transform: translateY(-23px) scale(1);
-moz-transform: translateY(-23px) scale(1);
-webkit-transform: translateY(-23px) scale(1);
color: #24c1e8;
}
.inner .form-row .form-holder .form-control:focus + .border,
.inner .form-row .form-holder .form-control:valid + .border {
transform: scaleX(1);
-o-transform: scaleX(1);
-ms-transform: scaleX(1);
-moz-transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.inner .form-row .form-holder input#pay-1:checked + label,
.inner .form-row .form-holder input#pay-2:checked + label {
border: none;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
}
.inner .form-row.table-responsive {
border: none;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 27px 0 -25px;
}
.inner .table-responsive .table {
width: 100%;
}
.inner .table-responsive tbody {
text-align: left;
}
.inner .table-responsive tr.space-row > td,
.inner .table-responsive tr.space-row > th {
padding: 17px 20px 14px;
border-top: 1px solid #e5e5e5;
}
.inner .table-responsive tr.space-row:last-child > td,
.inner .table-responsive tr.space-row:last-child > th {
border-bottom: none;
}
.inner .table-responsive tbody th {
color: #666;
font-size: 16px;
font-weight: 400;
width: 30%;
}
.inner .table-responsive tbody td {
color: #333;
font-size: 16px;
font-weight: 400;
}
.actions ul {
list-style: none;
padding-left: 0;
padding: 0 20px;
margin: 30px 0;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
}
.actions ul li.disabled {
opacity: 0;
}
.actions ul li {
padding: 0;
border: none;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-flex;
height: 45px;
width: 140px;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-o-align-items: center;
-ms-align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
background: #24c1e8;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.actions ul li:hover {
background: #1d97b5;
}
.actions ul li:first-child {
background: #999;
margin-left: 60.9%;
}
.actions ul li:first-child:hover {
background: #666;
}
.actions ul li a {
color: #fff;
text-decoration: none;
padding: 13px 34px;
}
/* Responsive */
@media screen and (max-width: 1199px) {
.wizard-v3-content {
margin: 180px 20px;
}
}
@media screen and (max-width: 991px) {
.form-register .steps ul {
padding-left: 0;
justify-content: space-around;
-o-justify-content: space-around;
-ms-justify-content: space-around;
-moz-justify-content: space-around;
-webkit-justify-content: space-around;
}
.form-register .steps li a .title {
text-align: center;
}
.form-register .steps li a .title .step-icon,
.form-register .steps li a .title .step-icon {
margin: 0 auto;
}
.form-register .steps li a .title .step-icon::before,
.form-register .steps li:last-child a .title .step-icon::after {
content: none;
}
.actions ul li:first-child {
margin-left: 0;
}
}
@media screen and (max-width: 767px) {
.inner .form-row.form-row-date .form-holder select {
width: 17.5%;
margin-right: 20px;
}
.inner .form-row .form-holder label.pay-1-label,
.inner .form-row .form-holder label.pay-2-label {
margin-bottom: 15px;
}
}
@media screen and (max-width: 575px) {
.wizard-v3-content {
width: 90%;
}
.wizard-form .wizard-header {
padding: 40px 20px 20px 20px;
}
.inner .form-row {
flex-direction: column;
-o-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
margin: 0;
}
.inner .form-row .form-holder {
width: 100%;
}
.inner .form-row .form-holder.form-holder-1 {
width: 100%;
}
.inner .form-row .form-holder {
padding: 0;
}
.inner .form-row .form-holder label.special-label {
float: none;
}
.inner .form-row.form-row-date .form-holder select {
float: none;
width: 100%;
margin-bottom: 20px;
margin-right: 0;
display: block;
}
.form-register .steps li a .title .step-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
.form-register .steps li a .step-text {
font-size: 12px;
}
.form-register .content {
padding: 35px 30px 60px;
}
.inner .form-row #radio {
margin-left: -2px;
}
.inner .form-row #checkbox {
margin-left: 0;
}
.actions ul li {
width: 120px;
}
.actions ul li a {
padding: 15px 24px;
}
}
</style>