Projet

Général

Profil

Development #22440

Unification d'un modèle "barre latérale"

Ajouté par Frédéric Péters il y a environ 6 ans. Mis à jour il y a plus de 5 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
-
Version cible:
-
Début:
10 mars 2018
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:

Description

On affiche une barre latérale dans la plupart de nos applications mais on n'a pas de style prévu pour ça et du coup on a une diversité sans cohérence :

  • portail agent et w.c.s. : barre latérale à droite, <div id="sidebar"> suivant <div id="main-content">; dans le portail agent contenu principal à 70%, dans w.c.s. à 75%
  • authentic et combo : barre latérale à gauche, <div id=sidebar"> suivant <div id="appbar">, dans authentic barre latérale à 15%, dans combo à 20em.
  • bijoe : barre latérale à droite, <form class="cube-form"> suivant <div id="appbar">, avec float: right; largeur à 20em.
  • corbo : "barre latérale" à droite, <div class="announce_dashboard"> avec position: absolute, largeur à 15%.

Ma préférence irait à la barre latérale à droite, à l'extérieur de #main-content, avec une largeur en em : pour l'ordre ça évite ainsi d'enchainer deux barres latérales (menu publik puis barre de l'application), pour la largeur, parce qu'on contrôle davantage le contenu de la barre latérale et qu'on peut ainsi assurer une largeur qui lui conviendra plutôt que miser sur un pourcentage qui donnera un résultat trop étroit ou trop large selon l'écran.


Fichiers


Demandes liées

Lié à Corbo - Development #23196: utiliser le nouveau modèle pour la barre affichant les détails d'une annonceFermé16 avril 2018

Actions

Révisions associées

Révision 7c4271f1 (diff)
Ajouté par Frédéric Péters il y a environ 6 ans

