Project

General

Profile

Anomalie #3488

Rendre la bannière Chapril « responsive »

Added by Christian P. Momon over 3 years ago. Updated 22 days ago.

Status:
Fermé
Priority:
Normale
Assignee:
-
Start date:
10/21/2019
Due date:
02/28/2021
% Done:

100%

Estimated time:
(Total: 0.00 h)

Description

Actuellement, sur de petites résolutions graphiques, des éléments de la bannière Chapril débordent et viennent polluer le contenu de la page.

Demande : faire que la bannière s'adapte aux petites résolutions graphiques.

Reproductibilité sous Firefox :
- aller sur la page https://www.chapril.org/services.html ;
- Shift + Ctrl + M pour activer la vue « mobile ».


Files

nonresponsive.png (34.6 KB) nonresponsive.png Christian P. Momon, 12/01/2018 10:30 PM
qrcode.png (68.7 KB) qrcode.png Frédéric Couchet, 01/06/2022 04:04 PM
pad.png (334 KB) pad.png Frédéric Couchet, 01/06/2022 04:04 PM

Subtasks

pad.chapril.org - Anomalie #3964: Problème d'affichage de la page https://pad.chapril.org/ sur mobileFermé

Actions
pad.chapril.org - Demande #5036: Rendre pad.chapril.org utilisable sur mobileFermé

Actions

History

#1

Updated by Christian P. Momon over 3 years ago

#2

Updated by Christian P. Momon over 3 years ago

#3

Updated by Quentin Gibeaux over 3 years ago

  • Project changed from Chapril to www.chapril.org
#4

Updated by Christian P. Momon over 2 years ago

  • Project changed from www.chapril.org to banner.chapril.org
#5

Updated by Vincent Calame over 2 years ago

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

#6

Updated by Christian P. Momon over 2 years ago

Ç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…

#7

Updated by Vincent Calame over 2 years ago

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.

#8

Updated by Christian P. Momon over 2 years ago

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

#9

Updated by Vincent Calame over 2 years ago

  • Status changed from Nouveau to En cours de traitement

Voici une proposition de version 2 qui reprend les codes couleurs du site principal : https://banner.chapril.org/v2/index.html

Tout est en CSS et HTML, il n'y a pas de Javascript. J'utilise la balise HTML5 <details> pour le menu, elle n'est pas prise en compte par Edge : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details mais comme elle n'est utile que pour les petits écrans, on s'en fiche un peu

#10

Updated by Christian P. Momon over 2 years ago

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é.

#11

Updated by Christian P. Momon over 2 years ago

  • Assignee set to Vincent Calame
#12

Updated by Vincent Calame over 2 years ago

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

#13

Updated by Vincent Calame over 2 years ago

  • Assignee deleted (Vincent Calame)

Je « m'auto-désassigne » :-) Perso, je voulais juste rendre service en vous proposant une solution. Si elle ne convient pas, ce n'est pas grave. Mais ce n'est pas à moi de prendre la responsabilité de la mettre en ligne.

#14

Updated by Christian P. Momon over 2 years ago

  • Assignee set to Christian P. Momon

Vincent Calame a écrit :

Je « m'auto-désassigne » :-) Perso, je voulais juste rendre service en vous proposant une solution.

Un grand merci pour cette solution. Ce n'est pas exactement le rendu de la page d'accueil mais c'est très proche et surtout ça fonctionne sans bug, bravo !

Mais ce n'est pas à moi de prendre la responsabilité de la mettre en ligne.

L'idéal est que cette responsabilité soit collective, par exemple en demandant l'avis du groupe sur chapril@ et sous la bienveillance du grand animateur Chapril.

Je finalise quelques ajustements du code (position fixe en haut) et j'enverrai le courriel pour déploiement <3

#15

Updated by Christian P. Momon over 2 years ago

  • Related to Demande #3492: Bannière utilisée pour les menus des services added
#16

Updated by Christian P. Momon about 2 years ago

  • Target version set to Backlog
#17

Updated by Frédéric Couchet 6 months ago

  • Assignee deleted (Christian P. Momon)
  • Target version changed from Backlog to Sprint 2022 janvier
#18

Updated by Frédéric Couchet 6 months ago

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 ?

#19

Updated by Frédéric Couchet 6 months ago

  • Subject changed from Rendre la bannière « responsive » to Rendre la bannière Chapril « responsive »
#20

Updated by Frédéric Couchet 6 months ago

En fait, le fichier contenant le code del bannière est depuis 2019 sur
le serveur frontal nginx du Chapril.

Deux tests faits avec qrcode.chapril.org et pad.chapril.org. Ci-joint les copies écrans.

Pour qrcode la bannière est en bas (alors que l'actuelle est en haut), c'est normal ?

Pour pad, la bannière apparaît au milieu sur la page d'accueil.

Le positionnement et le fonctionnement de la bannière doit dépendre du service mais je n'y connais rien.

#21

Updated by Frédéric Couchet 6 months ago

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.

#22

Updated by Frédéric Couchet 6 months ago

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 :

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

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

#23

Updated by Frédéric Couchet 6 months ago

  • Related to deleted (Demande #3492: Bannière utilisée pour les menus des services)
#24

Updated by Frédéric Couchet 6 months ago

  • Status changed from En cours de traitement to Résolu

À mon niveau je ne plus rien faire, je ferme donc la tache.

#25

Updated by Quentin Gibeaux 22 days ago

  • Status changed from Résolu to Fermé

Also available in: Atom PDF