save
This commit is contained in:
isUnknown
parent
10052aa9af
commit
7aa0ffb927
4 changed files with 95 additions and 74 deletions
|
|
@ -28,7 +28,7 @@
|
|||
max-height: calc(100vh - var(--gutter) * 2);
|
||||
}
|
||||
#dtl-page::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -39,7 +39,11 @@
|
|||
background-position: top center;
|
||||
background-attachment: fixed;
|
||||
filter: saturate(60%);
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
}
|
||||
#dtl-page > * {
|
||||
max-width: 73.25rem; /* 1172px */
|
||||
|
|
@ -52,7 +56,7 @@
|
|||
#dtl-page .card ul {
|
||||
list-style: initial;
|
||||
padding-left: 1.25em;
|
||||
padding-block: .25rem;
|
||||
padding-block: 0.25rem;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
|
@ -68,14 +72,14 @@
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
left: .5rem;
|
||||
top: .5rem;
|
||||
left: 0.5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
#dtl-btn[data-grade]::after,
|
||||
#dtl-btn .new {
|
||||
position: absolute;
|
||||
right: .25rem;
|
||||
top: .25rem;
|
||||
right: 0.25rem;
|
||||
top: 0.25rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
user-select: none;
|
||||
|
|
@ -89,20 +93,20 @@
|
|||
background: var(--color-primary-50);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-xs);
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
z-index: 10;
|
||||
}
|
||||
#dtl-btn .new::after {
|
||||
content: "";
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border: 2px solid var(--color-black);
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.333rem;
|
||||
right: -.333rem;
|
||||
top: -0.333rem;
|
||||
right: -0.333rem;
|
||||
}
|
||||
|
||||
/* Grades */
|
||||
|
|
@ -115,23 +119,23 @@
|
|||
}
|
||||
[data-grade="A"]::after {
|
||||
background-image: var(--icon-grade-A);
|
||||
background-color: rgba(0, 148, 91, .2);
|
||||
background-color: rgba(0, 148, 91, 0.2);
|
||||
}
|
||||
[data-grade="B"]::after {
|
||||
background-image: var(--icon-grade-B);
|
||||
background-color: rgba(94, 172, 13, .2);
|
||||
background-color: rgba(94, 172, 13, 0.2);
|
||||
}
|
||||
[data-grade="C"]::after {
|
||||
background-image: var(--icon-grade-C);
|
||||
background-color: rgba(238, 175, 16, .2);
|
||||
background-color: rgba(238, 175, 16, 0.2);
|
||||
}
|
||||
[data-grade="D"]::after {
|
||||
background-image: var(--icon-grade-D);
|
||||
background-color: rgba(242, 106, 79, .2);
|
||||
background-color: rgba(242, 106, 79, 0.2);
|
||||
}
|
||||
[data-grade="E"]::after {
|
||||
background-image: var(--icon-grade-E);
|
||||
background-color: rgba(243, 45, 47, .2);
|
||||
background-color: rgba(243, 45, 47, 0.2);
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
|
|
@ -179,7 +183,7 @@
|
|||
}
|
||||
#dtl-panel [role="tab"] {
|
||||
height: 2.5rem;
|
||||
padding: var(--space-12) .625rem;
|
||||
padding: var(--space-12) 0.625rem;
|
||||
color: var(--color-grey-400);
|
||||
font-weight: 500;
|
||||
white-space: pre;
|
||||
|
|
@ -210,13 +214,19 @@
|
|||
|
||||
#note-globale input[type="range"] {
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(243, 45, 47, 1) 0%, rgba(243, 45, 47, 1) 20%,
|
||||
rgba(242, 106, 79, 1) 20%, rgba(242, 106, 79, 1) 40%,
|
||||
rgba(238, 175, 16, 1) 40%, rgba(238, 175, 16, 1) 60%,
|
||||
rgba(94, 172, 13, 1) 60%, rgba(94, 172, 13, 1) 80%,
|
||||
rgba(0, 148, 91, 1) 80%, rgba(0, 148, 91, 1) 100%
|
||||
height: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(243, 45, 47, 1) 0%,
|
||||
rgba(243, 45, 47, 1) 20%,
|
||||
rgba(242, 106, 79, 1) 20%,
|
||||
rgba(242, 106, 79, 1) 40%,
|
||||
rgba(238, 175, 16, 1) 40%,
|
||||
rgba(238, 175, 16, 1) 60%,
|
||||
rgba(94, 172, 13, 1) 60%,
|
||||
rgba(94, 172, 13, 1) 80%,
|
||||
rgba(0, 148, 91, 1) 80%,
|
||||
rgba(0, 148, 91, 1) 100%
|
||||
);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
|
@ -276,25 +286,25 @@
|
|||
position: absolute;
|
||||
}
|
||||
#positionnement #design {
|
||||
top: calc(50% - .666em);
|
||||
top: calc(50% - 0.666em);
|
||||
right: calc(50% + 5rem);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
#positionnement #design::after {
|
||||
content: 'Complexe';
|
||||
content: "Complexe";
|
||||
bottom: -1.333em;
|
||||
right: 0;
|
||||
}
|
||||
#positionnement #design+dd::before {
|
||||
content: 'Design';
|
||||
top: calc(50% - .666em);
|
||||
#positionnement #design + dd::before {
|
||||
content: "Design";
|
||||
top: calc(50% - 0.666em);
|
||||
left: calc(50% + 5rem);
|
||||
transform: translateY(-50%);
|
||||
color: var(--color-grey-400);
|
||||
}
|
||||
#positionnement #design+dd::after {
|
||||
content: 'Sobre';
|
||||
top: calc(50% + .666em);
|
||||
#positionnement #design + dd::after {
|
||||
content: "Sobre";
|
||||
top: calc(50% + 0.666em);
|
||||
left: calc(50% + 5rem);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -303,18 +313,18 @@
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
#positionnement #poids::after {
|
||||
content: ' Léger';
|
||||
content: " Léger";
|
||||
position: static;
|
||||
}
|
||||
#positionnement #poids+dd::before {
|
||||
content: 'Poids';
|
||||
#positionnement #poids + dd::before {
|
||||
content: "Poids";
|
||||
bottom: 0;
|
||||
left: calc(50% - 1.5em);
|
||||
transform: translateX(-50%);
|
||||
color: var(--color-grey-400);
|
||||
}
|
||||
#positionnement #poids+dd::after {
|
||||
content: ' Lourd';
|
||||
#positionnement #poids + dd::after {
|
||||
content: " Lourd";
|
||||
bottom: 0;
|
||||
left: calc(50% + 1.5em);
|
||||
transform: translateX(-50%);
|
||||
|
|
@ -322,11 +332,11 @@
|
|||
#positionnement .dot {
|
||||
position: absolute;
|
||||
top: calc(50% + 0.6875rem);
|
||||
left: calc(50% - .25rem);
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
left: calc(50% - 0.25rem);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: var(--color-white);
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -348,17 +358,16 @@
|
|||
width: var(--gauge-outer-size);
|
||||
height: var(--gauge-outer-size);
|
||||
border-radius: 50%;
|
||||
background-image:
|
||||
conic-gradient(
|
||||
from 0deg at 50% 50%,
|
||||
#EEAF10 0deg,
|
||||
#5EAC0D 72deg,
|
||||
#00945B 144deg,
|
||||
#00945B 180deg,
|
||||
#F32D2F 180deg,
|
||||
#F26A4F 216deg,
|
||||
#EEAF10 360deg
|
||||
);
|
||||
background-image: conic-gradient(
|
||||
from 0deg at 50% 50%,
|
||||
#eeaf10 0deg,
|
||||
#5eac0d 72deg,
|
||||
#00945b 144deg,
|
||||
#00945b 180deg,
|
||||
#f32d2f 180deg,
|
||||
#f26a4f 216deg,
|
||||
#eeaf10 360deg
|
||||
);
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
|
|
@ -371,7 +380,7 @@
|
|||
.gauge::after {
|
||||
content: attr(data-value);
|
||||
display: block;
|
||||
padding: 1.125rem 1.25rem 1.125rem .875rem;
|
||||
padding: 1.125rem 1.25rem 1.125rem 0.875rem;
|
||||
font-size: var(--text-lg);
|
||||
width: var(--gauge-inner-size);
|
||||
height: var(--gauge-inner-size);
|
||||
|
|
@ -380,14 +389,15 @@
|
|||
position: absolute;
|
||||
top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
|
||||
left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
.gauge::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(var(--gauge-outer-size) / 2);
|
||||
height: var(--gauge-outer-size);
|
||||
|
|
@ -408,7 +418,7 @@
|
|||
right: unset;
|
||||
}
|
||||
.gauge label::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(var(--gauge-outer-size) / 2);
|
||||
height: var(--gauge-outer-size);
|
||||
|
|
@ -427,7 +437,7 @@
|
|||
transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03);
|
||||
}
|
||||
.gauge label::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--gauge-outer-size) - 2px);
|
||||
|
|
@ -447,8 +457,8 @@
|
|||
left: -1rem;
|
||||
right: -1rem;
|
||||
font-weight: 500;
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.gauge input[type="range"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
|
||||
/* Content */
|
||||
.dialog__inner {
|
||||
background: var(--dialog-inner-background, #F7F7F7);
|
||||
background: var(--dialog-inner-background, #f7f7f7);
|
||||
height: 100%;
|
||||
}
|
||||
.dialog__inner > header {
|
||||
|
|
@ -101,14 +101,14 @@
|
|||
right: var(--space-8);
|
||||
}
|
||||
.dialog__inner .options-selector + button::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: calc(-3rem - 1px);
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
width: 3rem;
|
||||
background: linear-gradient(to right, transparent, #FBFBFB);
|
||||
background: linear-gradient(to right, transparent, #fbfbfb);
|
||||
}
|
||||
.dialog [data-pc-section="content"] [role="tablist"] {
|
||||
height: 3.5rem;
|
||||
|
|
@ -168,10 +168,9 @@
|
|||
color: var(--color-white);
|
||||
}
|
||||
|
||||
|
||||
/* Virtual Sample */
|
||||
.dialog#virtual-sample {
|
||||
--dialog-inner-background: #F7F7F7;
|
||||
--dialog-inner-background: #f7f7f7;
|
||||
}
|
||||
.dialog#virtual-sample [data-pc-section="header"] h2 {
|
||||
left: 22.5rem;
|
||||
|
|
@ -206,7 +205,13 @@
|
|||
gap: 0;
|
||||
padding: var(--space-32);
|
||||
color: var(--color-white);
|
||||
background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
hsla(0, 0%, 10%, 0.5) 0%,
|
||||
hsla(0, 0%, 10%, 0.9) 50%,
|
||||
hsla(0, 0%, 10%, 0.9) 100%
|
||||
),
|
||||
var(--cover), var(--color-black);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: var(--rounded-xl);
|
||||
|
|
@ -246,9 +251,6 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
#optimization-request-dialog [data-pc-section="header"] [data-icon="leaf"] {
|
||||
|
||||
}
|
||||
#project-request-dialog h2,
|
||||
#optimization-request-dialog h2 {
|
||||
|
|
@ -298,5 +300,5 @@
|
|||
}
|
||||
#project-request-dialog [data-icon="leaf"]::before,
|
||||
#optimization-request-dialog [data-icon="leaf"]::before {
|
||||
transform: translateY(.125rem);
|
||||
}
|
||||
transform: translateY(0.125rem);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,17 +161,20 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="proposals.length > 1" class="p-16">
|
||||
<footer v-if="proposals.length === 1" class="p-16">
|
||||
<button
|
||||
class="btn btn--white w-full"
|
||||
@click="isOptimizationDialogOpen = true"
|
||||
@click="handleOptimizationButtonClick"
|
||||
>
|
||||
Demander une expertise d’optimisation
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</aside>
|
||||
<OptimizationRequestDialog v-if="isOptimizationDialogOpen" />
|
||||
<OptimizationRequestDialog
|
||||
v-if="isOptimizationDialogOpen"
|
||||
@close="isOptimizationDialogOpen = false"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import OptimizationRequestDialog from "./OptimizationRequestDialog.vue";
|
||||
|
|
@ -180,6 +183,7 @@ import "dayjs/locale/fr";
|
|||
import { storeToRefs } from "pinia";
|
||||
import { ref, onBeforeUnmount, computed } from "vue";
|
||||
import { useDialogStore } from "../../stores/dialog";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const { proposals } = defineProps({
|
||||
proposals: Array,
|
||||
|
|
@ -225,4 +229,8 @@ function close() {
|
|||
function preventClose(event) {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
function handleOptimizationButtonClick() {
|
||||
isOptimizationDialogOpen.value = true;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
header="Demander un rendez-vous"
|
||||
class="dialog"
|
||||
:closeOnEscape="true"
|
||||
style="z-index: 9999"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="font-serif text-lg">Demander un rendez-vous</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue