Changeset 2351:8fee74237ff5 for admin

Timestamp:

10/13/13 18:22:40 (12 years ago)

Author:

Anne Kozlika <kozlika@…>

Branch:

2.6

Message:

Ajustements sur la page de gestion des thèmes (suite).
Compléments pour la charte.

Location:

admin

Files:

• _charte.php (modified) (5 diffs)
• style/default.css (modified) (6 diffs)

admin/_charte.php

@@ -328 +328 @@
                          <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>
 
-                    <h2>Tableaux</h2>
+                    <h2 id="common">Tableaux</h2>
                          <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 
                          ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles
                          sont communes à tout les tableaux.</p>
 
-                    <h3 id="communes">Règles communes</h3>
+                    <h3>Règles communes</h3>
                          <h4>Largeur du tableau</h4>
                               <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 
@@ -357 +357 @@
                                    <li><code>count</code> : le contenu de la cellule sera aligné à droite avec un petit retrait.</li>
                               </ul>
-                    <h3 id="ordinaires">Tableau classique</h3>
+                    <h3 id="courants">Tableau classique</h3>
                     <div class="table-outer">
                          <table>
@@ -423 +423 @@
                     </div>         
                     
-                    <h3>Tableau avec ordonnancement</h3>
+                    <h3 id="dragable">Tableau avec ordonnancement</h3>
                     <p>Les tableaux permettant l'ordonnancement doivent offrir la possibilité d'effectuer le classement grâce à
                     des inputs placés en début de ligne pour que le classement soit possible même lorsque cette fonctionnalité est
@@ -533 +533 @@
           </div><!-- /main -->
           <div id="main-menu">
-               <div class="info">
-                    <p>Cette page vise à présenter les règles graphiques et conventions utilisées dans les pages de l'administration
-                    d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 
-                    une illustration. L'observation de son code source peut donc servir de complément aux descriptions.</p>
-               </div>
-               <div id="favorites-menu">
-                    <h3>Typo</h3>
+               <ul><li class="pretty-title">Typographie
                     <ul>
                          <li><a href="#texte">Texte</a></li>
                          <li><a href="#titres">Titres hx</a></li>
                     </ul>
-               </div><!-- /favorites-menu -->
-               <div id="blog-menu">
-                    <h3>Layouts</h3>
+                    </li>
+                    <li class="pretty-title">Layouts
                     <ul>
                          <li><a href="#onglets">Onglets</a></li>
                          <li><a href="#multi-colonnage">Multi-colonnage</a></li>
                     </ul>
-               </div><!-- /blog-menu -->
-               <div id="system-menu">
-                    <h3>Interactions</h3>
+                    </li>
+                    <li class="pretty-title">Interactions
                     <ul>
                          <li><a href="#elements">Éléments de formulaire</a></li>
@@ -559 +551 @@
                          <li><a href="#messages">Messages</a></li>
                     </ul>
-               </div><!-- /system-menu -->
-               <div id="plugins-menu">
-                    <h3>Navigation</h3>
+                    </li>
+                    <li class="pretty-title">Navigation
                     <ul>
                          <li><a href="#direct">Accès direct</a></li>
                          <li><a href="#prevnext">Précédent, suivant</a></li>
                     </ul>
-               </div><!-- /plugins-menu -->
+                    </li>
+                    <li class="pretty-title">Tableaux
+                    <ul>
+                         <li><a href="#commons">Règles communes</a></li>
+                         <li><a href="#courants">Tableaux courants</a></li>
+                         <li><a href="#dragables">Tableaux ordonnancés</a></li>
+                    </ul>
+                    </li>
+               </ul>
+               <div class="info vertical-separator">
+                    <p>Cette page vise à présenter les règles graphiques et conventions utilisées dans les pages de l'administration
+                    d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 
+                    une illustration. L'observation de son code source peut donc servir de complément aux descriptions.</p>
+               </div>
           </div><!-- /main-menu -->
 

admin/style/default.css

@@ -1574 +1574 @@
      }
 /* ------------------------------------------------------------------- blog_theme.php */
+/* pour les alignements verticaux */
+#theme-new, #theme-activate, #theme-deactivate {
+     margin-left: -10px;
+     margin-right: -10px;
+     }
 .box.theme {
-     margin: .5em;
+     margin: 5px;
      padding: 10px 10px 5px 10px;
      border: 1px solid #dfdfdf;
-     min-height: 275px;
      position: relative;
      }
@@ -1584 +1588 @@
      background: #ecf0f1 url(texture.png);
      }
-#theme-new .box.theme {
-     width: 260px;
-     }
-#theme-activate .box.theme {
-     min-height: 300px;
-     }
-#theme-deactivate .box.theme {
-     min-height: 90px;
-     }
-#theme-deactivate .box.theme:hover {
-     background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
-     }
 .module-name {
      margin-bottom: .5em;
@@ -1602 +1594 @@
      text-align: center;
      }
