Changed CSS organization, removed form section. Moved generic form CSS up to top of sheet and specific form styles to be adjacent to related content. This should ensure inheritance works generic down to specific. Removed #gAddTags in favor of #gTags form.

3 files changed, 239 insertions, 334 deletions

diff --git a/modules/tag/helpers/tag.php b/modules/tag/helpers/tag.php
index 774e1fa1..fd683bc1 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", array("id" => "gAddTag"));
+    $form = new Forge(url::site("tags"), "", "post");
     $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 8f93e9ff..98643c2d 100644
--- a/modules/tag/js/tag.js
+++ b/modules/tag/js/tag.js
@@ -3,14 +3,14 @@ $("document").ready(function() {
 });
 
 function ajaxify_tag_form() {
-  $("form#gAddTag").ajaxForm({
+  $("#gTag form").ajaxForm({
     complete: function(xhr, statusText) {
-      $("form#gAddTag").replaceWith(xhr.responseText);
+      $("#gTag form").replaceWith(xhr.responseText);
       if (xhr.status == 201) {
         $.get($("#gTagCloud").attr("src"), function(data, textStatus) {
 	  $("#gTagCloud").html(data);
 	});
-	$("form#gAddTag").clearForm();
+	$("#gTag form").clearForm();
       }
       ajaxify_tag_form();
     }
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index ea593dfe..a5689eb6 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -11,9 +11,8 @@
  * 5)  Specific content blocks
  * 6)  Navigation and menus
  * 7)  Generic styles
- * 8)  Forms
- * 9)  Browser hacks
- * 10) Debugging information
+ * 8)  Browser hacks
+ * 9) Debugging information
  */
 
 /** *******************************************************************
@@ -72,9 +71,100 @@ th {
   text-align: left;
 }
 
+/* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+fieldset {
+  border: 1px solid #ccc;
+}
+
+legend {
+  font-weight: bold;
+  margin-left: 1em;
+}
+
+label {
+  cursor: help;
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+select {
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+.gValidationRule {
+  width: 40%;
+}
+
+input[type="button"] {
+}
+
+input[type="checkbox"] {
+}
+
+input[type="file"] {
+}
+
+input[type="password"] {
+}
+
+input[type="radio"] {
+}
+
+input[type="reset"] {
+}
+
+input[type="submit"] {
+}
+
+input[type="text"] {
+}
+
+option {
+}
+
+optgroup {
+}
+
+select {
+}
+
+textarea {
+  width: 99%;
+  height: 12em;
+}
+
+button {
+}
+
+/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+form li {
+  margin: 0 !important;
+  padding: .3em 1.5em .3em 1em;
+}
+
+form ul ul {
+  clear: both;
+}
+
+form ul ul li {
+  float: left;
+}
+
+input,
+textarea {
+  display: block;
+  clear: both;
+}
+
 /** *******************************************************************
  * 2) Base text styles
  ******************************************************************/
+
 #gContent {
   font-size: 1em;
 }
@@ -87,7 +177,7 @@ th {
   font-size: .8em;
 }
 
-/*** *******************************************************************
+/*** ***************************************************************
  * 3) Layout containers
  ******************************************************************/
 
