Anomalie #5733
closedrendre 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!
Files
Updated by Pierre-Louis Bonicoli almost 3 years ago
- Status changed from Nouveau to Confirmé
Updated by Pierre-Louis Bonicoli almost 3 years ago
- Related to Demande #4846: Configurer la bannière Chapril added
Updated by Frédéric Couchet almost 3 years ago
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.
Updated by Frédéric Couchet almost 3 years ago
- Related to deleted (Demande #4846: Configurer la bannière Chapril)
Updated by Pierre-Louis Bonicoli almost 3 years ago
- File Screenshot_2022-01-19_11-37-53.png Screenshot_2022-01-19_11-37-53.png added
- File Screenshot_2022-01-19_11-46-31.png Screenshot_2022-01-19_11-46-31.png added
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-Nav
une propriétéz-index
avec une valeur supérieure à6
- de modifier le style de la forge en ajoutant la hauteur de la bannière (42px) aux paramètres
top
des classes:
Updated by Vincent Calame almost 3 years ago
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
Updated by Pierre-Louis Bonicoli almost 3 years ago
- Status changed from Confirmé to Résolu
- % Done changed from 0 to 100
Merci beaucoup Vincent pour ton retour ! J'ai mis à jour la feuille de style utilisée par le service.
Updated by Quentin Gibeaux over 2 years ago
- Status changed from Résolu to Fermé