-.with-js .module-sshot:hover {
-     cursor: pointer;
-     }
-.current-theme .module-sshot:hover {
-     cursor: auto;
-     }
 .module-sshot img {
-     padding: .5em;
+     padding: 5px;
      background: #f7f7f7;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      border: 3px solid #fff;
-     padding: .5em;
-     }
-.theme .module-sshot img {
-     max-width: 260px; /* pour ceux qui n'ont pas de miniature */
-     }
-#theme-new .theme .module-sshot img {
-     max-width: 240px; /* pour ceux qui n'ont pas de miniature */
+     }
+.module-actions {
+     margin-top: 1em;
+     }
+.bloc-toggler {
+     text-align: right;
+     }
+.bloc-toggler img {
+     opacity: .4;
+     }
+.bloc-toggler img:hover {
+     opacity: 1;
+     }
+.bloc-toggler a:focus img {
+     opacity: 1;
+     }
+span.module-version:before {
+     content: "- ";
+     }
+.toggle-bloc .mod-more {
+     display: block;
+     margin-left: 0;
+     }
+.box.theme input {
+     margin-bottom: 1em;
+     }
+/**
+Les screenshots des thèmes ont deux tailles possibles :
+- dans Ajouter des thèmes : 240px (+ 10 padding image + 20 padding boîte + 6 bordure + 2 ombrage = 278)
+- dans Thèmes installés : 280px (+ 10 padding-image + 20 padding-boîte + 2 ombrage = 318)
+On adapte largeur et hauteur en fonction 
+*/
+#theme-new .box.theme { /* Ajouter un thème */
+     width: 278px;
+     min-height: 275px;
+     }
+#theme-new .module-sshot img { /* Pour ceux qui n'ont pas de miniature on contraint l'image */
+     max-width: 240px;
      max-height: 210px;
      overflow: hidden;
      }
-.module-actions {
-     margin-top: 1em;
-     }
-.bloc-toggler {
-     text-align: right;
-     }
-.bloc-toggler img {
-     opacity: .4;
-     }
-.bloc-toggler img:hover {
-     opacity: 1;
-     }
-.bloc-toggler a:focus img {
-     opacity: 1;
-     }
-span.module-version:before {
-     content: "- ";
-     }
+#theme-deactivate .box.theme { /* Thèmes désactivés */
+     width: 278px;
+     }
+#theme-activate .box.theme { /* Thèmes installés */
+     width: 318px;
+     min-height: 304px;
+     }
+#theme-deactivate .box.theme:hover {
+     background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
+     }
+/* si js est là, les infos viennent par dessus le screenshot */
 .with-js #theme-new .module-infos.toggle-bloc,
 .with-js #theme-new .module-actions.toggle-bloc {
      position: absolute;
-     top: 128px;
      left: 10px;
      width: 239px;
+     margin: 0;
      padding: 10px;
      background: rgba(250, 250, 250, .95);
@@ -1658 +1668 @@
      top: 208px;
      height: 40px;
-     margin: 0;
      border-bottom: 1px solid #e3e3e3;
-     background: rgba(250, 250, 250, .95);
-     }
-.toggle-bloc .mod-more {
-     display: block;
-     margin-left: 0;
-     }
-.box.current-theme {
-     width: 652px;
-     margin: .5em;
-     padding: 20px 18px 10px;
+     }
+.with-js .module-sshot:hover {
+     cursor: pointer;
+     }
+/* mise en forme pour la boîte du thème courant */
+.box.current-theme { /* Thème courant */
+     width: 646px;
+     margin: 5px;
+     padding: 20px 18px 6px;
      background: #fff url(texture.png);
      border: 1px solid #eee;
      border-radius: .5em;
-     min-height: 300px;
+     min-height: 326px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+     position: relative;
+     }
+.current-theme .module-sshot:hover {
+     cursor: auto;
      }
 .current-theme .module-sshot img {
      float: left;
      margin-right: 2em;
-     margin-bottom: 1em;
-     border: 3px solid #fff;
-     padding: .5em;
+     border: 9px solid #fff;
+     padding: 5px;
      }
 .current-theme .module-name {
      color: #D33800;
-     font-size: 1.33em;
-     }
-.box.theme input {
+     font-size: 1.5em;
      margin-bottom: 1em;
      }
@@ -1693 +1702 @@
      width: auto;
      overflow: hidden;
-     padding-top: 3em;
+     padding-top: 2em;
      margin: 1.5em 0 2em;
      background: transparent url(../images/minus-theme.png) no-repeat left top;
+     }
+.current-theme .actions-buttons {
+     position: absolute;
+     bottom: 0;
+     right: 18px;
      }
 /* ------------------------------------------------------------------ categories.php */
@@ -2194 +2208 @@
      padding: 2px .5em;
      }
+.guideline #main-menu ul {
+     margin: 0;
+     padding: 0;
+     font-weight: normal;
+     }
+.guideline #main-menu li {
+     padding-left: 1em;
+}
 /* ------------------------------------------------------------------------------------
                                                                                                     CLASSES