Dotclear

Changeset 2096:c757544b90c3


Ignore:
Timestamp:
09/25/13 22:16:54 (11 years ago)
Author:
Anne Kozlika <kozlika@…>
Branch:
default
Message:

Enrichissement de la charte (wip)
Un debug plus visible (mais alors vraiment)

Location:
admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • admin/_charte.php

    r2038 r2096  
    334334                         <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">«&nbsp;Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant&nbsp;»</a></p> 
    335335 
     336                    <h2><span class="page-title">Les tableaux</span></h2> 
     337                         <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire  
     338                         ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles 
     339                         sont communes à tout les tableaux.</p> 
     340 
     341                    <h3 id="communes">Règles communes</h3> 
     342                         <h4>Largeur du tableau</h4> 
     343                              <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires  
     344                              à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables  
     345                              sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>,  
     346                              qui servira de «&nbsp;conteneur&nbsp;».</p> 
     347                         <h4>Accessibilité</h4> 
     348                              <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas&nbsp;!&nbsp;».  
     349                              On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille  
     350                              le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.</p> 
     351                          <h4>Les classes</h4> 
     352                              <p>Des classes particulières peuvent être attribuées aux lignes :</p> 
     353                                   <ul> 
     354                                        <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger  
     355                                        au survol&nbsp;;</li> 
     356                                        <li><code>offline</code> : pour un noir estompé (gris quoi).</li> 
     357                                   </ul> 
     358                              <p>Des classes particulières peuvent être appliquées aux cellules :</p> 
     359                              <ul> 
     360                                   <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la  
     361                                   largeur de la page&nbsp;;</li> 
     362                                   <li><code>maximal</code> : la cellule prendra toute la largeur restante disponible&nbsp;;</li> 
     363                                   <li><code>count</code> : le contenu de la cellule sera aligné à droite avec un petit retrait.</li> 
     364                              </ul> 
     365                    <h3 id="ordinaires">Tableau classique</h3> 
     366                    <div class="table-outer"> 
     367                         <table> 
     368                              <caption class="hidden">Liste des entrées</caption> 
     369                              <tr> 
     370                                   <th colspan="2" class="first">Titre</th> 
     371                                   <th scope="col">Date</th> 
     372                                   <th scope="col">Catégorie</th> 
     373                                   <th scope="col">Auteur</th> 
     374                                   <th scope="col">Commentaires</th> 
     375                                   <th scope="col">Rétroliens</th> 
     376                                   <th scope="col">État</th> 
     377                              </tr> 
     378                              <tr class="line"> 
     379                                   <td class="nowrap"><input type="checkbox" name="name1" value="value1"  /></td> 
     380                                   <td class="maximal" scope="row"><a href="#">Mon cher Franck</a></td> 
     381                                   <td class="nowrap count">06/08/2013 19:16</td> 
     382                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     383                                   <td class="nowrap">kozlika</td><td class="nowrap count">4</td> 
     384                                   <td class="nowrap count">0</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" />  </td> 
     385                              </tr> 
     386                              <tr class="line offline"> 
     387                                   <td class="nowrap"><input type="checkbox" name="name2" value="value2"  /></td> 
     388                                   <td class="maximal" scope="row"><a href="#">Dotclear 2.3.0</a></td> 
     389                                   <td class="nowrap count">16/05/2011 22:29</td> 
     390                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     391                                   <td class="nowrap">kozlika</td><td class="nowrap count">5</td> 
     392                                   <td class="nowrap count">0</td><td class="nowrap status"><img alt="Non publié" title="Non publié" src="images/check-off.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" />  </td> 
     393                              </tr> 
     394                              <tr class="line"> 
     395                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2148" /></td> 
     396                                   <td class="maximal" scope="row"><a href="#">Causons opéra au Tamm Bara</a></td> 
     397                                   <td class="nowrap count">24/11/2009 23:10</td> 
     398                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     399                                   <td class="nowrap">kozlika</td> 
     400                                   <td class="nowrap count">4</td><td class="nowrap count">1</td> 
     401                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td> 
     402                              </tr> 
     403                              <tr class="line"> 
     404                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2136"  /></td> 
     405                                   <td class="maximal" scope="row"><a href="#">Souffler six bougies</a></td> 
     406                                   <td class="nowrap count">14/08/2009 00:00</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     407                                   <td class="nowrap">kozlika</td> 
     408                                   <td class="nowrap count">4</td><td class="nowrap count">2</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td> 
     409                              </tr> 
     410                              <tr class="line"> 
     411                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2129"  /></td> 
     412                                   <td class="maximal" scope="row"><a href="#">Dotclear et grenadine, troisième édition</a></td> 
     413                                   <td class="nowrap count">15/06/2009 07:39</td> 
     414                                   <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     415                                   <td class="nowrap">kozlika</td> 
     416                                   <td class="nowrap count">9</td> 
     417                                   <td class="nowrap count">1</td> 
     418                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td> 
     419                              </tr> 
     420                              <tr class="line"> 
     421                                   <td class="nowrap"><input type="checkbox" name="entries[]" value="2111"  /></td> 
     422                                   <td class="maximal" scope="row"><a href="#">L'abc dotclear est né</a></td> 
     423                                   <td class="nowrap count">19/03/2009 10:31</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 
     424                                   <td class="nowrap">kozlika</td> 
     425                                   <td class="nowrap count">1</td><td class="nowrap count">0</td> 
     426                                   <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" />   </td> 
     427                              </tr> 
     428                         </table> 
     429                    </div>          
     430 
     431 
    336432               </div><!-- /content --> 
    337433          </div><!-- /main --> 
  • admin/style/default.css

    r2085 r2096  
    415415     font: 100% "Andale Mono","Courier New",monospace; 
    416416     } 
     417code { 
     418     background: #FAFAD1; 
     419     } 
    417420pre { 
    418421     white-space: pre; 
     
    23522355     width: 100%; 
    23532356     height: 4px; 
    2354      background: #d99; 
     2357     background: #EBEB47; 
    23552358     } 
    23562359#debug div { 
     
    23632366#debug:hover { 
    23642367     height: auto; 
     2368     padding: 2px 1em; 
     2369     z-index: 100; 
    23652370     } 
    23662371#debug:hover div { 
     
    24682473     #content { 
    24692474          margin: 0; 
    2470           padding: 0 .5em; 
     2475          padding: 0 .5em !important; 
    24712476          } 
    24722477     #collapser { 
     
    24762481          margin: 0; 
    24772482          padding: 6px 0; 
     2483          } 
     2484     #dashboard-boxes .box.medium, 
     2485     #dashboard-boxes .box.small, 
     2486     #dashboard-boxes .box.large { 
     2487          width: 90%; 
     2488          margin: 10px auto; 
    24782489          } 
    24792490     } 
     
    24962507          width: 150px; 
    24972508          } 
    2498      #dashboard-boxes .box.small 
    2499      #dashboard-boxes .box.medium { 
    2500           margin: 10px 0; 
    2501           width: 280px; 
    2502           } 
    25032509     #content.with-help #help-button { 
    25042510          top: 101px; 
Note: See TracChangeset for help on using the changeset viewer.

Sites map