@@ -122,7 +212,7 @@ th {
 }
 
 /** ****************************************************************
- * 4) Generic content containers
+ * 4) Reusable content containers
  ******************************************************************/
 
 .gBlock {
@@ -152,6 +242,65 @@ 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
  ******************************************************************/
@@ -320,6 +469,24 @@ table.gMetadata td.toggle {
   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  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gSiteMenu {
@@ -356,114 +523,122 @@ table.gMetadata td.toggle {
   font-weight: bold;
 }
 
-/* Tag cloud ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* Search form ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#gSearchForm {
+  float: right;
+  margin-right: 20px;
+}
+
+#gSearchForm li {
+  float: left;
+  padding: .3em .5em .4em .5em;
+}
 
-#gTag ul {
+#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;
 }
 
-#gTag ul li {
+#gTagCloud ul li {
   display: inline;
   line-height: 1.5em;
   text-align: justify;
 }
 
-#gTag ul li a {
+#gTagCloud ul li a {
   text-decoration: none;
 }
 
-#gTag ul li span {
+#gTagCloud ul li span {
   display: none;
 }
 
-#gTag ul li.size1 a {
+#gTagCloud ul li.size1 a {
   color: #9cf;
   font-size: 80%;
   font-weight: 100;
 }
 
-#gTag ul li.size2 a {
+#gTagCloud ul li.size2 a {
   color: #69f;
   font-size: 90%;
   font-weight: 300;
 }
 
-#gTag ul li.size3 a {
+#gTagCloud ul li.size3 a {
   color: #69c;
   font-size: 100%;
   font-weight: 500;
 }
 
-#gTag ul li.size4 a {
+#gTagCloud ul li.size4 a {
   color: #369;
   font-size: 110%;
   font-weight: 700;
 }
 
-#gTag ul li.size5 a {
+#gTagCloud ul li.size5 a {
   color: #0e2b52;
   font-size: 120%;
   font-weight: 900;
 }
 
-#gTag ul li.size6 a {
+#gTagCloud ul li.size6 a {
   color: #0e2b52;
   font-size: 130%;
   font-weight: 900;
 }
 
-#gTag ul li.size7 a {
+#gTagCloud ul li.size7 a {
   color: #0e2b52;
   font-size: 140%;
   font-weight: 900;
 }
 
-#gTag ul li a:hover {
+#gTagCloud ul li a:hover {
   color: #f30;
   text-decoration: underline;
 }
 
-form#gAddTag fieldset legend {
-  display: none;
-}
-
-form#gAddTag fieldset {
-  border: none;
-  float: right;
-}
-
-form#gAddTag ul {
-  width: auto;
-}
-
-form#gAddTag li {
-  padding: 0px;
-  margin: 0px;
-}
-
-form#gAddTag input {
-  display: inline;
-  float: left
-  margin-right: 1em;
-  padding-right: 10px;
-}
-
-form#gAddTag input[type=text] {
-  width: 12em;
-}
-
-/* Tags ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gTag ul {
-  margin-left: .5em;
-}
-
-#gTag li {
-  list-style-image: url('../images/bullet_tag.png');
-  margin-bottom: .3em;
-}
-
 /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gPager {
@@ -533,19 +708,6 @@ form#gAddTag input[type=text] {
   padding-right: 20px;
 }
 
-/* Album tree ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gAlbumTree {
-  border: 1px solid #d3d3d3;
-  margin: 20px 0;
-  padding: 5px;
-}
-
-#gAlbumTree #gTreeContainer {
-  border: 1px solid #d3d3d3;
-  padding-left: 5px;
-}
-
 /** *******************************************************************
  * 7) Generic styles
  ******************************************************************/
@@ -602,263 +764,7 @@ form#gAddTag input[type=text] {
 }
 
 /** *******************************************************************
- * 8) Forms
- ******************************************************************/
-
-fieldset {
-  border: 1px solid #ccc;
-}
-
-legend {
-  font-weight: bold;
-  margin-left: 1em;
-}
-
-label {
-  cursor: help;
-}
-
-input[type="text"],
-input[type="password"],
-textarea,
-select {
-}
-
-input[type="text"],
-input[type="password"],
-textarea,
-.gValidationRule {
-  width: 40%;
-}
-
-input[type="button"] {
-}
-
-input[type="checkbox"] {
-}
-
-input[type="file"] {
-}
-
-input[type="password"] {
-}
-
-input[type="radio"] {
-}
-
-input[type="reset"] {
-}
-
-input[type="submit"] {
-}
-
-input[type="text"] {
-}
-
-option {
-}
-
-optgroup {
-}
-
-select {
-}
-
-textarea {
-  width: 99%;
-  height: 12em;
-}
-
-button {
-}
-
-/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-form li {
-  margin: 0 !important;
-  padding: .3em 1.5em .3em 1em;
-}
-
-form ul ul {
-  clear: both;
-}
-
-form ul ul li {
-  float: left;
-}
-
-input,
-textarea {
-  display: block;
-  clear: both;
-}
-
-/* Inline 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;
-}
-
-/* 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;
-}
-
-/* Login form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gHeader #gLoginFormContainer {
-  padding: 0;
-}
-
-#gHeader #gLoginForm fieldset {
-  border: none;
-}
-
-#gHeader #gLoginForm legend {
-  display: none;
-}
-
-#gHeader #gLoginForm button {
-  margin-top: 1em;
-}
-
-/* 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;
-}
-
-/* Upload form ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gUploadForm .gBreadcrumbs li input,
-#gUploadForm .gBreadcrumbs li select {
-  width: 140px;
-  margin-left: 5px;
-}
-#gUploadForm-queue {
-  width: 500px;
-}
-
-#gUploadForm-queue td,
-#gUploadForm-queue th {
-  border-color: #e7e7e7;
-  text-align: left;
-}
-
-#gUploadForm-queue caption {
-  display: none;
-}
-
-#gUploadForm-queue thead th {
-  border-bottom: 2px solid #000;
-  text-align: center;
-}
-
-#gUploadForm-queue thead th,
-#gUploadForm-queue thead td {
-  background-color: #e7e7e7;
-}
-
-#gUploadForm-queue tfoot td {
-  border-top: 2px solid #000;
-}
-
-#gUploadForm-queue .filesize {
-  width: 60px;
-}
-
-#gUploadForm-queue td.filesize {
-  text-align: right;
-}
-
-#gUploadForm-queue tfoot td.filesize {
-  color: #ccc;
-}
-
-#gUploadForm-queue .action {
-  width: 40px;
-}
-
-#gUploadForm-button {
-  margin-left: 370px;
-  width: 130px;
-}
-
-/** *******************************************************************
- * 9) Browser hacks
+ * 8) Browser hacks
  *********************************************************************/
 
 /* Keep containers w/ only floated elements from collapsing in Safari */
@@ -870,9 +776,8 @@ li.gError select {
   visibility: hidden;
 }
 
-
 /** *******************************************************************
- * 10) Debugging information
+ * 9) Debugging information
  *********************************************************************/
 
 div.gAnnotatedThemeBlock {