misc: rename leftover sidebar references to sidepage (#22440)

Révision f943e7fe (diff)
Ajouté par Frédéric Péters il y a environ 6 ans

general: provide support for a sidebar (#22440)

Historique

#1

Mis à jour par Anonyme il y a environ 6 ans

Frédéric Péters a écrit :

On affiche une barre latérale dans la plupart de nos applications mais on n'a pas de style prévu pour ça et du coup on a une diversité sans cohérence :

Ce qui pourrait aider à réfléchir serait d'avoir des exemples du contenu des barres latérales des différentes applications.

Après techniquement, je ne sais pas ce que les futurs patchs proposeront mais je crois qu'un template de page commun (gadjo?) avec un <aside> pour le block latéral ça serait bien pratique et sémantique.

Ma préférence irait à la barre latérale à droite, à l'extérieur de #main-content, avec une largeur en em : pour l'ordre ça évite ainsi d'enchainer deux barres latérales (menu publik puis barre de l'application), pour la largeur, parce qu'on contrôle davantage le contenu de la barre latérale et qu'on peut ainsi assurer une largeur qui lui conviendra plutôt que miser sur un pourcentage qui donnera un résultat trop étroit ou trop large selon l'écran.

Oui à droite et en Xem, mais prévoyons aussi ce qu'il se passe quand la définition en largeur est trop petite : où va-t-elle ?

#2

Mis à jour par Frédéric Péters il y a environ 6 ans

Ce qui pourrait aider à réfléchir serait d'avoir des exemples du contenu des barres latérales des différentes applications.

De manière exhaustive ou presque, tour de nos applications :

  • Authentic
    • barre latérale (gauche) dans les listings, avec un formulaire permettant de filtrer le tableau; ce fonctionnement existe aussi sur la vue individuelle d'un rôle (qui affiche un tableau des personnes possédant le rôle).
      • cette barre contient aussi, dans le cas des services/applications, des métadonnées sur l'objet (en l'espèce, le slug).
    • barre latérale (droite) sur la fiche d'un utilisateur, avec des métadonnées (dates de création, dernière connexion, dernière modification) et des boutons d'action (réinitialiser le mot de passe, suspendre le compte, force le changement de mot de passe, etc.)
  • w.c.s.
    • barre latérale (droite),
      • avec des liens d'action et de navigation (ex: supprimer, dupliquer, voir en ligne)
      • avec aussi des formulaires d'action, pour l'ajout d'un champ, d'un statut, d'une action de workflow
      • sur les listings (vue globale ou d'une démarche), formulaire de filtre
      • sur la vue d'une demande, métadonnées sur celle-ci (date de création, statut, criticité, usager associé, etc.)
  • combo
    • barre latérale (gauche), présente sur l'édition des pages
      • avec des métadonnées sur la page (titre, slug, modèle, visibilité, etc.)
  • corbo
    • "barre" latérale (gauche), présente sur une annonce
      • avec des métadonénes sur celle-ci (date/heure de publication, d'envoi, nombre de destinataires)
  • bijoe
    • barre latérale (droite), sur la page d'une visualisation
      • avec le paramétrage de celle-ci (avec édition dans la page même) + un bouton d'export ods des données
#3

Mis à jour par Frédéric Péters il y a environ 6 ans

Alors,

  • gadjo
    • 0001 : misc: rename sidebar to sidemenu : une affaire de vocabulaire, pour que le menu Publik s'appelle "sidemenu".
    • 0002 : general: provide support for a sidebar : c'est minimal, ça passe en flexbox l'affichage de la zone centrale
  • w.c.s.
    • 0001 : backoffice: adapt sidebar to native gadjo sidebar : ça s'accompagne de #23010 qui a une série de patchs pour déplacer les actions de la barre latérale à l'appbar
  • combo
    • 0001 : misc: adapt sidebar to native gadjo sidebar : rien de particulier
  • authentic
    • 0001 : manager: switch to gadjo sidebar : à noter que la page de visualisation d'un usager n'est pas touchée (elle contient un <form> qui couvre aussi bien le contenu que les actions latérales, j'ai préféré ne pas toucher à tout ça).

corbo et bijoe pas touchés pour le moment.

exemple de rendus attachés.

#4

Mis à jour par Frédéric Péters il y a environ 6 ans

Actualisation du patch combo.

#5

Mis à jour par Thomas Noël il y a environ 6 ans

Ack technique sur les patches.

Ack aussi pour ma part sur le fond de l'affaire, notamment sur combo où je trouve qu'on voit mieux les paramètres d'une page.

#6

Mis à jour par Serghei Mihai il y a environ 6 ans

  • Lié à Development #23196: utiliser le nouveau modèle pour la barre affichant les détails d'une annonce ajouté
#7

Mis à jour par Benjamin Dauvergne il y a environ 6 ans

Ack (juste une question pourquoi le aside est-il dans le block sidebar au lieu d'être autour ?)

#8

Mis à jour par Frédéric Péters il y a environ 6 ans

  • Statut changé de En cours à Résolu (à déployer)

Poussé partout.

Ack (juste une question pourquoi le aside est-il dans le block sidebar au lieu d'être autour ?)

La construction idéale mais n'existant pas aurait été :

{% if sidebar-block-not-empty %}
<aside>
{% block sidebar %}
{% endblock %}
</aside>
{% endif %}

Du coup c'était nécessaire pour assurer l'absence de balisage <aside> dans les pages sans barre latérale; sans pour antant demander aux applications de tirer depuis un gadjo/normal.html ou gadjo/sidebar.html selon les pages.

#9

Mis à jour par Frédéric Péters il y a environ 6 ans

Poussé une version 0.53 sur pypi, pour qu'elle soit attrapée par jenkins, mais la précédente version sur pypi (0.47) est encore récupérée, du coup j'ai poussé des commits supplémentaires pour être explicite sur ce niveau de version.

#10

Mis à jour par Frédéric Péters il y a plus de 5 ans

  • Statut changé de Résolu (à déployer) à Solution déployée

Formats disponibles : Atom PDF