Changeset 2005:7c2f3454ba94

Timestamp:

09/22/13 15:07:08 (12 years ago)

Author:

Anne Kozlika <kozlika@…>

Branch:

default

Message:

• Reprise complète du haut de page : allégement drastique du html, allégement également des css.
• Retour de l'image en fond de wrapper, la méthode précédemment adoptée pour avoir des colonnes égales mettait le pâté dans les js et les liens vers les ancres. Toutes mes confuses aux chatons morts par ma faute. Fixes #1689
• Mise en commentaire des règles responsives, je reprends tout à zéro (work in progress).

Files:

• admin/style/default.css (modified) (5 diffs)
• inc/admin/lib.dc.page.php (modified) (3 diffs)

admin/style/default.css

@@ -20 +20 @@
 #header {
      background: #676e78;
-     position: relative;
+     color: #FFF;
      border-bottom: 4px solid #A2CBE9;
      width: 100%;
+     display: table;
      }
 #wrapper {
      position: relative;
-     padding-top: 1em;
-     overflow: hidden; /* pour les hauteurs égales */
+     padding-top: 1.5em;
      float: left;
      width: 100%;
      z-index: 10;
+     background: #F7F7F7 url(bg_wrapper.png) repeat-y 15em;
      }
 .with-js #wrapper {
@@ -63 +64 @@
      border-top: 1px solid #ccc;
      background-color: #fff;
-     }
-#content, #main-menu { /* hauteurs égales */
-     padding-bottom: 200em;
-     margin-bottom: -200em;
      }
 /* to hide main-menu */
@@ -303 +300 @@
      /* titre de page */
      #content > h2 {
-          padding: 0 1.5em .5em 1em;
-          margin: 0 -1.5em .5em -1em;
+          padding: 0 1em .5em 1em;
+          margin: 0 -1em .5em -1em;
           background: #fff url(bg_h2.png) repeat-x center bottom;
           }
@@ -852 +849 @@
           border-bottom-color: #A2CBE9;
           }
-/* top (h1) */
-#top {
+/* header global h1, form#top-info-blog, ul#top-info-user */
+#header a {
+     color: #FFF;
+     }
+#header img {
+     vertical-align: middle;
+     padding-left: .5em;
+     }
+h1, #top-info-blog, #top-info-user {
+     display: table-cell;
+     padding: 8px 0;
      margin: 0;
+     font-size: 1em;
+     }
+/* h1 */
+h1 {
      padding: 0;
-     width: 14.5em;
-     float: left;
-     }
-     h1 {
-          padding: 0;
-          margin: 0;
-          height: 36px;
-          text-indent: -1000px;
-          }
-          h1 a {
-               position: absolute;
-               top: 0;
-               left: 0;
-               width: 174px; /* ie < 9 sucks */
-               width: 17.4rem;
-               height: 36px; /* ie < 9 sucks */
-               height: 3.6rem;
-               color: #fff;
-               background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
-               }
-          h1 a:hover, h1 a:focus {
-               background-position: 0 -94px;
-               }
-/* info-boxes */
-#info-boxes {
-     font-size: 12px; /* ie < 9 sucks */
-     font-size: 1.2rem;
-     line-height: 3em;
-     }
-     #info-boxes a {
-          font-weight: bold;
+     margin: 0;
+     text-indent: -1000px;
+     width: 16.5em;
+     }
+     h1 a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 174px; /* ie < 9 sucks */
+          width: 17.4rem;
+          height: 36px; /* ie < 9 sucks */
+          height: 3.6rem;
           color: #fff;
-          border-bottom-color: #ccc;
-          margin-left: .3em;
-          margin-right: .3em;
-          white-space: nowrap;
-          font-weight: normal;
-          }
-     #info-boxes a img {
-          vertical-align: middle;
-          padding-left: .3em;
-          }
-     #info-box1 {
-          margin: 0;
-          padding: 0 3px 0 18px;
-          color: #fff;
-          display: inline-block;
-          }
-          #info-box1 p {
-               margin: 0;
-               display: inline;
-               }
-          .with-js #info-box1 .hidden-if-js {
-               display: none;
-               }
-          #info-box1 select {
-               width: 145px; /* ie < 9 sucks */
-               width: 14.5em;
-               }
-          #info-box1 a {
-               margin-left: 1.33em;
-               }
-          #info-box1 input[type=submit] {
-               background: #000;
-               border-color: #999;
-               margin-left: .33em; 
-               }
-          #info-box1 input[type=submit]:hover {
-               background: #999;
-               }
-     #info-box2 {
-          margin: 0;
-          padding: 0 18px 0 0;
-          color: #fff;
-          float: right;
-          text-align: right;
-          }
-          #info-box2 span {
-               color: #999;
-               }
-          #info-box2 .logout {
-               margin-right: 0;
-               }
-          #info-box2 a.active {
-               border-bottom-color: #fff;
-               margin: 0;
-               padding: 1.2em .5em;
-               background-color: #fff;
-               color: #333;
-               font-weight: bold;
-               }
+          background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
+          }
+     h1 a:hover, h1 a:focus {
+          background-position: 0 -94px;
+          }
+/* top-info-blog */
+#top-info-blog select {
+     max-width: 20em;
+     }
+#top-info-blog a {
+     margin-left: 1.33em;
+     }
+#top-info-blog input[type=submit] {
+     background: #000;
+     border-color: #999;
+     margin-left: .33em; 
+     }
+#top-info-blog input[type=submit]:hover {
+     background: #999;
+     }
+#top-info-blog p {
+     display: inline-block;
+     margin: 0;
+     }
+/* top-info-user */
+#top-info-user {
+     padding: 0 18px 0 0;
+     list-style-type: none;
+     text-align: right;
+     }
+#top-info-user li {
+     display: inline-block;
+     margin-left: .5em;
+     padding-left: .5em;
+     border-left: 1px solid #999;
+     }
+#top-info-user li:first-child {
+     border-left: none;
+     }
+#top-info-user a.active {
+     border-bottom-color: #fff;
+     margin: 0;
+     padding: 16px .5em;
+     background-color: #fff;
+     color: #333;
+     font-weight: bold;
+     }
 /* ---------------------------------------------------------- MAIN-MENU ELEMENTS */
 #favorites-menu, #blog-menu, #system-menu, #plugins-menu {
