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

#237 Posté par . État de l'entrée : corrigée
Tags : aucun
-1
28
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 (page perso) . É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 )

    « Moi, lorsque je n’ai rien à dire, je veux qu’on le sache. » Raymond Devos

    • [^] # Re: titre

      Posté par . Évalué à  2 (+0/-0) .

      Ça me va. On est bien d'accord que à gauche c'est le plus moche / moins visible...

      • [^] # Re: titre

        Posté par . É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...

  • # Non à la suppression de l'année !

    Posté par (page perso) . É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.

  • # Fait

    Posté par (page perso) . Évalué à  4 (+0/-0) .

    C'est fait.

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

      Posté par . É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 à ceux qui les ont postés. Nous n'en sommes pas responsables.