Cleanup of header to normalize margins and white space. Improved display of user login form. Added gHide, gShowBlock, gShowInline, gClose classes to handle show and hide functions. Half-baked idea which will need refinement.

3 files changed, 69 insertions, 60 deletions

diff --git a/modules/user/views/login.html.php b/modules/user/views/login.html.php
index a4005ebf..2039dc49 100644
--- a/modules/user/views/login.html.php
+++ b/modules/user/views/login.html.php
@@ -1,20 +1,13 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
-<ul id="gLoginMenu">
+<ul id="gLoginMenu" class="gInline">
   <? if ($user): ?>
-    <a href="<?= url::site("user/{$user->id}?continue=" . url::current(true))?>"><?= _("Modify Profile") ?></a>
-  | <a href="<?= url::site("logout?continue=" . url::current(true)) ?>" id="gLogoutLink">
-      <?= _("Logout") ?>
-    </a>
+    <li><a href="<?= url::site("user/{$user->id}?continue=" . url::current(true))?>">
+      <?= _("Modify Profile") ?></a></li>
+    <li><a href="<?= url::site("logout?continue=" . url::current(true)) ?>" id="gLogoutLink">
+      <?= _("Logout") ?></a></li>
   <? else: ?>
-    <span id="gLoginLink">
-    <a href="javascript:show_login('<?= url::site("login") ?>')">
-      <?= _("Login") ?>
-    </a>
-  </span>
-  <span id="gLoginClose" class="gDisplayNone">
-    <?= _("Login") ?> | <a href="javascript:close_login()">X</a>
-  </span>
-  <div id="gLoginFormContainer"></div>
+    <li id="gLoginFormContainer"></li>
+    <li id="gLoginLink"><a href="javascript:show_login('<?= url::site("login") ?>')">Login</a></li>
+    <li class="gClose gHide"><a href="javascript:close_login()">X</a></li>
   <? endif; ?>
 </ul>
-
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 925d8a7b..aa50c5c6 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -4,10 +4,10 @@
  * @requires YUI reset, font, grids, and base CSS
  *
  * Sheet organization:
- * 1) Basic HTML elements (headings, links, lists, tables, forms)
+ * 1) Basic HTML elements, global text styles
  * 2) Layout containers (view, header, content, sidebar, footer)
  * 3) Generic content containers (item, block)
- * 4) Specific content containers and blocks (albums, metadata, comments)
+ * 4) Specific content blocks (albums, metadata, comments)
  * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
  * 6) Generic styles (.gInline, gOdd/gEven, etc.)
  * 7) Forms (general and specific)
@@ -16,7 +16,7 @@
 
 /**
  ** *******************************************************************
- * 1) HTML elements (body, headings, links, lists, tables, forms)
+ * 1) Basic HTML elements, global text styles
  ** *******************************************************************
  */
 