@@ -2416 +2395 @@
      #info-box1 p.nomobile, label.nomobile { display: none; }
      }
+*/

inc/admin/lib.dc.page.php

@@ -73 +73 @@
                }
                $blog_box =
-               '<p><label for="switchblog" class="classic nomobile">'.
+               '<p><label for="switchblog" class="classic">'.
                __('Blogs:').'</label> '.
                $core->formNonce().
                form::combo('switchblog',$blogs,$core->blog->id).
-               '</p>'.
-               '<p class="hidden-if-js"><input type="submit" value="'.__('ok').'" /></p>';
+               '<input type="submit" value="'.__('ok').'" class="hidden-if-js" /></p>';
           }
 
@@ -125 +124 @@
           ($safe_mode ? ' safe-mode' : '').'" class="no-js">'."\n".
 
-          '<div id="header">'.
           '<ul id="prelude">'.
           '<li><a href="#content">'.__('Go to the content').'</a></li>'.
@@ -131 +129 @@
           '<li><a href="#qx">'.__('Go to search').'</a></li>'.
           '</ul>'."\n".
-          '<div id="top"><h1><a href="index.php">'.DC_VENDOR_NAME.'</a></h1></div>'."\n";
-
-          echo
-          '<div id="info-boxes">'.
-          '<div id="info-box1">'.
-          '<form action="index.php" method="post">'.
+          '<div id="header">'.
+          '<h1><a href="index.php"><span class="hidden">'.DC_VENDOR_NAME.'</span></a></h1>'."\n";
+
+          echo
+          '<form action="index.php" method="post" id="top-info-blog">'.
           $blog_box.
-          '<p class="nomobile"><a href="'.$core->blog->url.'" onclick="window.open(this.href);return false;" title="'.__('Go to site').
+          '<p><a href="'.$core->blog->url.'" onclick="window.open(this.href);return false;" title="'.__('Go to site').
           ' ('.__('new window').')'.'">'.__('Go to site').'<img src="images/outgoing.png" alt="" /></a>'.
           '</p></form>'.
-          '</div>'.
-          '<div id="info-box2">'.
-          '<a class="smallscreen'.(preg_match('/index.php$/',$_SERVER['REQUEST_URI']) ? ' active' : '').'" href="index.php">'.__('My dashboard').'</a>'.
-          '<span class="smallscreen"> | </span><a class="smallscreen'.(preg_match('/preferences.php(\?.*)?$/',$_SERVER['REQUEST_URI']) ? ' active' : '').
-          '" href="preferences.php">'.__('My preferences').'</a>'.
-          '<span class="smallscreen"> | </span><a href="index.php?logout=1" class="logout">'.sprintf(__('Logout %s'),$core->auth->userID()).
-          '<img src="images/logout.png" alt="" /></a>'.
-          '</div>'.
-          '</div>'.
-          '</div>';
+          '<ul id="top-info-user">'.
+          '<li><a class="'.(preg_match('/index.php$/',$_SERVER['REQUEST_URI']) ? ' active' : '').'" href="index.php">'.__('My dashboard').'</a></li>'.
+          '<li><a class="smallscreen'.(preg_match('/preferences.php(\?.*)?$/',$_SERVER['REQUEST_URI']) ? ' active' : '').
+          '" href="preferences.php">'.__('My preferences').'</a></li>'.
+          '<li><a href="index.php?logout=1" class="logout">'.sprintf(__('Logout %s'),$core->auth->userID()).
+          '<img src="images/logout.png" alt="" /></a></li>'.
+          '</ul>'.
+          '</div>'; // end header
 
           echo