Suivi — Feuilles de style (CSS) Amélioration de la mise en forme du tableau de bord

#237 Posté par Davy Defaud le 28 février 2011 à 12:15. État de l’entrée : corrigée. Assigné à Bruno Michel.

Étiquettes : aucune

-1

fév.

2011

Voici quelques suggestions d'amélioration de la mise en forme du tableau de bord :

les lignes du tableau de bord étant particulièrement longues, un gain de place sur les dates pourrait être réalisé en changeant le format des dates de "jj/mm/aaaa à HH:MM" en "jj/mm HH:MM". En effet, comme seuls les messages récents sont affichés, il n'est nul besoin de conserver l'année. En outre, une espace insécable entre la date et l'heure éviterait un disgracieux renvoi à la ligne (tout en évitant la surcharge induite s'il fallait affecter chaque cellule concernée par une classe CSS pour y définir un « white-space: nowrap; », quoiqu'une classe date_cell permettrait, par exemple, de centrer la date, ce qui serait plus élégant) ;
les cellules contenant des nombres gagneraient à être alignées à droite, via la définition d'une classe de cellule de tableau num_cell ;
le libellé de la colonne « Nb de réponses » est trop grand et fait perdre trop de place ; « rép. », serait bien plus concis. Et pour ne pas être trop abscons, l'utilisation d'une balise « abbr » permettrait d'en préciser la signification :
<abbr title="Nombre de réponses">rép.</abbr>.

# titre

Posté par claudex le 28 février 2011 à 12:29. Évalué à 3 (+0/-0).

les cellules contenant des nombres gagneraient à être alignées à droite, via la définition d'une classe de cellule de tableau num_cell ;

Je trouve que la note serait plus lisible si elle était centrée.

le libellé de la colonne « Nb de réponses » est trop grand et fait perdre trop de place ; « rép. », serait bien plus concis. Et pour ne pas être trop abscons, l'utilisation d'une balise « abbr » permettrait d'en préciser la signification :

Vu qu'elle devrait contenir « Nouveaux ! » s'il y a de nouveaux commentaires, ce serait bien qu'elle reste comme elle est ( http://linuxfr.org/suivi/le-tableau-de-bord-nindique-plus-les-contenus-non-lus )

« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

Répondre
- [^] # Re: titre
  
  Posté par Davy Defaud le 28 février 2011 à 15:45. Évalué à 2 (+0/-0).
  
  Ça me va. On est bien d'accord que à gauche c'est le plus moche / moins visible...
  
  Répondre
  - [^] # Re: titre
    
    Posté par Davy Defaud le 28 février 2011 à 15:57. Évalué à 2 (+0/-0).
    
    Cependant, afin de gagner de la place, je pense qu'un symbole, une mise en forme particulière (couleur, gras...) ou une icône seraient bienvenus pour signifier la présence de nouveau messages, plutôt que long « nouveau ! ». Les tableaux super-larges c'est pénible sur un petit écran comme celui d'un téléphone...
    
    Répondre
    - [^] # Re: titre
      
      Posté par Davy Defaud le 28 février 2011 à 16:05. Évalué à 1 (+0/-0).
      
      s/de nouveau messages/de nouveaux messages/
      
      Répondre
# Non à la suppression de l'année !

Posté par Naha (site web personnel) le 28 février 2011 à 15:32. Évalué à 2 (+0/-0).

En effet, comme seuls les messages récents sont affichés, il n'est nul besoin de conserver l'année.

Sauf pour les gens qui postent seulement quelques commentaires par an, et qui peuvent donc avoir des commentaires remontant à une ou deux années précédentes.

Répondre
- [^] # Re: Non à la suppression de l'année !
  
  Posté par Davy Defaud le 28 février 2011 à 15:51. Évalué à 2 (+0/-0).
  
  Au temps pour moi ! Je croyais qu'ils disparaissaient au bout d'un certain temps et non au bout d'un certain nombre de messages...
  
  Répondre

# Fait

Posté par Bruno Michel (site web personnel) le 01 mars 2011 à 21:50. Évalué à 4 (+0/-0).

C'est fait.

[^] # I want more. Yes we can !

Posté par Davy Defaud le 02 mars 2011 à 23:43. Évalué à 3 (+0/-0).

Merci NoNo !

J'ai quelques modifications complémentaires à te demander. Pourrais-tu également raccourcir le libellé de la dernière colonne, intitulée « Dernière réponse », en « Dernière rép. », afin d'éviter le renvoi à la ligne et l'étrange élargissement (sur Firefox 4.0b7) qu'il provoque sur la dernière colonne (celle-ci garde la largeur de la cellule d'entête comme si le renvoi n'avait pas eu lieu) ? J'ai expérimenté avec firebug et ça fait l'affaire, enfin quand le navigateur n'est pas trop large...

En effet, quand le tableau a de la place pour s'étaler (au delà de la taille minimum nécessaire pour qu'il n'ait aucun contenu de cellule à mettre sur plusieurs lignes), le bord du tableau continu à s'élargir, mais le contenu ne suit plus. J'ai trouvé la raison de ce phénomène, il est dû au fait que le tableau s'affiche, non comme un tableau, mais comme un bloc, à cause d'une des propriétés CSS dans le bloc de définitions suivant (CSS par défaut) :

article, ul.threads > li.comment, .markdown_cheatsheet, #contents > form, form#new_post, body#users-comments #contents > ul > li, body#comments-create #contents > ul > li#comment_new, body#comments-show #contents > ul > li.comment, body#wiki_pages-revision #contents, body#dashboard-index #contents table, body#trackers-index #contents table, body#redaction-index #container > div, body#boards-show #contents, body#stylesheets-edit #contents, body#wiki_pages-changes #contents, body#admin-index #container > ul, #redaction #chat {
    background: none repeat scroll 0 0 white;
    border: 1px solid #A99C90;
    border-radius: 6px 6px 6px 6px;
    display: block;
    font-size: small;
    margin-bottom: 15px;
    padding: 10px 34px;
}

C'est le « display: block » qui est le responsable. Le problème, c'est que si tu laisses le tableau en « display: table » et que tu as « border-collapse: collapse », tu perds tes coins ronds. La solution magique à ça, c'est de définir « display: inline-block » pour ces tableaux, ce qui suppose de les isoler des propriétés communes :

article, ul.threads > li.comment, .markdown_cheatsheet, #contents > form, form#new_post, body#users-comments #contents > ul > li, body#comments-create #contents > ul > li#comment_new, body#comments-show #contents > ul > li.comment, body#wiki_pages-revision #contents, body#dashboard-index #contents table, body#trackers-index #contents table, body#redaction-index #container > div, body#boards-show #contents, body#stylesheets-edit #contents, body#wiki_pages-changes #contents, body#admin-index #container > ul, #redaction #chat {
    background: none repeat scroll 0 0 white;
    border: 1px solid #A99C90;
    border-radius: 6px;
    /*display: block; /* inutile si tous les autres élts sont de type bloc */
    font-size: small;
    margin-bottom: 15px;
    padding: 10px 34px;
}

body#dashboard-index #contents table, body#trackers-index #contents table {
    display: inline-block; /* pour les coins arrondis avec collapse */
}

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.