From 5dad40b1ae4b1aedce928dc2e3abac3b6b13c636 Mon Sep 17 00:00:00 2001
From: Chad Kieffer <chad@2tbsp.com>
Date: Fri, 13 Feb 2009 03:21:19 +0000
Subject: Ticket #2. Tighten up search results UI.

---
 modules/search/views/search.html.php | 56 ++++++++++++++++++++++--------------
 themes/default/css/screen.css        | 18 ++++++++----
 themes/default/js/ui.init.js         | 12 ++++----
 themes/default/views/album.html.php  |  1 +
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/modules/search/views/search.html.php b/modules/search/views/search.html.php
index 8d47eed4..fb1fd8a9 100644
--- a/modules/search/views/search.html.php
+++ b/modules/search/views/search.html.php
@@ -1,35 +1,49 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="gSearchForm">
-  <form action="<?= url::site("/search") ?>">
-    <fieldset>
-      <legend>
-        <?= t("Search") ?>
-      </legend>
-      <ul>
-        <li>
-          <input name="q" type="text" value="<?= $q ?>"/>
-        </li>
-        <li>
-          <input type="submit"/>
-        </li>
-      </ul>
-    </fieldset>
-  </form>
+<? // @todo Set hover on AlbumGrid list items ?>
+<form action="<?= url::site("/search") ?>" id="gSearchForm">
+  <fieldset>
+    <legend>
+      <?= t("Search") ?>
+    </legend>
+    <ul>
+      <li>
+        <label for="q"><?= t("Search the gallery") ?></label>
+        <input name="q" id="q" type="text" value="<?= $q ?>"/>
+      </li>
+      <li>
+        <input type="submit" value="<?= t("Search") ?>" />
+      </li>
+    </ul>
+  </fieldset>
+</form>
 
-  <ul>
+<div id="gSearchResults">
+  <h1><?= t("Search Results") ?></h1>
+
+  <? if (count($items)): ?>
+  <ul id="gAlbumGrid">
     <? foreach ($items as $item): ?>
-    <li>
+      <? $item_class = "gPhoto"; ?>
+      <? if ($item->is_album()): ?>
+        <? $item_class = "gAlbum"; ?>
+      <? endif ?>
+   <li class="gItem <?= $item_class ?>">
       <a href="<?= url::site("items/$item->id") ?>">
         <?= $item->thumb_tag() ?>
         <p>
           <?= $item->title ?>
         </p>
-        <p>
+        <div>
           <?= $item->description ?>
-        </p>
+        </div>
       </a>
     </li>
     <? endforeach ?>
   </ul>
+  <?= $theme->pager() ?>
+
+  <? else: ?>
+  <p><?= t("No results found for '") . $q . "'" ?></p>
+
+  <? endif; ?>
 </div>
-<?= $theme->pager() ?>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 9de4508c..2755fe22 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -45,6 +45,10 @@ h1 {
   font-size: 1.7em;
 }
 
+#gSearchResults h1 {
+  margin-bottom: 1em;
+}
+
 h2 {
   font-size: 1.4em;
 }
@@ -115,7 +119,8 @@ fieldset {
 }
 
 #gHeader fieldset,
-#gSidebar fieldset {
+#gSidebar fieldset,
+.gShortForm fieldset {
   border: none;
 }
 
@@ -125,7 +130,8 @@ legend {
 }
 
 #gHeader legend,
-#gSidebar legend {
+#gSidebar legend,
+#gContent #gSearchForm legend {
   display: none;
 }
 
@@ -451,9 +457,6 @@ form p.gError {
 
 /* Individual photo content ~~~~~~~~~~~~~~ */
 
-#gContent #gItem {
-}
-
 #gContent #gComments {
   margin-top: 2em;
 }
@@ -509,6 +512,11 @@ form p.gError {
   content: "";
 }
 
+#gContent #gSearchResults {
+  margin-top: 1em;
+  padding-top: 1em;
+}
+
 /** *******************************************************************
  * 5) Navigation and menus
  *********************************************************************/
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 44106afb..15815c70 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -34,10 +34,8 @@ $(document).ready(function() {
 
   // Short forms
   handleShortFormEvent(shortForms);
-  if ($(".gShortForm").length) {
-    $(".gShortForm input[type=text]").addClass("ui-corner-left");
-    $(".gShortForm input[type=submit]").addClass("ui-state-default ui-corner-right");
-  }
+  $(".gShortForm input[type=text]").addClass("ui-corner-left");
+  $(".gShortForm input[type=submit]").addClass("ui-state-default ui-corner-right");
   
   // Apply jQuery UI button css to submit inputs
   $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all");
@@ -146,10 +144,12 @@ function shortFormInit(formID) {
 
   // Get the input ID and it's label text
   var labelValue = $(formID + " label:first").html();
-  var inputID = "#" + $(formID + " input[type='text']:first").attr("id");
+  var inputID = "#" + $(formID + " input[type=text]:first").attr("id");
 
   // Set the input value equal to label text
-  $(inputID).val(labelValue);
+  if ($(inputID).val() == "") {
+    $(inputID).val(labelValue);
+  }
 
   // Attach event listeners to the input
   $(inputID).bind("focus blur", function(e){
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index cb3bd430..aab41034 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -1,4 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<? // @todo Set hover on AlbumGrid list items for guest users ?>
 <div id="gInfo">
   <?= $theme->album_top() ?>
   <h1><?= $item->title ?></h1>
-- 
cgit v1.2.3