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.

2026-07-11 17:53:50 -04:00 · 2008-11-22 20:36:46 +00:00
parent 47442f9dd2
commit ac9df35d8a
3 changed files with 69 additions and 60 deletions
--- 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>
-
--- 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 ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--- 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("");