Development #63440
dordogne-cd24: avoir un rendu personnalisé pour les liens vers des pages internes
0%
Description
Reprendre l'image et la description associés à la page cible.
Fichiers
Révisions associées
Historique
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 2 ans
- Fichier 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch ajouté
- Fichier Screenshot 2022-04-01 at 12-19-44 Portail - Accueil.png Screenshot 2022-04-01 at 12-19-44 Portail - Accueil.png ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Patch dans la branche https://git.entrouvert.org/publik-base-theme.git/?h=wip%2F61687-dordogne-customize-links, comme celui de #63439.
Mis à jour par Thomas Jund il y a environ 2 ans
<a href="{{ url }}" class="internal-page-link--arrow"></a>
Un lien vide, c'est pas une bonne idée.
Vu qu'on est en configuration "gros bouton", tu peux envisager d'utiliser un <a> en balise englobante </a> en display block (autoriser depuis HTML5).
<a class="internal-page-link" style="background-image: url({{cell.link_page.picture.url}})">
<h2 href="{{ url }}" class="internal-page-link--title">{{ title }}</h2>
<p class="internal-page-link--description">{{ cell.link_page.description }}</p>
<div class="internal-page-link--arrow"></div>
</a>
Meilleure sémantique et code plus simple amha.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 2 ans
- Fichier 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch ajouté
Je ne suis pas fan de melanger d'autres balises dans <a>.
Voici une nouvelle proposition avec un span pour ne pas faire de <a> vide.
Mis à jour par Thomas Jund il y a environ 2 ans
Je ne suis pas fan de melanger d'autres balises dans <a>.
ok, c'est pourtant du code valide et mieux pour la semantique, l'a11y et l'UI (puisque toute le case est cliquable).
Voici une nouvelle proposition avec un span pour ne pas faire de <a> vide.
Je parlais de contenu textuel, une balise vide n'est pas du contenu.
Par exemple
<a href="{{ url }}"><span class="sr-only">Voir les démarches de la rubrique {{ title }}</span></a>
Les titres de ces cellules doivent être des h2 (comme les autres titres des cellules), sinon tu perds la hiérarchie des titres et les blocks font alors partie du titre précédent qui est dans la sidebar ("communes d'ici" par ex.)
<h2 class="internal-page-link--title"><a href="{{ url }}" >{{ title }}</a></h2>
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 2 ans
- Fichier 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch 0001-dordogne-cd24-add-custom-styles-for-links-to-interna.patch ajouté
J'ai rajouté le titre et le span avec sr-only.
Mis à jour par Thomas Jund il y a environ 2 ans
- Statut changé de Solution proposée à Solution validée
(Y'a un :hover sur les liens (titre et chevron) ? Je ne vois rien dans le code, -- mais je valide comme ça)
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit 53e859faa06e87d4574d12f2bea506e3f8ac3940 (origin/main, origin/HEAD)
Author: Serghei Mihai <smihai@entrouvert.com>
Date: Tue Mar 29 15:10:30 2022 +0200
dordogne-cd24: add custom styles for links to internal pages with pictures (#63440)
Thomas Jund a écrit :
(Y'a un :hover sur les liens (titre et chevron) ? Je ne vois rien dans le code, -- mais je valide comme ça)
Sur le titre il y a underline (par défaut sur les liens).
Pour le chevron j'ai rajouté un changement de la couleur de fond en blanc avec bordure purpre, et le chevron purpre.
Mis à jour par Transition automatique il y a environ 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
dordogne-cd24: add custom styles for links to internal pages with pictures (#63440)