From 9bbe8053c73c875dca7c838e708a8829a80dacf6 Mon Sep 17 00:00:00 2001
From: Chad Kieffer <chad@2tbsp.com>
Date: Thu, 12 Feb 2009 07:07:11 +0000
Subject: Added a show comment form button. Add comment form is revealed when
 the button is clicked. Used jQuery UI Effect to .highlight() to bring
 attention to newly added comments. Also added a named anchor to our block
 library to allow direct linking/scrolling to those blocks on the page.

---
 themes/default/css/screen.css       | 11 +++++++++--
 themes/default/js/ui.init.js        | 33 ++++++++++++++++++++++-----------
 themes/default/views/block.html.php |  1 +
 3 files changed, 32 insertions(+), 13 deletions(-)

(limited to 'themes/default')

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index d9c54c29..9de4508c 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -463,13 +463,14 @@ form p.gError {
 }
 
 #gContent #gComments .gAuthor {
-  background-color: #e8e8e8;
+  border-bottom: 1px solid #ccc;
+  color: #999;
   height: 32px;
   line-height: 32px;
 }
 
 #gContent #gComments ul li div {
-  padding: 0 8px 8px 32px;
+  padding: 0 8px 8px 43px;
 }
 
 #gContent #gComments ul li #gRecaptcha {
@@ -481,7 +482,13 @@ form p.gError {
 }
 
 #gContent #gComments .gAvatar {
+  height: 32px;
   margin-right: .4em;
+  width: 32px;
+}
+
+#gContent #gAddCommentForm {
+  margin-top: 2em;
 }
 
 /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 10f29f23..bdfd7214 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -25,7 +25,7 @@ $(document).ready(function() {
   });
 
   // Apply jQuery UI button css to submit inputs
-  $("input[type=submit]").addClass("ui-state-default");
+  $("input[type=submit]").addClass("ui-state-default ui-corner-all");
   
   // Round view menu buttons
   if ($("#gViewMenu").length) {
@@ -35,16 +35,6 @@ $(document).ready(function() {
     $("#gViewMenu ul li:last a").addClass("ui-corner-right");
   }
 
-    // Add hover state for buttons
-  $(".ui-state-default").hover(
-	  function(){
-		  $(this).addClass("ui-state-hover");
-	  },
-	  function(){
-		  $(this).removeClass("ui-state-hover");
-	  }
-  );
-
   // Short forms
   handleShortFormEvent(shortForms);
   if ($(".gShortForm").length) {
@@ -64,12 +54,23 @@ $(document).ready(function() {
     // fit inside their container
     sizedImage();
 
+    // Collapse comments form, insert button to expand
+    if ($("#gAddCommentForm").length) {
+      var showCommentForm = '<a href="#add_comment_form" id="showCommentForm" class="gButtonLink ui-corner-all ui-icon-left ui-state-default right"><span class="ui-icon ui-icon-comment"></span>Add a comment</a>';
+      $("#gAddCommentForm").hide();
+      $("#gComments").prepend(showCommentForm);
+      $("#showCommentForm").click(function(){
+        $("#gAddCommentForm").show(1000);
+      });
+    }
+
     // Add scroll effect for links to named anchors
     $.localScroll({
       queue: true,
       duration: 1000,
       hash: true
     });
+
   }
 
   // Apply modal dialogs
@@ -80,6 +81,16 @@ $(document).ready(function() {
     $(dialogLinks[i]).bind("click", handleDialogEvent);
   }
 
+  // Add hover state for buttons
+  $(".ui-state-default").hover(
+	  function(){
+		  $(this).addClass("ui-state-hover");
+	  },
+	  function(){
+		  $(this).removeClass("ui-state-hover");
+	  }
+  );
+
 });
 
 // Vertically align a block element's content
diff --git a/themes/default/views/block.html.php b/themes/default/views/block.html.php
index a2357ab6..37504861 100644
--- a/themes/default/views/block.html.php
+++ b/themes/default/views/block.html.php
@@ -1,4 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<a name="<?= $anchor ?>"></a>
 <div id="<?= $css_id ?>" class="gBlock">
   <h2><?= $title ?></h2>
   <div class="gBlockContent">
-- 
cgit v1.2.3