wip/71581-cd-integration-graphique-v- (#71581) #40
aberriot
fpeters
Loading…
Reference in New Issue
No description provided.
Delete Branch "wip/71581-cd-integration-graphique-v-"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Pour le guide de style, se référer à : https://www.figma.com/file/kUtTDCdWPpWKFqWKJWQ1eJ/%5BCD28%5D-Eurelien?t=7g0IgXhjp9Z04xJ0-0
Les titres H1 & H2 qui se trouvent dans le header ou dans les cellules textes reçoivent une décoration et un header qui reprend le/les premier mots du titre. Dans les cellules textes, c'est fait en ajoutant un span avec une classe cd28-title-header dans le titre. Pour l'en tete des pages WCS, j'ai fait en sorte qu'on puisse le définir en coupant en deux le header / titre avec un # : Mettre Les#Widgets affichera "Les" en header de titre. Pas vraiment trouvé de solution plus satisfaisante.
La classes cd28-info-block avec des variantes border / background, yellow, bue, green et pink reprend les blocs d'information définis dans le guide de style.
La classe cd28-external-link ajoute une icone à la fin d'un lien : pas sur que c'était souhaitable de la mettre sur tous les liens.
wip/71581-cd-integration-graphique-v-to wip/71581-cd-integration-graphique-v- (#71581)Le rendu est vraiment top, c'est fonctionnel, ça me semble en cohérence avec leur guide, c'est agréable à utiliser.
En plus des quelques remarques que j'ai faites au fil de la relecture, je pose ce truc ici repéré pendant mes tests en local : Le style de modale ne correspond pas au style guide. Je ne suis pas certaine de l'importance de ce point ceci dit, on peut peut-être ignorer
@ -0,0 +3,4 @@}.cd28-page-header {--title-img: url("img/title-img-white.svg");je suis pour l'utilisation des variables CSS, juste pour savoir, dans le cas présent c'était pour éviter un sélecteur CSS trop long ou contourner une autre limitation de SCSS ?
C'est un peu convolué, c'est vrai, j'aurai pu faire :
.cd-28-page-header {
h1, h2 {
&::before {
background: url("img/title-img-white.svg");
}
}
Je vais reprendre ça.
Ça a l'air bon dans tes derniers commits, je ferme.
@ -0,0 +9,4 @@margin: 0 auto;max-width: $header-width;width: 100%;background: url("img/page-banner.jpeg");La règle est bien présente chez moi, mais par contre je n'ai pas de bannière jaune affichée :
Il y a un placeholder en plus dans la template de page combo : il faut ajouter quelque chose dans le slot "En-tete de la page" : est-ce que tu l'as bien fait ?
Oups oui, excuse moi, ça fonctionne bien, j'avais juste posté le commentaire avant de trouver comment faire, je ferme.
@ -0,0 +120,4 @@flex-wrap: nowrap;&::before {margin-right: $space-small;Je me sens moins seule à faire ça, c'est chouette :D
@ -0,0 +118,4 @@font-family: "RemixIcon";@media($min-desktop-viewport) {content: "\ea4e"; // arrow-down-s-lineÇa s'affiche même pour des entrées menu qui n'ont pas de sous-menu, je ne sais pas si c'est voulu ?
Pas vraiment, mais à moins d'utiliser :has qui n'est pas bien supporté, je n'ai pas trouvé de manières de discriminer les entrées de menu qui ont un sous-menu. Si tu as une idée...
Avec un truc comme
.menu a ~ ul? Purement une idée en l'air, j'ai jamais testé.https://stackoverflow.com/a/10782297/2844093
Non, car ~ ul sélectionne le ul, pas le a et il n'y a pas à ma connaissance de sélecteur qui permette de sélectionner les éléments précédents (https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector)
okay, dans ca cas on laisse tomber :)
@ -0,0 +126,4 @@$nav-item-selected-background: transparent !default;$nav-item-selected-color: white;$nav-item-hover-background: transparent; // we handle that on the menu--link, not on menu--item$nav-item-hover-color: $gray-9;Ça manque de contraste ici je pense, avec le blanc sur jaune. Sur leur style guide c'est du noir qui est annoncé a priori :
C'est du au fait qu'on veut que le lien du menu principal soit gris en hover, mais blanc quand le sous-menu est hover, je vais fixer ça.
Testé en local avec la dernière version, c'est résolu.
@ -0,0 +15,4 @@padding: 0 $space-small;a {@extend %button;Je ne sais pas si ça vient de cet endroit, mais en tout cas ça concerne cette section : le bouton brouillon et le bouton code de suivi ont des incohérences de spacing / police / couleur :
Testé ce matin, c'est bien résolu
@ -0,0 +1,10 @@{% extends 'theme.html' %}{# move nav #}Pas certaine de ce qui se passe ici, je veux bien un peu de contexte (j'ai peut-être pas les yeux en face des trous, désolée ;)
La nav est déplacée dans le bloc header-content (elle est normalement dans le bloc after-header, qui est vide ici), pour pouvoir l'afficher en flex correctement entre le logo et les toplinks.
Okay, je découvre qu'on peut déplacer des blocs déclarés ailleurs via cette syntaxe, merci !
Ça ne me semble pas opportun, les titres sont aussi repris dans les cellules combo, dans la recherche, etc. mille endroits où on ne veut pas de # parasite.
Ma proposition serait de couper sur le premier espace, et à charge à l'admin de taper des espaces insécables s'il souhaite ne pas couper.
Alternativement juste noter que ça n'est vraiment pas jouable.
(cf mon commentaire sur les # dans les titres)
Oui en effet. Je vais utiliser le premier espace : ça fonctionnera dans 95% des cas.
Je vais le noter pour la première passe de retouches.
982d606caatoddb3af79a4Les trucs que j'avais noté dans ma relecture précédente ont été corrigés et j'ai relu les nouveaux commits, c'est tout bon pour moi.
@fpeters, est-ce que tu pourrais me confirmer que ça te va en utilisant un espace comme séparateur pour les titres ? L'autre solution que je vois est de faire une page de redirection combo pour chaque formulaire, mais je ne sais pas si c'est possible et c'est assez lourd.
@ -0,0 +8,4 @@<h1><span class="cd28-title-header">{{ title_elements|first }}</span>{{ title_elements|last }}</h1>Oui c'est ok pour moi de couper sur l'espace; si ça se révèle trop pénible à l'emploi, on pourra juste retirer cette possibilité de titres coupés sur wcs.
Mais attention on aura très fréquemment des titres avec plusieurs espaces, le code comme il est va juste marcher s'il y a un seul espace.
Fixé.
83aa3de205to33dc4ec008