Chapril » banner.chapril.org

Antoine a fait le travail pour le site www.chapril.org. Sur les petits écrans, il y a un bouton « menu ». Antoine a utilisé une technique particulière pour que le bouton soit actif en CSS sans Javascript. Il repose sur le changement de fragment de l'URL (la partie après le #). L'absence de Javascript est très élégante et réduit le risque de conflit avec le javascript du service. Il y a cependant un risque de conflit avec des services qui utiliseraient le fragment pour une circulation interne (le fragment se manipule bien en Javascript et cela permet de s'inscrire dans l'historique des pages).

Je peux proposer une v2 de la bannière, basée sur ce menu

Ça serait super. Prévoir une hauteur plus petite.
Faut-il un environnement de développement/test ? banner2.chapril.org ?
Hmmm … en fait, comme on risque d'avoir plusieurs versions actives, peut-être prévoir une organisation par sous-répertoire v1, v2, v3…

Comme c'est du statique, une organisation par sous-répertoire v1, v2, v3, etc. me semble bien. Il faudra préciser s'il y a une convention de nommage des fichiers pour que l'insertion par Ngninx d'une version ou d'une autre soit faite facilement.

Des informations sur l'utilisation dans Nginx sont disponibles là : https://admin.chapril.org/doku.php?id=admin:services:banner.chapril.org

C'est proche de la bannière d'Antoine et c'est responsive. Bravo \o/

Quelques remarques :

0) ça fonctionne bien et mieux que la v1.

1) différences avec la proposition d'Antoine :

a) bleus : attention, les bleus sont différents,
 b) phrase slogan absente,
 c) rendu menu différent,
 d) écartement des items du menu,

2) from scratch
Du coup, j'en déduis que tu as refais « from scratch ». Ce n'était pas possible d'utiliser les fichiers d'Antoine ? Je sais que tu avais des interrogation à ce propos. As-tu pu contacter Antoine pour lever tes doutes ?

3) Serait-ce mieux d'avoir la même bannière et pour le site principale et pour les services ?
Je pose la question parce qu'elle doit être posée. Déjà là, c'est un énorme progrès que d'avoir une bannière qui fonctionne avec un habillage avancé.

Je n'ai effectivement pas reproduit le bandeau de www.chapril.org puisque toi-même tu avais demandé de le faire moins haut. Pour les liens, j'ai reproduit exactement les liens du bandeau actuel qui sont différents du site www.chapril. Au collectif du Chapril de dire quel bandeau il veut sur l'ensemble des services.

J'ai repris de zéro pour deux raisons :

1) je me suis fait plaisir en essayant une autre solution

2) le code HTML étant injecté brutalement dans les pages des services, il faut qu'il soit le moins intrusif possible. la solution de www.chapril.org est très intéressante car elle évite le javascript mais donne des identifiants "navigation" et "menu" à des éléments HTML. Or, un identifiant devant être unique dans une page web, il y a risque de conflit avec un service qui utiliserait aussi ces identifiants dans ces pages. Ma solution n'utilise aucun identifiant, que des classes CSS préfixées par « chapril- » (et bien sûr pas de javascript), le risque de conflit est très faible

Pour ce qui est des espacements entre les blocs, j'ai choisi la solution la plus neutre possible, c'est à dire de repartir les éléments sur toute la largeur de la page plutôt qu'avoir une largeur fixe sans rapport avec la largeur établie par la charte graphique du service. Cela bascule en mode menu en dessous de 800px

P.S. : je viens de mettre à jour les couleurs

Visiblement, Vincent avait fait une proposition. Le lien qui est indiqué
dans le ticket https://banner.chapril.org/v2/index.html est en 404.

Mais j'ai trouvé dans les archives courriel https://listes.april.org/wws/arc/chapril/2019-12/msg00012.html le bon lien qui est
https://banner.chapril.org/Chapril-banner/v2/index.html

Toujours dans les archives courriel, j'ai trouvé une question et une
remarque d'Antoine :

    «  Question de design : la bannière est contrainte par la hauteur des
       services ?

    Le logo est juste un peu serré entre les bords hauts et bas. Je lui
    placerais juste un peu de padding. À régler avec la hauteur de bannière
    disponible.

     élément {

      }
       .chapril-banniere-Logo img {

        width: auto;
        height: 28px;
        padding: 4px 0px;
      }

   ou une autre astuce »

Je n'ai pas trouvé d'info concernant la non mise en production de cette
bannière. Il y avait une raison de ne pas mettre en production ?

Si la bannière est responsive, qui peut se charger de la mise en
production et éventuellement de la prise en compte de la suggestion
d'Antoine ci-dessus ?

Vincent a fait des modifications pour corriger.

Il indique aussi :

Concernant Git, le code sur le serveur Lamp va dans la branche appelée
1.0 (et non dans Master) : 
https://forge.april.org/Chapril/banner.chapril.org/src/branch/1.0/Chapril-banner

il faudrait sans doute fusionner mais cela va au delà de mes
compétences en Git.

Il faudrait qu'un admin s'en occupe.

J'ai tenté l'activation sur les services (en fonction le fichier de conf nginx de chaque service sur le serveur frontal).

Il y a 4 services pour lesquels ça fonctionne (j'ai testé sur ordinateur de bureau et sur mobile) mais n'hésitez pas à tester de votre côté.

Il y a 4 services pour lesquels le code de la bannière V1 avait été ajouté dans le code du service. La modification nginx ne suffit donc pas (ou ne sert à rien). Je laisse les personnes en charge de ces services faire les modifications.

Il y a 5 services pour lesquels l'ajout de la bannière via nginx ne fonctionne pas.

Les services pour lesquels la bannière V2 fonctionne :

• https://date.chapril.org
• https://paste.chapril.org
• https://pad.chapril.org
• https://qrcode.chapril.org
• https://benevalibre.chapril.org (François a supprimé les modifications locales du template qui contenait la bannière V1, fichier
  /var/www/benevalibre.chapril.org/benevalibre/local/templates/base.html)

Les services pour lesquels il faut modifier le code du service :

• https://drop.chapril.org/ -> c'est toujours la V1 qui apparaît car le code de la V1 a été ajouté au code de drop, ticket https://agir.april.org/issues/5751

• https://forge.chapril.org/ -> c'est toujours la V1 qui apparaît, ticket https://agir.april.org/issues/5733

Les 6 services pour lesquels l'ajout de la bannière via nginx ne fonctionne pas :

• https://pouet.chapril.org
• https://valise.chapril.org
• https://xmpp.chapril.org
• https://mumble.chapril.org
• https://visio.chapril.org
• https://mobilizon.chapril.org