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

2026-04-23

Browse source
This commit is contained in:
gcch 2026-04-23 15:31:44 +02:00
commit 4d9fe74690
12 changed files with 241 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -252,6 +252,11 @@ em {
font-style: italic;
}
code {
font-family: "monospace";
font-size: 0.9rem;
}
/* Mixins Sass */
/*
* Réinitialisation des styles des <button>.
@ -339,6 +344,51 @@ button.bouton-retour-haut[data-actif] {
}
}
dialog {
background: white;
z-index: 999;
justify-self: center;
align-self: center;
padding: var(--espace-l);
flex-flow: column nowrap;
opacity: 0;
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
}
dialog::backdrop {
background-color: transparent;
transition: background-color 0.3s, display 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
}
dialog:open {
display: flex;
opacity: 1;
}
dialog:open::backdrop {
background-color: var(--couleur-fond);
}
dialog * + * {
margin-block-start: var(--espace-m);
}
dialog p {
max-inline-size: 50ch;
}
dialog button {
inline-size: fit-content;
align-self: end;
padding: var(--espace-s);
}
@starting-style {
dialog:open {
opacity: 0;
}
}
@starting-style {
dialog:open::backdrop {
background-color: transparent;
}
}
fieldset {
all: initial;
display: flex;

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/src/sass/base/_typographie.scss
View file

@ -26,5 +26,10 @@ em {
font-style: italic;
}
code {
font-family: "monospace";
font-size: 0.9rem;
}
/* Mixins Sass */
// TODO: Créer une mixin pour le style "gris avec lettres espacées"

52
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss Normal file
View file

@ -0,0 +1,52 @@
dialog {
background: white;
z-index: 999;
justify-self: center;
align-self: center;
padding: var(--espace-l);
flex-flow: column nowrap;
opacity: 0;
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
&::backdrop {
background-color: transparent;
transition: background-color 0.3s, display 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
}
&:open {
display: flex;
opacity: 1;
&::backdrop {
background-color: var(--couleur-fond);
}
}
* + * {
margin-block-start: var(--espace-m);
}
p {
max-inline-size: 50ch;
}
button {
inline-size: fit-content;
align-self: end;
padding: var(--espace-s);
}
}
@starting-style {
dialog:open {
opacity: 0;
}
}
@starting-style {
dialog:open::backdrop {
background-color: transparent;
}
}

1
web/app/themes/haiku-atelier-2024/src/sass/main.scss
View file

@ -8,6 +8,7 @@
// 1.2 Éléments
@use "base/elements/boutons" as boutons;
@use "base/elements/dialogs" as dialogs;
@use "base/elements/formulaires" as formulaires;
@use "base/elements/images" as images;
@use "base/elements/liens" as liens;

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

@ -16,7 +16,7 @@ import {
} from "effect";
import type { SchemaError } from "effect/Schema";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import type { APIError, APIRequestError } from "../../scripts-effect/lib/api.ts";
import type { APIError } 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";
@ -181,12 +181,16 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
});
// TODO: Faire une véritable gestion des erreurs.
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(_error: APIError) {
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(error: APIError) {
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
// Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte.
yield* SubscriptionRef.set(AddToCartButtonText, "Error!");
document.querySelector("#cart-error").showModal();
document.querySelector("#cart-error code").textContent = `${error.name} ${error.message}`;
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart").pipe(Effect.delay("5 seconds"));
return yield* Effect.void;

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

@ -26,6 +26,10 @@ document.addEventListener("DOMContentLoaded", (): void => {
yield* effects.pipe(Effect.tapCause(cause => Console.error(Cause.pretty(cause))));
}).pipe(ProductPageRuntime.runFork);
document.querySelector("#cart-error button").addEventListener("click", (): void => {
document.querySelector("#cart-error").close();
});
});
// const ajouteProduitAuPanier = (event: MouseEvent): void => {

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

@ -87,3 +87,11 @@
{% endif %}
</div>
</aside>
<dialog id="cart-error">
<p>An error happened! Please retry.</p>
<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>
</dialog>