Projet

Général

Profil

Anomalie #3488

Rendre la bannière Chapril « responsive »

Ajouté par Christian P. Momon il y a plus de 5 ans. Mis à jour il y a presque 2 ans.

Statut:
Fermé
Priorité:
Normale
Assigné à:
-
Début:
21/10/2019
Echéance:
28/02/2021
% réalisé:

100%

Temps estimé:
(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 ».


Fichiers

nonresponsive.png (34,6 ko) nonresponsive.png Christian P. Momon, 01/12/2018 22:30
qrcode.png (68,7 ko) qrcode.png Frédéric Couchet, 06/01/2022 16:04
pad.png (334 ko) pad.png Frédéric Couchet, 06/01/2022 16:04

Sous-tâches

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

Historique

#1

Mis à jour par Christian P. Momon il y a plus de 5 ans

#2

Mis à jour par Christian P. Momon il y a plus de 5 ans

#3

Mis à jour par Quentin Gibeaux il y a environ 5 ans

  • Projet changé de Chapril à www.chapril.org
#4

Mis à jour par Christian P. Momon il y a plus de 4 ans

  • Projet changé de www.chapril.org à banner.chapril.org
#5

Mis à jour par Vincent Calame il y a plus de 4 ans

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

Mis à jour par Christian P. Momon il y a plus de 4 ans

Ç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

Mis à jour par Vincent Calame il y a plus de 4 ans

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

Mis à jour par Christian P. Momon il y a plus de 4 ans

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

#9

Mis à jour par Vincent Calame il y a plus de 4 ans

  • Statut changé de Nouveau à 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

Mis à jour par Christian P. Momon il y a plus de 4 ans

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

Mis à jour par Christian P. Momon il y a plus de 4 ans

  • Assigné à mis à Vincent Calame
#12

Mis à jour par Vincent Calame il y a plus de 4 ans

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

Mis à jour par Vincent Calame il y a plus de 4 ans

  • Assigné à Vincent Calame supprimé

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

Mis à jour par Christian P. Momon il y a plus de 4 ans

  • Assigné à mis à 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

Mis à jour par Christian P. Momon il y a environ 4 ans

  • Lié à Demande #3492: Bannière utilisée pour les menus des services ajouté
#16

Mis à jour par Christian P. Momon il y a presque 4 ans

  • Version cible mis à Backlog
#17

Mis à jour par Frédéric Couchet il y a environ 2 ans

  • Assigné à Christian P. Momon supprimé
  • Version cible changé de Backlog à Sprint 2022 janvier
#18

Mis à jour par Frédéric Couchet il y a environ 2 ans

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

Mis à jour par Frédéric Couchet il y a environ 2 ans

  • Sujet changé de Rendre la bannière « responsive » à Rendre la bannière Chapril « responsive »
#20

Mis à jour par Frédéric Couchet il y a environ 2 ans

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

Mis à jour par Frédéric Couchet il y a environ 2 ans

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

Mis à jour par Frédéric Couchet il y a environ 2 ans

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

Mis à jour par Frédéric Couchet il y a environ 2 ans

  • Lié à Demande #3492: Bannière utilisée pour les menus des services supprimé
#24

Mis à jour par Frédéric Couchet il y a environ 2 ans

  • Statut changé de En cours de traitement à Résolu

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

#25

Mis à jour par Quentin Gibeaux il y a presque 2 ans

  • Statut changé de Résolu à Fermé

Formats disponibles : Atom PDF