gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
gcch 2026-04-27 18:47:34 +02:00
commit 70b534573d
32 changed files with 842 additions and 752 deletions
Download patch file Download diff file Expand all files Collapse all files

343
web/app/themes/haiku-atelier-2024/assets/css/main.css
View file

@ -4,66 +4,16 @@
font-weight: 100 900;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format(woff2) tech(variations),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format("woff2-variations"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf")
format("truetype");
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02BB-02BC,
U+02C6,
U+02DA,
U+02DC,
U+2000-206F,
U+2074,
U+20AC,
U+2122,
U+2191,
U+2193,
U+2212,
U+2215,
U+FEFF,
U+FFFD;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf") format("truetype");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Lato;
font-weight: 100 900;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format(woff2) tech(variations),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format("woff2-variations"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf")
format("truetype");
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02BB-02BC,
U+02C6,
U+02DA,
U+02DC,
U+2000-206F,
U+2074,
U+20AC,
U+2122,
U+2191,
U+2193,
U+2212,
U+2215,
U+FEFF,
U+FFFD;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf") format("truetype");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Myriad;
@ -71,10 +21,7 @@
font-style: normal;
font-display: swap;
font-stretch: 70% 110%;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf")
format("truetype");
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype");
}
@font-face {
font-family: Myriad;
@ -82,19 +29,15 @@
font-style: italic;
font-display: swap;
font-stretch: 70% 110%;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf")
format("truetype");
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype");
}
:root {
/* Couleurs */
--couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%);
--couleur-blanc-fond: oklch(100% 0 0deg / 80%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 60%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%);
@ -139,6 +82,7 @@
* 1. Utilise un meilleur modèle de boîte.
*/
html {
scrollbar-gutter: stable;
box-sizing: border-box; /* 1 */
}
@ -216,16 +160,17 @@ button, input, select, textarea {
/*
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
*/
@media (prefers-reduced-motion) {
/* @media (prefers-reduced-motion) {
*, *::before, *::after {
scroll-behavior: auto !important;
transition: none !important;
animation-duration: 0s !important;
}
@view-transition {
navigation: none !important;
}
}
} */
/*
* 2. Rendu spécifique du texte pour Safari/iOS.
* 3. Rendu plus précis du texte.
@ -233,8 +178,7 @@ button, input, select, textarea {
html {
font: 1rem/var(--hauteur-ligne-classique) Lato;
font-optical-sizing: auto;
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
contextual;
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
font-kerning: normal;
color: var(--couleur-noir);
text-decoration-skip-ink: auto;
@ -265,52 +209,50 @@ button {
all: initial;
cursor: pointer;
box-sizing: border-box;
font-family: Lato;
font: inherit;
text-align: center;
letter-spacing: inherit;
outline: 2px dashed transparent;
outline-offset: -2px;
transition: 0.2s background, 0.2s color, 0.2s outline-color;
transition: 0.2s background, 0.2s font-weight, 0.2s color, 0.2s outline-color;
}
button:not[disabled]:focus-visible {
button:focus-visible {
z-index: 5;
outline-color: var(--couleur-noir);
}
button:not[disabled]:active {
color: var(--couleur-blanc) !important;
background: var(--couleur-noir) !important;
button:active {
background: var(--arriere-plan-points);
}
@media (hover: hover) {
button:not[disabled]:hover {
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
}
}
button:disabled, button[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px/2px 2px;
button:disabled {
color: inherit;
background: var(--arriere-plan-points);
outline-color: transparent;
}
button {
/* Particularismes. */
}
button.bouton-case-pleine {
width: 100%;
height: 100%;
}
button.bouton-case-pleine.bouton-blanc-sur-noir {
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible {
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
}
button.bouton-blanc-sur-noir {
button.bouton-inverse {
color: var(--couleur-blanc);
background: var(--couleur-noir);
}
button.bouton-inverse:focus-visible {
outline-color: var(--couleur-blanc);
}
button.bouton-inverse:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
button.bouton-inverse:disabled {
color: var(--couleur-blanc);
}
@media (hover: hover) {
button.bouton-fleche {
background: initial;
button.bouton-inverse:hover {
color: var(--couleur-noir);
background: var(--couleur-gris);
}
}
button.bouton-retour-haut {
@ -335,12 +277,18 @@ button.bouton-retour-haut img {
}
button.bouton-retour-haut[data-actif] {
visibility: visible;
opacity: 60%;
opacity: 50%;
}
@media (hover: hover) {
button.bouton-retour-haut[data-actif]:hover {
opacity: 100%;
background: var(--couleur-jaune-fond);
background: var(--couleur-gris-fond);
}
}
@media (hover: hover) {
button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
@ -403,41 +351,32 @@ input, select, textarea {
background: var(--couleur-gris);
transition: 0.2s background;
}
input:focus-visible,
input:focus-within,
input:active,
select:focus-visible,
select:focus-within,
select:active,
textarea:focus-visible,
textarea:focus-within,
textarea:active {
input:focus-visible, input:focus-within, select:focus-visible, select:focus-within, textarea:focus-visible, textarea:focus-within {
z-index: 10;
outline: 2px dashed var(--couleur-noir);
}
input:disabled,
input[disabled],
select:disabled,
select[disabled],
textarea:disabled,
textarea[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px/2px 2px;
input:active, select:active, textarea:active {
background: var(--arriere-plan-points);
}
input:disabled, select:disabled, textarea:disabled {
background: var(--arriere-plan-points);
outline-color: transparent;
}
input:is([type="email"], [type="text"], [type="tel"])::placeholder, textarea::placeholder {
input:is([type=email], [type=text], [type=tel])::placeholder, textarea::placeholder {
text-transform: lowercase;
letter-spacing: var(--espacement-inter-lettres-etendu-s);
}
input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::selection {
input:is([type=email], [type=text], [type=tel])::selection, textarea::selection {
color: var(--couleur-blanc);
background: var(--couleur-noir);
}
input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
background: var(--couleur-gris-fonce);
input:is([type=email], [type=text], [type=tel]):user-valid, textarea:user-valid {
font-weight: 500;
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
input:is([type=email], [type=text], [type=tel]):user-invalid, textarea:user-invalid {
background: var(--couleur-gris);
}
@ -445,7 +384,7 @@ input, label, select, textarea {
cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
input[type=checkbox], input[type=radio] {
width: var(--espace-l);
height: var(--espace-l);
padding: initial;
@ -453,50 +392,49 @@ input[type="checkbox"], input[type="radio"] {
appearance: none;
transition: 0.2s background;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
input[type=checkbox]:checked, input[type=radio]:checked {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
input[type=checkbox]:checked::before, input[type=radio]:checked::before {
content: "x";
position: relative;
bottom: 0.1rem;
left: 0.35rem;
}
@media (hover: hover) {
input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
input[type=checkbox]:checked:hover, input[type=radio]:checked:hover {
color: var(--couleur-noir);
}
}
input[type="checkbox"]:not(:checked):user-valid, input[type="radio"]:not(:checked):user-valid {
input[type=checkbox]:not(:checked):user-valid, input[type=radio]:not(:checked):user-valid {
background: initial;
}
input[type="checkbox"], input[type="radio"] {
input[type=checkbox], input[type=radio] {
/*
* 1. Pour un alignement parfait du label avec la case à cocher.
*/
}
label:has(~ input[type="checkbox"], ~ input[type="radio"]),
input[type="checkbox"] + label,
input[type="radio"] + label {
label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label {
padding-top: 1px; /* 1 */
font-size: 0.9rem;
}
@media (hover: hover) {
input[type="checkbox"]:hover, input[type="radio"]:hover {
input[type=checkbox]:hover, input[type=radio]:hover {
background: var(--couleur-gris-fonce);
}
}
input[type="radio"] {
input[type=radio] {
border-radius: 100%;
appearance: initial;
}
input[type="radio"]:checked {
input[type=radio]:checked {
display: inline-flex;
place-content: center;
place-items: center;
}
input[type="radio"]:checked::before {
input[type=radio]:checked::before {
content: " ";
inset: initial;
display: inline-block;
@ -538,14 +476,7 @@ a {
text-decoration: underline; /* 1 */
text-decoration-color: transparent; /* 1 */
text-decoration-skip-ink: auto; /* 1 */
transition:
0.2s background,
0.2s border-color,
0.2s color,
0.2s font-weight,
0.2s outline-color,
0.2s letter-spacing,
0.2s text-decoration-color; /* 3 */
transition: 0.2s background, 0.2s border-color, 0.2s color, 0.2s font-weight, 0.2s outline-color, 0.2s letter-spacing, 0.2s text-decoration-color; /* 3 */
text-decoration-skip: edges; /* 1 */
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
}
@ -631,9 +562,7 @@ ul.avec-puce-cercle {
}
ul.avec-puce-cercle a {
padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(
--liste-puce-cercle-puce-taille
) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(--liste-puce-cercle-puce-taille) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
}
video {
@ -689,7 +618,7 @@ video {
transform: translateX(-100%);
}
}
body:has(#menu-mobile:not([aria-hidden="true"])) {
body:has(#menu-mobile:not([aria-hidden=true])) {
touch-action: none;
overflow: hidden;
}
@ -709,11 +638,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
transition: display 400ms allow-discrete;
-webkit-overflow-scrolling: none;
}
#menu-mobile[aria-hidden="true"] {
#menu-mobile[aria-hidden=true] {
display: none;
animation: fade-out 400ms both;
}
#menu-mobile[aria-hidden="true"] .menu-modale__fond {
#menu-mobile[aria-hidden=true] .menu-modale__fond {
animation: fade-out 400ms both;
}
#menu-mobile .menu-modale__fond {
@ -846,13 +775,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
}
#en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
#en-tete .menu-navigation__entree:has(a[aria-current=page]) {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
}
#en-tete .menu-navigation__entree--courante {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
}
#en-tete .menu-navigation__entree a {
display: inline-block; /* 1 */
@ -861,8 +788,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
@media (hover: hover) {
#en-tete .menu-navigation__entree:hover {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
}
}
@media (width <= 1000px) {
@ -870,6 +796,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
display: none;
}
}
#en-tete {
/* * Bouton du compte de Produits dans le Panier. */
}
#en-tete .compte-panier {
display: flex;
flex-flow: row nowrap;
@ -877,32 +806,28 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
place-items: center;
text-align: center;
}
#en-tete .compte-panier a:hover,
#en-tete .compte-panier a:active,
#en-tete .compte-panier a:focus-within {
background: var(--couleur-gris-fond) !important;
}
#en-tete .compte-panier[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px/2px 2px;
background: var(--arriere-plan-points);
}
#en-tete .compte-panier[disabled] a:hover,
#en-tete .compte-panier[disabled] a:active,
#en-tete .compte-panier[disabled] a:focus-within {
#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:focus-within {
border: 1px solid var(--couleur-noir);
background: initial;
}
#en-tete .compte-panier a {
padding-block: var(--espace-2xs);
padding-inline: var(--espace-s);
text-transform: lowercase;
background: var(--couleur-gris);
background: transparent;
}
#en-tete .compte-panier a.lien-compte {
border-color: transparent;
#en-tete .compte-panier a[data-contient-articles=true] {
background: var(--couleur-gris-fond);
}
#en-tete .compte-panier a[data-contient-articles="true"] {
background: var(--couleur-gris-fonce);
#en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
#en-tete .compte-panier a:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
#en-tete .conteneur {
display: flex;
@ -919,6 +844,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
image-rendering: crisp-edges;
shape-rendering: geometricprecision;
}
@media (hover: hover) {
#en-tete .bouton-menu-mobile:hover {
background: initial !important;
}
}
@media (width <= 1000px) {
#en-tete .bouton-menu-mobile {
display: block;
@ -983,8 +913,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
#menu-categories-produits ul {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;
/*
@ -1094,9 +1023,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
top: var(--colonne-gauche-position-haut);
height: var(--colonne-gauche-photo-hauteur);
}
.photos-produit .colonne.colonne-gauche figure,
.photos-produit .colonne.colonne-gauche picture,
.photos-produit .colonne.colonne-gauche img {
.photos-produit .colonne.colonne-gauche figure, .photos-produit .colonne.colonne-gauche picture, .photos-produit .colonne.colonne-gauche img {
height: 100%;
}
.photos-produit .colonne.colonne-droite img {
@ -1171,8 +1098,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
--carte-produit-longueur-maximale: 1000px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns:
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */
min-height: var(--grille-produits-hauteur-minimale);
}
@ -1350,7 +1276,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
@supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation select:user-valid {
background: var(--couleur-jaune-fond);
background: var(--couleur-gris-fond);
}
}
.resume-produit .selecteur-produit__attribut-variation option {
@ -1361,34 +1287,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.resume-produit .selecteur-produit__attribut-variation__selecteurs {
position: relative;
/* Icône de flèche descendante */
}
.resume-produit .selecteur-produit__attribut-variation__selecteurs::after {
pointer-events: none;
content: " ";
position: absolute;
top: 7px;
right: 0.4rem;
display: inline-block;
width: 0.9rem;
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@supports not selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:valid)::after {
visibility: hidden;
opacity: 0%;
}
}
@supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:user-valid)::after {
visibility: hidden;
opacity: 0%;
}
display: flex;
flex-flow: row wrap;
gap: var(--espace-m);
place-content: center;
place-items: center;
}
.resume-produit .selecteur-produit__prix {
font-style: initial;
@ -1437,9 +1340,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
.details-produit__textes .section-textuelle:not(:last-of-type) {
border-block-end: 1px solid var(--couleur-noir);
}
.details-produit__textes
.section-textuelle:has(button[aria-expanded="false"])
.section-textuelle__contenu {
.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu {
display: none;
}
.details-produit__textes .section-textuelle h3 {
@ -1452,6 +1353,15 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
padding: var(--section-marges-internes);
text-align: start;
}
.details-produit__textes .section-textuelle h3 button:active {
background: var(--arriere-plan-points);
}
@media (hover: hover) {
.details-produit__textes .section-textuelle h3 button:hover {
color: inherit;
background: inherit;
}
}
.details-produit__textes .section-textuelle .section-textuelle__contenu {
padding-block-end: var(--section-marges-internes);
padding-inline: var(--textuel-marges-internes-ligne);
@ -1477,19 +1387,15 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
background: var(--couleur-gris-fond);
}
.details-produit__actions button {
height: initial;
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
transition: 0.2s color, 0.2s background, 0.2s font-weight;
}
.details-produit__actions button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
@media (hover: hover) {
.details-produit__actions button:not([disabled]):hover {
font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
}
@ -1543,10 +1449,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
position: relative;
}
@media (hover: hover) {
.produits-similaires
.grille-produits-similaires
article figure a:hover
.produit__illustration__survol {
.produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol {
visibility: visible;
opacity: 100%;
transition: 0.3s opacity, 0.3s visibility;
@ -1619,4 +1522,4 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
text-align: right;
}
/* # sourceMappingURL=main.css.map */
/*# sourceMappingURL=main.css.map */

2
web/app/themes/haiku-atelier-2024/assets/css/main.css.map
View file

File diff suppressed because one or more lines are too long

2
web/app/themes/haiku-atelier-2024/assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

5
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
View file

@ -379,7 +379,6 @@
}
#panneau-informations-client .panneau__pied-de-page {
align-content: center;
padding: var(--espace-l) 0;
font-size: 1.25rem;
font-style: italic;
color: var(--couleur-blanc);
@ -389,9 +388,7 @@
background: var(--couleur-noir);
}
#panneau-informations-client .panneau__pied-de-page button {
font: inherit;
color: inherit;
text-transform: inherit;
padding: var(--espace-l) 0;
}
@media (width <= 500px) {
#panneau-informations-client .panneau__formulaires {

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;IACE;;;;ACpKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;IACE;;;;ACjKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
web/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.433 9.473 85.134 70.17">
<path
fill="transparent" stroke="oklch(59.99% 0 0deg / 100%)"
stroke-width="2px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443"
fill="transparent" stroke="oklch(59.99% 0 0deg / 80%)"
stroke-width="1px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443"
/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 674 B

After

Width:  |  Height:  |  Size: 673 B

Before After
Before After

4
web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss
View file

@ -3,10 +3,10 @@
:root {
/* Couleurs */
--couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%);
--couleur-blanc-fond: oklch(100% 0 0deg / 80%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 60%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%);

5
web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss
View file

@ -6,6 +6,7 @@
* 1. Utilise un meilleur modèle de boîte.
*/
html {
scrollbar-gutter: stable;
box-sizing: border-box; /* 1 */
}
@ -84,7 +85,7 @@ button, input, select, textarea {
/*
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
*/
@media (prefers-reduced-motion) {
/* @media (prefers-reduced-motion) {
*, *::before, *::after {
scroll-behavior: auto !important;
transition: none !important;
@ -94,4 +95,4 @@ button, input, select, textarea {
@view-transition {
navigation: none !important;
}
}
} */

92
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss
View file

@ -7,66 +7,63 @@ button {
all: initial;
cursor: pointer;
box-sizing: border-box;
font-family: Lato;
font: inherit;
text-align: center;
letter-spacing: inherit;
outline: 2px dashed transparent;
outline-offset: -2px;
transition: 0.2s background, 0.2s color, 0.2s outline-color;
transition: 0.2s background, 0.2s font-weight, 0.2s color, 0.2s outline-color;
&:focus-visible {
z-index: 5;
outline-color: var(--couleur-noir);
}
&:active {
background: var(--arriere-plan-points);
}
&:disabled {
color: inherit;
background: var(--arriere-plan-points);
outline-color: transparent;
}
/* Particularismes. */
// Bouton prenant toute l'espace disponible.
&.bouton-case-pleine {
width: 100%;
height: 100%;
}
// Bouton avec les couleurs inversées.
&.bouton-inverse {
color: var(--couleur-blanc);
background: var(--couleur-noir);
&:not[disabled] {
&:focus-visible {
z-index: 5;
outline-color: var(--couleur-noir);
outline-color: var(--couleur-blanc);
}
&:active {
color: var(--couleur-blanc) !important;
background: var(--couleur-noir) !important;
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
&:disabled {
color: var(--couleur-blanc);
}
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
background: var(--couleur-gris);
}
}
}
&:disabled, &[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px
/ 2px 2px;
outline-color: transparent;
}
// Particularismes
&.bouton-case-pleine {
width: 100%;
height: 100%;
&.bouton-blanc-sur-noir {
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
&:focus-visible {
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
}
}
}
&.bouton-blanc-sur-noir {
color: var(--couleur-blanc);
background: var(--couleur-noir);
}
&.bouton-fleche {
@media (hover: hover) {
background: initial;
}
}
// Bouton pour le retour en haut de la page.
&.bouton-retour-haut {
position: fixed;
z-index: 500;
@ -90,14 +87,21 @@ button {
&[data-actif] {
visibility: visible;
opacity: 60%;
opacity: 50%;
@media (hover: hover) {
&:hover {
opacity: 100%;
background: var(--couleur-jaune-fond);
background: var(--couleur-gris-fond);
}
}
}
}
@media (hover: hover) {
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
}

20
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
View file

@ -15,14 +15,17 @@ input, select, textarea {
background: var(--couleur-gris);
transition: 0.2s background;
&:focus-visible, &:focus-within, &:active {
&:focus-visible, &:focus-within {
z-index: 10;
outline: 2px dashed var(--couleur-noir);
}
&:disabled, &[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px
/ 2px 2px;
&:active {
background: var(--arriere-plan-points);
}
&:disabled {
background: var(--arriere-plan-points);
outline-color: transparent;
}
}
@ -39,16 +42,14 @@ input:is([type="email"], [type="text"], [type="tel"]), textarea {
}
&:user-valid {
background: var(--couleur-gris-fonce);
font-weight: 500;
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
&:user-invalid {
background: var(--couleur-gris);
}
// &:user-invalid {
// border-color: red;
// }
}
input, label, select, textarea {
@ -65,6 +66,7 @@ input[type="checkbox"], input[type="radio"] {
transition: 0.2s background;
&:checked {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
// TODO: Utiliser un SVG plutôt qu'un « x » ?

33
web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss
View file

@ -115,6 +115,7 @@
}
}
/* * Bouton du compte de Produits dans le Panier. */
.compte-panier {
display: flex;
flex-flow: row nowrap;
@ -122,17 +123,11 @@
place-items: center;
text-align: center;
a:hover, a:active, a:focus-within {
background: var(--couleur-gris-fond) !important;
}
&[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px / 2px 2px;
background: var(--arriere-plan-points);
a:hover, a:active, a:focus-within {
border: 1px solid var(--couleur-noir);
background: initial;
}
}
@ -140,14 +135,20 @@
padding-block: var(--espace-2xs);
padding-inline: var(--espace-s);
text-transform: lowercase;
background: var(--couleur-gris);
&.lien-compte {
border-color: transparent;
}
background: transparent;
&[data-contient-articles="true"] {
background: var(--couleur-gris-fonce);
background: var(--couleur-gris-fond);
}
&:hover, &:focus-within {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
&:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
}
}
@ -170,6 +171,12 @@
shape-rendering: geometricprecision;
}
@media (hover: hover) {
&:hover {
background: initial !important;
}
}
// Affiche sur petites tailles d'écran.
@media (width <= 1000px) {
display: block;

1
web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
View file

@ -23,6 +23,7 @@
grid-auto-rows: 1fr;
grid-template-columns:
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */
min-height: var(--grille-produits-hauteur-minimale);

64
web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss
View file

@ -83,7 +83,7 @@
@supports selector(:user-valid) {
&:user-valid {
background: var(--couleur-jaune-fond);
background: var(--couleur-gris-fond);
}
}
}
@ -95,41 +95,11 @@
/* Conteneur des sélecteurs */
&__selecteurs {
position: relative;
/* Icône de flèche descendante */
&::after {
pointer-events: none;
content: " ";
position: absolute;
top: 7px;
right: 0.4rem;
display: inline-block;
width: 0.9rem;
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@supports not selector(:user-valid) {
&:has(select:valid) {
&::after {
visibility: hidden;
opacity: 0%;
}
}
}
@supports selector(:user-valid) {
&:has(select:user-valid) {
&::after {
visibility: hidden;
opacity: 0%;
}
}
}
display: flex;
flex-flow: row wrap;
gap: var(--espace-m);
place-content: center;
place-items: center;
}
}
@ -193,12 +163,25 @@
h3 {
line-height: var(--hauteur-ligne-rapprochee);
// Bouton pour ouvrir ou fermer une section.
button {
display: inline-block;
width: 100%;
min-block-size: 1lh;
padding: var(--section-marges-internes);
text-align: start;
&:active {
background: var(--arriere-plan-points);
}
// Aucun effet de survol ici.
@media (hover: hover) {
&:hover {
color: inherit;
background: inherit;
}
}
}
}
@ -239,22 +222,17 @@
}
button {
height: initial;
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
transition: 0.2s color, 0.2s background, 0.2s font-weight;
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
// Change la casse de la police au survol quand le Bouton n'est pas désactivé
&:not([disabled]) {
@media (hover: hover) {
&:hover {
font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
}
}

1
web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
View file

@ -67,6 +67,7 @@
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;

5
web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss
View file

@ -149,7 +149,6 @@
// Total de la commande
.panneau__pied-de-page {
align-content: center;
padding: var(--espace-l) 0;
font-size: 1.25rem;
font-style: italic;
color: var(--couleur-blanc);
@ -159,9 +158,7 @@
background: var(--couleur-noir);
button {
font: inherit;
color: inherit;
text-transform: inherit;
padding: var(--espace-l) 0;
}
}

3
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/errors.ts
View file

@ -1,7 +1,8 @@
import { Schema, SchemaIssue } from "effect";
import type { NoSuchElementError } from "effect/Cause";
import type { SchemaError } from "effect/Schema";
import { Schema, SchemaIssue } from "effect";
class IncoherentDOMError extends Schema.TaggedErrorClass<IncoherentDOMError>()("IncoherentDOMError", {
cause: Schema.String,
}) {

1
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/runtime.ts
View file

@ -1,4 +1,5 @@
import { Console, Layer, ManagedRuntime, pipe } from "effect";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import ProductPageDOM from "./service-dom.ts";
import ProductPageElements from "./service-elements.ts";

43
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-dom.ts
View file

@ -1,3 +1,5 @@
import type { SchemaError } from "effect/Schema";
// oxlint-disable typescript/dot-notation
import {
Array as FxArray,
@ -14,9 +16,11 @@ import {
Stream,
SubscriptionRef,
} from "effect";
import type { SchemaError } from "effect/Schema";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import type { APIError } from "../../scripts-effect/lib/api.ts";
import type { DetailEnsemble } from "./types.d.ts";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import { CartProduct } from "../../scripts-effect/schemas/api.ts";
import { WooCommerceCart } from "../../scripts-effect/schemas/cart.ts";
import { Product, ProductVariation, ProductVariationAttribute } from "../../scripts-effect/schemas/product.ts";
@ -31,7 +35,6 @@ import { emetMessageMajBoutonPanier } from "../lib/messages.ts";
import { IncoherentDOMError } from "./errors.ts";
import ProductPageElements from "./service-elements.ts";
import ProductPageMessages from "./service-messages.ts";
import type { DetailEnsemble } from "./types.d.ts";
const PageStatesSchema = Schema.Struct({
nonce: Schema.NonEmptyString,
@ -55,10 +58,10 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
AddToCartButton,
Details,
DetailsButtons,
PageStatesRawJson,
ProductPrice,
VariationChoiceForm,
VariationSelectors,
PageStatesRawJson,
} = yield* ProductPageElements;
const { AddToCartButtonText } = yield* ProductPageMessages;
const API = yield* APIClient;
@ -95,6 +98,11 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
);
});
const setLoadingState = Effect.fn("setLoadingState")(function*(element: HTMLElement, isLoading: boolean) {
element.toggleAttribute(ATTRIBUT_DESACTIVE, isLoading);
element.toggleAttribute(ATTRIBUT_CHARGEMENT, isLoading);
});
const detailButtonClickHandler = Effect.fn("detailButtonClickHandler")(
function*(evt: Event) {
// Empêche la pollution de l'historique de navigation
@ -182,8 +190,7 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
// TODO: Faire une véritable gestion des erreurs.
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(error: APIError) {
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
yield* setLoadingState(AddToCartButton, false);
// Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte.
yield* SubscriptionRef.set(AddToCartButtonText, "Error!");
@ -215,32 +222,34 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
price: PageStates.product.price,
})
),
Effect.map(({ id, attributes }) =>
Effect.map(({ attributes, id }) =>
// Les données ont été validées en amont.
Schema.decodeSync(CartProduct)({ id: id, quantity: 0, variation: attributes })
Schema.decodeSync(CartProduct)({ id: id, quantity: 1, variation: attributes })
),
Effect.tap(body => Console.debug("addToCartButtonClickHandler", "requestBody", body)),
);
// Désactive les interactions le temps de la requête.
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, true);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, true);
yield* setLoadingState(AddToCartButton, true);
yield* SubscriptionRef.set(AddToCartButtonText, "Adding Product...");
// lanceAnimationCycleLoading(AddToCartButton, 500);
// Exécute la Requête auprès du backend.
const newCart = yield* API.AddProductToCart(PageStates.nonce, requestBody);
// Met à jour le compteur d'articles du Panier.
const newItemsCount = WooCommerceCart._itemsCount.get(newCart);
const newItemsCount = WooCommerceCart._itemsCount.get(newCart as WooCommerceCart);
emetMessageMajBoutonPanier({ quantiteProduits: newItemsCount });
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart");
// Affiche un message de succès à l'utilisateur.
yield* SubscriptionRef.set(AddToCartButtonText, "OK!");
yield* setLoadingState(AddToCartButton, false);
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart").pipe(Effect.delay("3 seconds"));
},
Effect.catchTags({
APIResponseError: error => recoverFromBackendFailure(error),
APIRequestError: error => recoverFromBackendFailure(error),
APIResponseError: error => recoverFromBackendFailure(error),
}),
);
@ -248,8 +257,10 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
/** Est-ce que le Produit affiché est en stock ? */
const isProductInStock = AddToCartButton.hasAttribute("data-in-stock") === true;
// S'('y a pas de stock, ne rien faire.
// S'il n'y a pas de stock, afficher un petit message à l'Utilisateur et ne rien faire.
if (isProductInStock === false) {
yield* Console.log("Pas de stock disponible.");
yield* SubscriptionRef.set(AddToCartButtonText, "Out of stock");
return yield* Effect.void;
}

7
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-elements.ts
View file

@ -1,5 +1,9 @@
import { Array as FxArray, Context, Effect, HashMap, Layer, Option, pipe } from "effect";
import type { NoSuchElementError } from "effect/Cause";
import { Array as FxArray, Context, Effect, HashMap, Layer, Option, pipe } from "effect";
import type { DetailEnsemble } from "./types.d.ts";
import { getAllSelectorFromDocument, getFirstSelectorFromDocument } from "../../scripts-effect/lib/dom.ts";
import {
ATTRIBUT_ARIA_CONTROLS,
@ -9,7 +13,6 @@ import {
DOM_PRIX_PRODUIT,
} from "../constantes/dom.ts";
import { IncoherentDOMError } from "./errors.ts";
import type { DetailEnsemble } from "./types.d.ts";
class ProductPageElements
extends Context.Service<ProductPageElements>()("haikuatelier.fr/Product/ProductPageElements", {

1
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-messages.ts
View file

@ -1,4 +1,5 @@
import { Context, Effect, Layer, pipe, Stream, SubscriptionRef } from "effect";
import ProductPageElements from "./service-elements.ts";
class ProductPageMessages extends Context.Service<ProductPageMessages>()("haikuatelier.fr/Product/Messages", {

2
web/app/themes/haiku-atelier-2024/views/boutique.twig
View file

@ -24,7 +24,7 @@ const _etats = {
<div class="actions">
<button
{{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine bouton-blanc-sur-noir"
{{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine bouton-inverse"
id="bouton-plus-de-produits" type="button"
>
Show more

5
web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-informations-client.twig
View file

@ -259,7 +259,10 @@
</form>
<footer class="panneau__pied-de-page">
<button form="formulaire-commande" type="submit">
<button
class="bouton-case-pleine bouton-inverse" form="formulaire-commande"
type="submit"
>
Calculate shipping
</button>
</footer>

2
web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-panier.twig
View file

@ -77,7 +77,7 @@
value="{{ code_promo ? code_promo }}"
/>
<button
class="bouton-blanc-sur-noir" for="code-promo"
class="bouton-inverse" for="code-promo"
id="bouton-code-promo" type="button"
>
{{ code_promo ? 'Remove' : 'Apply' }}

6
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig
View file

@ -10,9 +10,7 @@
<div class="selecteur-produit__attribut-variation">
{% if product.attributes %}
{% for attribut in product.attributes %}
<div class="test">
{{ include('parts/pages/produit/selecteur-attributs-produit.twig') }}
</div>
{{ include('parts/pages/produit/selecteur-attributs-produit.twig') }}
{% endfor %}
{% endif %}
</div>
@ -93,5 +91,5 @@
<code></code>
<p>If that happens again, please contact us with the content or a capture of the error.</p>
<button class="bouton-blanc-sur-noir" autofocus>Close</button>
<button class="bouton-inverse" autofocus>Close</button>
</dialog>

2
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/selecteur-attributs-produit.twig
View file

@ -4,7 +4,7 @@
</label>
<select
aria-labelledby="label-{{ atribut.slug }}" id="{{ attribut.slug }}"
aria-labelledby="label-{{ attribut.slug }}" id="{{ attribut.slug }}"
name="{{ attribut.slug }}" required
>
<option