Anomalie #5733
rendre la bannière chapril "responsive"
100%
Description
- aller sur la page https://forge.chapril.org
- Shift + Ctrl + M pour activer la vue « mobile ».
Reporté par mail:
À: contact@chapril.org Envoyé: 29 décembre 2021 11:31 Objet: [Chapril - Contact] Bug sur mobile Bonjour, Je voulais juste vous prévenir que le bandeau que vous mêtez en haut des pages de vos services déborde sur le contenu quand l'écran est trop petit. C'est donc parfois difficile d'utiliser vos services sur mobile. Par exemple, on ne peut pas ouvrir le menu sur https://forge.chapril.org. À par ça tout roule, merci pour ces fabuleux services!
Fichiers
Historique
Mis à jour par Pierre-Louis Bonicoli il y a plus de 2 ans
- Lié à Demande #4846: Configurer la bannière Chapril ajouté
Mis à jour par Frédéric Couchet il y a plus de 2 ans
Vincent Calame a fait une bannière responsive (V2).
Le code la bannière V2 est sur le nginx du frontal dans /etc/nginx/chapril-banner-v2 et la CSS est a priori https://banner.chapril.org/Chapril-banner/v2/chapril-banner.css
Pour forge, la bannière V1 a visiblement été intégrée dans les templates gitea.
Je te laisse faire les modifications nécessaires.
Mis à jour par Frédéric Couchet il y a plus de 2 ans
- Lié à Demande #4846: Configurer la bannière Chapril supprimé
Mis à jour par Pierre-Louis Bonicoli il y a plus de 2 ans
- Fichier Screenshot_2022-01-19_11-37-53.png Screenshot_2022-01-19_11-37-53.png ajouté
- Fichier Screenshot_2022-01-19_11-46-31.png Screenshot_2022-01-19_11-46-31.png ajouté
Il y a un petit problème d'affichage quand une page utilise des éléments qui ont la valeur position: sticky: la bannière n'est pas toujours affichée, des éléments apparaissent par-dessus. Par exemple:
J'ai essayé un correctif, il nécessite:
- de modifier le style de la bannière en ajoutant à la classe
chapril-banniere-Navune propriétéz-indexavec une valeur supérieure à6 - de modifier le style de la forge en ajoutant la hauteur de la bannière (42px) aux paramètres
topdes classes:
Mis à jour par Vincent Calame il y a plus de 2 ans
Le style de la bannière est défini dans le fichier /Chapril-banner/v2/chapril-banner.css dont le lien est inséré automatiquement (par exemple : https://qrcode.chapril.org/Chapril-banner/v2/chapril-banner.css).
À la fin de ce fichier, chapril-banner.css il y a des solutions pour les cas particuliers (par exemple, pour Dokuwiki avec une règle #dokuwiki__usertools {}). Cependant, si l'adaptation peut se faire directement dans le service, c'est mieux.
Dans chapril-banner.css, tout est défini par des classes préfixées en .chapril-banniere- (.chapril-banniere-Logo) ou des éléments à l'intérieur de ces classes (.chapril-banniere-Logo a). Du coup, il est facile de surcharger les règles avec une plus forte préséance (par exemple, si tu définis une règle nav.chapril-banniere-Nav, cela va écraser .chapril-banniere-Nav) ou en utilisant le mot-clé !important.
Finalement, la seule règle qui peut poser problème, c'est la première de chapril-banner.css qui porte sur l'élément body avec un mot-clé !important
Je viens d'ajouter la valeur z-index: 1001 pour .chapril-banniere-Nav dans chapril-banner.css
Mis à jour par Pierre-Louis Bonicoli il y a plus de 2 ans
- Statut changé de Confirmé à Résolu
- % réalisé changé de 0 à 100
Merci beaucoup Vincent pour ton retour ! J'ai mis à jour la feuille de style utilisée par le service.