Project

General

Profile

Actions

Anomalie #5733

closed

rendre la bannière chapril "responsive"

Added by Pierre-Louis Bonicoli almost 3 years ago. Updated over 2 years ago.

Status:
Fermé
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
Actions #1

Updated by Pierre-Louis Bonicoli almost 3 years ago

  • Parent task set to #3488
Actions #2

Updated by Pierre-Louis Bonicoli almost 3 years ago

  • Status changed from Nouveau to Confirmé
Actions #3

Updated by Pierre-Louis Bonicoli almost 3 years ago

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

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.

Actions #5

Updated by Frédéric Couchet almost 3 years ago

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

Updated by Frédéric Couchet almost 3 years ago

  • Parent task deleted (#3488)

Updated by Pierre-Louis Bonicoli almost 3 years 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

Actions #8

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

Actions #9

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.

Actions #10

Updated by Quentin Gibeaux over 2 years ago

  • Status changed from Résolu to Fermé
Actions

Also available in: Atom PDF