[geeklog-cvs] geeklog: newpro: Styled the search box

[geeklog-cvs at lists.geeklog.net]

changeset 8526:df8f801060fc
url:  http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/df8f801060fc
user: Rouslan Placella <rouslan at placella.com>
date: Mon Mar 12 19:14:52 2012 +0000
description:
newpro: Styled the search box

diffstat:

 public_html/layout/newpro/css/form.css          |   27 ++++++++++++++++-------
 public_html/layout/newpro/functions.php         |    3 ++
 public_html/layout/newpro/images/css/search.png |  Bin 
 public_html/layout/newpro/javascript/search.js  |   18 ++++++++++++++++
 public_html/layout/newpro/leftblocks.thtml      |   16 ++++++--------
 5 files changed, 47 insertions(+), 17 deletions(-)

diffs (116 lines):

diff -r 54c8da5741b1 -r df8f801060fc public_html/layout/newpro/css/form.css
--- a/public_html/layout/newpro/css/form.css	Mon Mar 12 16:21:00 2012 +0000
+++ b/public_html/layout/newpro/css/form.css	Mon Mar 12 19:14:52 2012 +0000
@@ -21,29 +21,40 @@
 /* Form */
 div#leftblocks div#block-left-search form#searchform {
   position: absolute;
-  top: 95px;
+  top: 92px;
   right: 26px;
   margin: 0;
   padding: 0;
 }
 
-div#leftblocks div#block-left-search form#searchform ul {
+div#leftblocks div#block-left-search form#searchform div {
   margin: 0;
   padding: 0;
+  background: transparent url('./images/css/search.png') no-repeat 0 0;
+  width: 180px;
+  height: 26px;
+  line-height: 26px;
+  padding: 2px 5px;
 }
 
-div#leftblocks div#block-left-search form#searchform ul li {
-  display: inline;
-  margin: 0;
-  padding: 0;
+div#leftblocks div#block-left-search form#searchform div input {
+  border: 0px solid transparent;
+  height: 25px;
+  background: transparent;
+  line-height: 25px;
 }
 
 /* Form Input Field */
-div#leftblocks div#block-left-search form#searchform ul li input.text {
+div#leftblocks div#block-left-search form#searchform div input.text {
+  float: left;
+  width: 145px;
 }
 
 /* Form Button */
-div#leftblocks div#block-left-search form#searchform ul li input.form-button {
+div#leftblocks div#block-left-search form#searchform div input.submit {
+  float: right;
+  width: 30px;
+  cursor: pointer;
 }
 
 /* Search Option */
diff -r 54c8da5741b1 -r df8f801060fc public_html/layout/newpro/functions.php
--- a/public_html/layout/newpro/functions.php	Mon Mar 12 16:21:00 2012 +0000
+++ b/public_html/layout/newpro/functions.php	Mon Mar 12 19:14:52 2012 +0000
@@ -10,7 +10,10 @@
 // Add Theme CSS File to scripts class
 $_SCRIPTS->setCSSFile('theme', '/layout/' . $_CONF['theme'] . '/style.css.php');
 
+$_SCRIPTS->setJavaScriptLibrary('jquery');
+
 $_SCRIPTS->setJavaScriptFile('theme.confirm', '/layout/' . $_CONF['theme'] . '/javascript/confirm.js');
+$_SCRIPTS->setJavaScriptFile('theme.confirm', '/layout/' . $_CONF['theme'] . '/javascript/search.js');
 
 /*
  * For left/right block support there is no longer any need for the theme to
diff -r 54c8da5741b1 -r df8f801060fc public_html/layout/newpro/images/css/search.png
Binary file public_html/layout/newpro/images/css/search.png has changed
diff -r 54c8da5741b1 -r df8f801060fc public_html/layout/newpro/javascript/search.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/public_html/layout/newpro/javascript/search.js	Mon Mar 12 19:14:52 2012 +0000
@@ -0,0 +1,18 @@
+// Changes the background image of the search box on hover
+$('#searchform > div').hover(function() {
+    $(this).css('background-position', '0 -30px');
+}, function () {
+    $(this).css('background-position', '0 0');
+});
+
+// Toggles the text in the search box when it's selected
+$('#searchform input[name=query]').focusin(function() {
+    if ($(this).val() === this.defaultValue) {
+        $(this).val('');
+    }
+});
+$('#searchform input[name=query]').focusout(function() {
+    if ($(this).val() === '') {
+        $(this).val(this.defaultValue);
+    }
+});
diff -r 54c8da5741b1 -r df8f801060fc public_html/layout/newpro/leftblocks.thtml
--- a/public_html/layout/newpro/leftblocks.thtml	Mon Mar 12 16:21:00 2012 +0000
+++ b/public_html/layout/newpro/leftblocks.thtml	Mon Mar 12 19:14:52 2012 +0000
@@ -8,15 +8,13 @@
       <div class="block-left" id="block-left-search">
         <div class="block-left-content">
           <form action="{site_url}/search.php" method="get" id="searchform" class="basic">
-            <ul>
-              <li><input type="text" size="16" maxlength="255" name="query" class="text"{xhtml}></li>
-              <li>
-                <input type="hidden" value="all" name="type"{xhtml}>
-                <input type="hidden" value="all" name="keyType"{xhtml}>
-                <input type="hidden" value="search" name="mode"{xhtml}>
-                <input type="submit" value="{button_search}" class="submit"{xhtml}>
-              </li>
-            </ul>
+            <div>
+              <input type="text" value="{button_search}" size="16" maxlength="255" name="query" class="text"{xhtml}>
+              <input type="submit" value="" title="{button_search}" class="submit"{xhtml}>
+              <input type="hidden" value="all" name="type"{xhtml}>
+              <input type="hidden" value="all" name="keyType"{xhtml}>
+              <input type="hidden" value="search" name="mode"{xhtml}>
+            </div>
           </form>
         </div>
       </div>