Closed lucaa closed 2 years ago
En terme d'implémentation, idéalement ce thème devrait être générique et isolé du reste des styles de la plateforme, pour pouvoir être contribué comme une contribution à la plateforme XWiki et réutilisé.
On aura potentiellement besoin de déplacer les styles courants spécifiques à l'observatoire ailleurs que dans la color thème, on peut les mettre dans la skin.
Idéalement, l'implémentation de #1010 devrait / pourrait être également incluse dans ce thème - à prendre en compte et à faire si la solution est raisonnable.
Ce qui a été fait :
Il n'existe qu'une seule règle less du WikiDemarchesTheme qui modifie une variable bootstrap, à propos du breakpoint de collapse de la navbar. Cette règle a été gardée dans le DSFRTheme, car on ne pourrait plus modifier cette variable depuis un SSX, mais aussi parce que le breakpoint modifié correspond au breakpoint spécifié par le DSFR (et qu'il est donc cohérent de laisser la règle ici).
A noter que les pièces jointes présentes dans le WikiDemarchesTheme ont été déplacées dans uicomponents/
, celui-ci n'étant plus utilisée sur le wiki.
Ce qu'il reste à faire :
mise en place de l'ombre en dessous du header directement dans le style du DSFR
Je pense que cette modification casse l'affichage sur mobile pour le formulaire d'avis, il n'y a plus d'espace entre le header et les titres des pages parce-qu'il y a une règle spéciale sur le formulaire d'avis qui enleve le padding de document-info.
Bien vu, c'est fixé !
@lucaa @ugodtn on est d'accord que sur ce ticket, rien en attente de notre côté?
Confirmé par Ugo, rien de notre côté.
À propos des liens à souligner, cela me semble assez compliqué à mettre en place, car la majorité des balises <a>
utilisées un peu partout dans le wiki partent du principe que les liens ne sont pas soulignés par défaut. Et donc appliquer un style "souligné" par défaut pour les liens casserait le design à de nombreux endroits dans le wiki (entre autre: le footer, la navbar, mais aussi des boutons et onglets un peu partout, ...)
Du coup si on veut vraiment souligner les liens, il faudrait aller corriger à chaque endroit où on voit que c'est mal stylisé, en étant sûr qu'on en oublie pas (ce que me semble assez fastidieux). Quel est ton avis à propos de ça @lucaa ?
alors, pour les liens la situation courante n'est pas acceptable. Ne pas avoir aucun marker pour les liens par rapport au texte simple sauf au passage de la souris rend l'utilisation très complexe.
Nous avons donc 2 choix et il faudra en choisir un, ne rien changer n'est pas une possibilité :) :
Quel est ton avis à propos de ça @lucaa ?
peux-tu essayer une décoration uniquement dans #xwikicontent , qui est le 'corps' d'une page. Il se peut qu'il y ait des effets de bord aussi (e.g. pour les liens-boutons) pour lesquelles les surcouches de styles supposent qu'il n'y a pas de décoration, mais au moins il y aura moins à corriger...
la solution de marquage dsfr
en fait, dans dsfr, la dernière fois que j'ai vérifié il y avait 2 types de liens, un dans le texte ("inline") et l'autre pour les liens "tout seuls", comme les boutons ou les éléments de navigation .
Comment les 2 sont différenciés dans dsfr? car finalement notre problème est un peu du même type, on veut décorer que les liens du texte...
Comment les 2 sont différenciés dans dsfr?
Il n'y a aucune différentiation de liens "inline" ou "tout seuls", il y a juste la possibilité de rajouter une classe à la balise a
pour modifier son affichage (par exemple 'fr-raw-link' ou 'fr-reset-link'), mais l'affichage par défaut de tous les liens c'est surligné
Je crois avoir trouvé une solution pas trop mal pour souligner seulement les liens qui nous intéresse:
Puisque les seuls liens qu'on ne veut pas souligner à l'intérieur d'une page c'est ceux qui sont utilisés comme des boutons (merci bootstrap), il suffit d'appliquer le style soulignés à tous les a
sauf ceux qui correspondent à ce critère:
#xwikicontent {
a:not(.btn):not([type="button"]):not([role="button"]):not(ul.nav > li > a) {
text-decoration: underline;
text-underline-offset: 2px;
}
}
C'est ce que j'ai committé pour l'instant, de ce que j'ai pu voir rien n'est cassé, ça à l'air de bien marcher
:not(ul.nav > li > a)
pas besoin de ça vu que t'as déjà mis #xwikicontent. Normalement y'a pas de ul.nav dans le contenu (t'as trouvé un cas spécial ici?)
aussi @ClemDee vérifie, stp, le support des selecteurs de la règle ci-dessus dans les navigateurs (:not et [condition]) dans les navigateurs.
pas besoin de ça vu que t'as déjà mis #xwikicontent. Normalement y'a pas de ul.nav dans le contenu (t'as trouvé un cas spécial ici?)
oui, c'est pour le system de tabs de bootstrap
aussi @ClemDee vérifie, stp, le support des selecteurs de la règle ci-dessus dans les navigateurs (:not et [condition]) dans les navigateurs.
Oui c'est bon, c'est pour ça d'ailleurs que j'ai écrit mes exclusions à la suite (:not(...):not(...)
) plutôt que d'utiliser des virgules à l'intérieur (:not(..., ...)
), car cette dernière syntaxe n'est pas supportée par IE11 !
Du coup je ferme le ticket!
Ce qui a été fait:
L'objectif est de fournir le cadre pour avoir des décorations compatibles DSFR pour pouvoir obtenir un résultat similaire aux mockups de https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=49%3A26243 .
Plus précisément, l'objectif est de créer un thème (de couleurs) pour XWiki qui fonctionne comme une surcouche à bootstrap et XWiki et décore les éléments suivants, le plus proche possible du dsfr (l'objectif est de décorer le markup standard bootstrap, pas de demander du markup spécifique) :