Project

General

Profile

Anomalie #5733

rendre la bannière chapril "responsive"

Added by Pierre-Louis Bonicoli 5 months ago. Updated 4 months ago.

Status:
Résolu
Priority:
Normale
Assignee:
-
Target version:
Start date:
01/01/2022
Due date:
% Done:

100%

Estimated time:

Description

Reproductibilité sous Firefox :

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

Screenshot_2022-01-19_11-37-53.png (97.8 KB) Screenshot_2022-01-19_11-37-53.png problème Pierre-Louis Bonicoli, 01/19/2022 11:48 AM
Screenshot_2022-01-19_11-46-31.png (89.1 KB) Screenshot_2022-01-19_11-46-31.png proposition de correctif Pierre-Louis Bonicoli, 01/19/2022 11:50 AM

History

#1

Updated by Pierre-Louis Bonicoli 5 months ago

  • Parent task set to #3488
#2

Updated by Pierre-Louis Bonicoli 5 months ago

  • Status changed from Nouveau to Confirmé
#3

Updated by Pierre-Louis Bonicoli 5 months ago

  • Related to Demande #4846: Configurer la bannière Chapril added
#4

Updated by Frédéric Couchet 4 months 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.

#5

Updated by Frédéric Couchet 4 months ago

  • Related to deleted (Demande #4846: Configurer la bannière Chapril)
#6

Updated by Frédéric Couchet 4 months ago

  • Parent task deleted (#3488)
#7

Updated by Pierre-Louis Bonicoli 4 months ago

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:

problème

J'ai essayé un correctif, il nécessite:

proposition de correctif

#8

Updated by Vincent Calame 4 months 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

#9

Updated by Pierre-Louis Bonicoli 4 months 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.

Also available in: Atom PDF