Project

General

Profile

Anomalie #3488

Rendre la bannière « responsive »

Added by Christian P. Momon about 3 years ago. Updated over 1 year ago.

Status:
En cours de traitement
Priority:
Normale
Assignee:
Christian P. Momon
Target version:
Start date:
10/21/2019
Due date:
% Done:

0%

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

Subtasks

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

Actions

Related issues

Related to banner.chapril.org - Demande #3492: Bannière utilisée pour les menus des servicesEn cours de traitement12/02/2018

Actions

History

#1

Updated by Christian P. Momon about 3 years ago

#2

Updated by Christian P. Momon about 3 years ago

#3

Updated by Quentin Gibeaux almost 3 years ago

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

Updated by Christian P. Momon about 2 years ago

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

Updated by Vincent Calame about 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 about 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 about 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 about 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 about 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 about 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 about 2 years ago

  • Assignee set to Vincent Calame
#12

Updated by Vincent Calame about 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 about 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 about 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 1 year ago

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

Updated by Christian P. Momon over 1 year ago

  • Target version set to Backlog

Also available in: Atom PDF