===== Tableau de bord =====

**Objectif :** tableau de bord modulable \\
                                 
Options du tableau de bord, pour chaque module : \\
(Note : les favoris sont un module aussi)

  * Afficher sur le dashboard (radio : oui/non)
  * Zone d'affichage (select : Zone 1, Zone 2, Zone 3)
  * Largeur du module (select : étroit, moyen, large)
  * Position dans la zone (input numérique)

Le module est placé dans la zone déterminée par l'utilisateur.

Chaque module est placé (dans l'ordre donné par l'utilisateur) \\
dans une '''<div class="db-box $class">'''

$class = en fonction de la largeur choisie par l'utilisateur :
  * étroit : db-small
  * moyen : db-medium
  * large : db-large

Par défaut on a :

  * Favoris : zone 1, class="db-box db-large" id="icons"
  * Doc dc : zone 2, class="db-box db-small db-dc"
  * News dc : zone 2, class="db-box db-medium db-dc"

(Les icônes ont un id spécifique et les modules de dc ont une class spécifique)

----------------------------------------------------------------------------
**Source html**

<note warning>
Astuce : pour chaque couple </div><div> il faut soit coller \\
les balises soit prendre le retour à la ligne dans un commentaire \\
(je ne l'ai pas fait ici pour plus de clarté)</note>

<code html>
<div id="dashboard-main"><!-- boîte globale du dashboard (sans le menu) -->

	<div id="db-z1" class="db-zone"><!-- modules de Zone 1 -->
	</div>

	<div id="db-z2" class="db-zone"><!-- modules de Zone 2 -->
	</div>

	<div id="db-z3" class="db-zone"><!-- modules de Zone 3 -->
	</div>

</div>
</code>

----------------------------------------------------------------------------
**CSS pour démarrer**

<code css>
#dashboard-main {
    text-align:center;
    }
.db-zone {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    }
.db-box {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    }
.db-box.db-large {
    width: 100%;
    margin-bottom: 10px;
    }
.db-medium, .db-small {
    margin: 10px;
    min-height: 140px;
    }
.db-medium {
    width: 600px;
    }
.db-small {
    width: 280px;
    }
</code>


**Commentaire**

En principe, si je ne me suis pas plantée on devrait avoir un résultat du genre : \\
Si je choisis les icônes en medium, le billet rapide en médium, que je les mets  \\
tous les deux dans la zone 1 et que dans la zone 2 je mets les liens vers la doc \\
(small) et les news (small), la zone 2 se place à côté de la zone 1.

Démo : http://jsfiddle.net/UykqR/7/

(Note : je sais, la zone 2 ne vient pas à côté de la zone 1 et je sais pourquoi. Brainstorming en cours.)