Grouped inline form styles. No longer using gInline class in favor of specific form IDs that can be styled differently depending on which container they appear. Added gDescription class, dropped gUnderState for semantics. CSS cleanup.

6 files changed, 111 insertions, 191 deletions

diff --git a/modules/tag/helpers/tag.php b/modules/tag/helpers/tag.php
index fd683bc1..595f4b08 100644
--- a/modules/tag/helpers/tag.php
+++ b/modules/tag/helpers/tag.php
@@ -80,7 +80,7 @@ class tag_Core {
   }
 
   public static function get_add_form($item_id) {
-    $form = new Forge(url::site("tags"), "", "post");
+    $form = new Forge(url::site("tags"), "", "post", array("id" => "gAddTagForm"));
     $group = $form->group(_("Add Tag"));
     $group->input("tag_name");
     $group->hidden("item_id")->value($item_id);
diff --git a/modules/tag/js/tag.js b/modules/tag/js/tag.js
index 98643c2d..74e48998 100644
--- a/modules/tag/js/tag.js
+++ b/modules/tag/js/tag.js
@@ -3,14 +3,14 @@ $("document").ready(function() {
 });
 
 function ajaxify_tag_form() {
-  $("#gTag form").ajaxForm({
+  $("#gAddTagForm").ajaxForm({
     complete: function(xhr, statusText) {
-      $("#gTag form").replaceWith(xhr.responseText);
+      $("#gAddTagForm").replaceWith(xhr.responseText);
       if (xhr.status == 201) {
         $.get($("#gTagCloud").attr("src"), function(data, textStatus) {
 	  $("#gTagCloud").html(data);
 	});
-	$("#gTag form").clearForm();
+	$("#gAddTagForm").clearForm();
       }
       ajaxify_tag_form();
     }
diff --git a/modules/user/js/user.js b/modules/user/js/user.js
index c547e511..fe7adf77 100644
--- a/modules/user/js/user.js
+++ b/modules/user/js/user.js
@@ -4,19 +4,20 @@
  */
 
 $("document").ready(function() {
-  $("#gLoginLink").click(function(event){
+  $("#gLoginLink").click(function(event) {
     var url = $("#gLoginLink a").attr("href");
     $.get(url, function(data) {
-	  $('#gLoginLink').hide();
-	  $("#gLoginMenu").append('<li><a href="#">X</a></li>');
-	  $("#gLoginMenu li:last").addClass("gClose").show();
-	  $("#gLoginMenu .gClose a").click(function(){
-	    $("#gLoginForm").remove();
-	    $("#gLoginMenu .gClose").remove();
-	    $("#gLoginLink").show();
-	    $("input#gUsername").val("");
-	    $("input#gPassword").val("");
-	  });
+	    $('#gLoginLink').hide();
+	    $("#gLoginMenu").append('<li><a href="#">X</a></li>');
+	    $("#gLoginMenu li:last").addClass("gClose").show();
+	    $("#gLoginMenu .gClose a").click(function() {
+	      $("#gLoginForm").remove();
+	      $("#gLoginMenu .gClose").remove();
+	      $("#gLoginFormContainer").hide();
+	      $("#gLoginLink").show();
+	      $("input#gUsername").val("");
+	      $("input#gPassword").val("");
+	    });
       $("#gLoginFormContainer").html(data).hide().fadeIn();
       ajaxify_login_form();
     });
@@ -25,7 +26,7 @@ $("document").ready(function() {
 });
 
 function ajaxify_login_form() {
-  $("form#gLoginForm").ajaxForm({
+  $("#gLoginForm").ajaxForm({
     target: "#gLoginFormContainer",
     success: function(responseText, statusText) {
       if (!responseText) {
diff --git a/modules/user/views/login.html.php b/modules/user/views/login.html.php
index ae558dfa..452f51ca 100644
--- a/modules/user/views/login.html.php
+++ b/modules/user/views/login.html.php
@@ -1,5 +1,5 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
-<ul id="gLoginMenu" class="gInline">
+<ul id="gLoginMenu">
   <? if ($user): ?>
     <li><a href="<?= url::site("user/{$user->id}?continue=" . url::current(true))?>">
       <?= _("Modify Profile") ?></a></li>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index a5689eb6..466c2c32 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -6,8 +6,8 @@
  * Sheet organization:
  * 1)  Basic HTML elements
  * 2)  Base text styles
- * 3)  Layout containers
- * 4)  Generic content containers
+ * 3)  Page layout containers
+ * 4)  Reusable content containers
  * 5)  Specific content blocks
  * 6)  Navigation and menus
  * 7)  Generic styles
@@ -140,6 +140,12 @@ textarea {
 button {
 }
 
+input:focus,
+textarea:focus,
+option:focus {
+  background-color: #ffc;
+}
+
 /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 form li {
@@ -161,6 +167,41 @@ textarea {
   clear: both;
 }
 
+/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.gRequired {
+}
+
+ul.gError,
+li.gError {
+  background-color: #ffdcdc;
+}
+
+.gError label,
+.gValidationRule {
+  color: red;
+}
+
+.gValidationRule {
+  font-size: 80%;
+  margin-top: .5em;
+}
+
+form.gError input[type="text"],
+li.gError input[type="text"],
+form.gError input[type="password"],
+li.gError input[type="password"],
+form.gError input[type="checkbox"],
+li.gError input[type="checkbox"],
+form.gError input[type="radio"],
+li.gError input[type="radio"],
+form.gError textarea,
+li.gError textarea,
+form.gError select,
+li.gError select {
+  border: 2px solid red;
+}
+
 /** *******************************************************************
  * 2) Base text styles
  ******************************************************************/
@@ -178,7 +219,7 @@ textarea {
 }
 
 /*** ***************************************************************
- * 3) Layout containers
+ * 3) Page layout containers
  ******************************************************************/
 
 /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -242,65 +283,6 @@ table.gBlockContent td {
   padding: .3em 0 .3em .3em;
 }
 
-/* Inline form fieldsets ~~~~~~~~~~~~~~~~~ */
-
-.gInline li {
-  float: left;
-  padding: .3em .5em .4em .5em;
-}
-
-.gInline input[type="text"],
-.gInline input[type="password"],
-.gInline textarea,
-.gInline .gValidationRule {
-  width: 10em;
-}
-
-.gInline input[type="Submit"] {
-  margin-top: 1em;
-}
-
-input:focus,
-textarea:focus,
-option:focus {
-  background-color: #ffc;
-}
-
-/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */
-
-.gRequired {
-}
-
-ul.gError,
-li.gError {
-  background-color: #ffdcdc;
-}
-
-.gError label,
-.gValidationRule {
-  color: red;
-}
-
-.gValidationRule {
-  font-size: 80%;
-  margin-top: .5em;
-}
-
-form.gError input[type="text"],
-li.gError input[type="text"],
-form.gError input[type="password"],
-li.gError input[type="password"],
-form.gError input[type="checkbox"],
-li.gError input[type="checkbox"],
-form.gError input[type="radio"],
-li.gError input[type="radio"],
-form.gError textarea,
-li.gError textarea,
-form.gError select,
-li.gError select {
-  border: 2px solid red;
-}
-
 /** ****************************************************************
  * 5) Specific content blocks
  ******************************************************************/
@@ -317,17 +299,14 @@ li.gError select {
 
 /* Album ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gAlbumHeader {
-  height: 40px;
-  position: relative;
-}
-
 #gAlbumHeader h1 {
   display: inline;
+  margin-right: .6em;
 }
 
-#gAlbumHeader span {
-  padding-right: 10px;
+#gAlbumHeader .gDescription {
+  color: #ccc;
+  display: inline;
 }
 
 #gAlbumHeaderButtons {
@@ -335,14 +314,14 @@ li.gError select {
 }
 
 #gAlbumGrid {
-  margin: 0;
+	margin-top: 20px;
 }
 
 .gItem {
   border: 1px solid #ccc;
   float: left;
   margin: 0 24px 10px 0;
-  padding: 5px 0 5px 0;
+  padding: 0 0 5px 0;
   text-align: center;
 }
 
@@ -378,8 +357,7 @@ li.gError select {
 }
 
 #gItem img {
-  background-color: #e7e7e7;
-  border: 1px solid #c0c0c0;
+  border: 1px solid #ccc;
 }
 
 #gItem h1 {
@@ -439,14 +417,51 @@ table.gMetadata td.toggle {
 .gInfo {
 }
 
-/* Credits ~~~~~~~~~~~~~~~~~~~~~~~ */
+/* Inline layout (forms, lists) ~~~~~~~~~~ */
+
+#gHeader #gLoginMenu li,
+#gHeader #gSearchForm li,
+#gSidebar #gAddTagForm li {
+  float: left;
+  padding: .4em .5em;
+}
+
+#gHeader #gLoginMenu input[type="text"],
+#gHeader #gLoginMenu input[type="password"],
+#gHeader #gSearchForm input[type="text"],
+#gSidebar #gAddTagForm input[type="text"] {
+  width: 10em;
+}
+
+#gHeader #gLoginForm button {
+  margin-top: 1em;
+}
+
+#gHeader #gSearchForm {
+  float: right;
+  margin-right: 20px;
+}
+
+#gHeader #gLoginForm legend,
+#gHeader #gLoginFormContainer,
+#gHeader #gSearchForm label,
+#gSidebar #gAddTagForm legend {
+  display: none;
+}
+
+#gHeader #gLoginForm fieldset,
+#gSidebar #gAddTagForm fieldset {
+  border: none;
+}
+
+/* Credits ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gCredits li {
   display: inline;
 }
 
 #gCredits li:before {
-  padding: 0px 2px 0px 2px;
+  padding: 0 2px 0 2px;
   content: "|"
 }
 
@@ -454,7 +469,6 @@ table.gMetadata td.toggle {
   content: ""
 }
 
-
 /** *******************************************************************
  * 6) Navigation and menus
  ******************************************************************/
@@ -462,29 +476,10 @@ table.gMetadata td.toggle {
 /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gLoginMenu {
-  border: 1px solid #c0c0c0;
+  border: 1px solid #ccc;
   border-top: none;
   float: right;
   margin-right: 20px;
-  padding: 0;
-}
-
-/* Login form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gHeader #gLoginFormContainer {
-  padding: 0;
-}
-
-#gHeader #gLoginForm fieldset {
-  border: none;
-}
-
-#gHeader #gLoginForm legend {
-  display: none;
-}
-
-#gHeader #gLoginForm button {
-  margin-top: 1em;
 }
 
 /* Site Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -523,56 +518,8 @@ table.gMetadata td.toggle {
   font-weight: bold;
 }
 
-/* Search form ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gSearchForm {
-  float: right;
-  margin-right: 20px;
-}
-
-#gSearchForm li {
-  float: left;
-  padding: .3em .5em .4em .5em;
-}
-
-#gSearchForm input[type="text"],
-#gSearchForm input[type="password"],
-#gSearchForm textarea,
-#gSearchForm .gValidationRule {
-  width: 10em;
-}
-
-#gSearchForm input[type="Submit"] {
-  margin-top: 1em;
-}
-
-#gSearchForm label {
-  display: none;
-}
-
-#gSearchForm input[type="submit"] {
-  margin-top: 0;
-}
-
 /* Tags and cloud ~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gTag form li {
-  float: left;
-  padding-left: 0;
-}
-
-#gTag form legend {
-  display: none;
-}
-
-#gTag form fieldset {
-  border: none;
-}
-
-#gTag form input[type="text"] {
-  width: 10em;
-}
-
 #gTagCloud ul {
   font-size: 1.2em;
   text-align: justify;
@@ -642,7 +589,6 @@ table.gMetadata td.toggle {
 /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gPager {
-  clear: both;
   padding-top: 2em;
 }
 
@@ -652,10 +598,6 @@ table.gMetadata td.toggle {
   padding: 5px;
 }
 
-#gPager a {
-  color: #000;
-}
-
 #gPager .first {
   background-image: url('../images/first.png');
   background-position: left;
@@ -712,18 +654,8 @@ table.gMetadata td.toggle {
  * 7) Generic styles
  ******************************************************************/
 
-.gOdd {
-}
-
-.gEven {
-}
-
-.gInline {
-  float: left;
-}
-
 .gButtonLink {
-  border: 1px solid #d3d3d3;
+  border: 1px solid #ccc;
   padding: 5px;
   margin-left: 5px;
 }
@@ -732,10 +664,6 @@ table.gMetadata td.toggle {
   background-color: #f3f3f3;
 }
 
-.gUnderState {
-  color: #c0c0c0;
-}
-
 .gClose a {
   border: 1px solid #ccc;
   color: #ccc;
@@ -755,19 +683,10 @@ table.gMetadata td.toggle {
   display: none;
 }
 
-.gShowBlock {
-  display: block;
-}
-
-.gShowInline {
-  display: inline;
-}
-
 /** *******************************************************************
  * 8) Browser hacks
  *********************************************************************/
 
-/* Keep containers w/ only floated elements from collapsing in Safari */
 .gClearFix:after {
   clear: both;
   content: ".";
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index e73c253d..ac02ba6e 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -4,7 +4,7 @@
     <?= $theme->album_top() ?>
   </div>
   <h1><?= $item->title_edit ?></h1>
-  <span class="gUnderState"><?= $item->description_edit ?></span>
+  <div class="gDescription"><?= $item->description_edit ?></div>
 </div>
 
 <ul id="gAlbumGrid">