@@ -165,7 +165,7 @@ table.gBlockContent td {
 
 /**
  ** ****************************************************************
- * 4) Specific content containers and blocks (albums, metadata, comments)
+ * 4) Specific content blocks (albums, metadata, comments)
  ** ****************************************************************
  */
 
@@ -173,7 +173,7 @@ table.gBlockContent td {
 
 #gLogo {
   float: left;
-  margin: 10px;
+  margin: 5px 10px 10px 20px;
 }
 
 .gThumbnail {
@@ -201,7 +201,6 @@ table.gBlockContent td {
 .gItem {
   border: 1px solid #ccc;
   float: left;
-  list-style: none;
   margin: 0 24px 10px 0;
   padding: 5px 0 5px 0;
   text-align: center;
@@ -259,7 +258,6 @@ table.gMetadata td.toggle {
 }
 
 #gComments ul li {
-  list-style-type: none;
   margin-bottom: 15px;
 }
 
@@ -280,6 +278,7 @@ table.gMetadata td.toggle {
 
 .gError {
   color: red;
+  padding-bottom: 0;
 }
 
 .gWarning {
@@ -303,18 +302,17 @@ table.gMetadata td.toggle {
   border: 1px solid #c0c0c0;
   border-top: none;
   float: right;
-  margin-right: 10px;
-  padding: 5px;
-  text-align: right;
+  margin-right: 20px;
+  padding: 0;
 }
 
 /* Site Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gSiteMenu {
-  background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
   border-bottom: 1px solid #ccc;
   clear: both;
   font-size: 1.2em;
+  padding-left: 20px;
   width: 100%;
 }
 
@@ -333,17 +331,14 @@ table.gMetadata td.toggle {
 /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gBreadcrumbs {
-  list-style-type: none;
-  height: 30px;
-  margin: 1em 0;
+  height: 32px;
   padding-left: 20px;
 }
 
 #gBreadcrumbs li {
   background: transparent url('../images/icon_breadcrumb_separator.gif') no-repeat scroll left center;
   float: left;
-  list-style-type: none;
-  padding-left: 12px;
+  padding: 10px 0 10px 12px;
 }
 
 #gBreadcrumbs li.root {
@@ -539,6 +534,32 @@ table.gMetadata td.toggle {
   display: none;
 }
 
+.gClose a {
+  border: 1px solid #ccc;
+  color: #ccc;
+  display: block;
+  font-weight: bold;
+  padding: 1px 3px;
+}
+
+.gClose a:hover {
+  border: 1px solid #666;
+  color: #666;
+  text-decoration: none;
+}
+
+.gHide {
+  display: none;
+}
+
+.gShowBlock {
+  display: block;
+}
+
+.gShowInline {
+  display: inline;
+}
+
 /**
  ** *******************************************************************
  * 8) Forms (general and specific)
@@ -619,12 +640,6 @@ button {
 
 /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-form ul, form li {
-  list-style: none !important;
-}
-form ul {
-}
-
 form li {
   margin-top: .5em;
   padding: .3em 1.5em .3em 1em;
@@ -648,19 +663,7 @@ textarea {
 
 .gInline li {
   float: left;
-  padding: .3em .5em .4em;
-  text-align: left;
-}
-
-.gInline input {
-}
-
-.gInline input[type="Submit"] {
-  margin-top: 1em;
-}
-
-.gInline .gNoLabels input[type="Submit"] {
-  margin-top: 0;
+  padding: .3em .5em .4em .5em;
 }
 
 .gInline input[type="text"],
@@ -670,6 +673,10 @@ textarea {
   width: 10em;
 }
 
+.gInline input[type="Submit"] {
+  margin-top: 1em;
+}
+
 input:focus,
 textarea:focus,
 option:focus {
@@ -713,17 +720,26 @@ li.gError select {
 
 /* Login form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gHeader #gLoginForm li {
-  float: left;
+#gHeader #gLoginFormContainer {
+  padding: 0;
 }
-#gLoginForm fieldset {
+
+#gHeader #gLoginForm fieldset {
   border: none;
 }
 
-#gLoginForm fieldset legend {
+#gHeader #gLoginForm li {
+  margin-top: 0;
+}
+
+#gHeader #gLoginForm legend {
   display: none;
 }
 
+#gHeader #gLoginForm button {
+  margin-top: 1em;
+}
+
 /* Search form ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gSearchForm {
@@ -731,11 +747,12 @@ li.gError select {
   margin-right: 20px;
 }
 
-#gSearchForm input.text {
-  padding: 1px;
+#gSearchForm label {
+  display: none;
 }
 
-#gSearchForm input.submit {
+#gSearchForm input[type="submit"] {
+  margin-top: 0;
 }
 
 /* Comment form ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
diff --git a/themes/default/js/user.js b/themes/default/js/user.js
index 33aeaa60..06d43d15 100644
--- a/themes/default/js/user.js
+++ b/themes/default/js/user.js
@@ -1,6 +1,6 @@
 function show_login(url) {
   $("#gLoginLink").hide();
-  $("#gLoginClose").show();
+  $(".gClose").show();
   $.get(url, function(data) {
     $("#gLoginFormContainer").html(data);
     ajaxify_login_form();
@@ -8,7 +8,6 @@ function show_login(url) {
 }
 
 function ajaxify_login_form() {
-  $("#gLoginMenu form ul").addClass("gInline");
   $("form#gLoginForm").ajaxForm({
     target: "#gLoginFormContainer",
     success: function(responseText, statusText) {
@@ -23,7 +22,7 @@ function ajaxify_login_form() {
 
 function close_login() {
   $("#gLoginForm").remove();
-  $("#gLoginClose").hide();
+  $(".gClose").hide();
   $("#gLoginLink").show();
   $("input#gUsername").val("");
   $("input#gPassword").val("");