search page styling

controllers/SearchController.php

@@ -11,16 +11,15 @@ class SearchController extends \lithium\action\Controller {
 	public function index() {
 		if (isset($this->request->query['q']))
 		{
-			$q = '/' . $this->request->query['q'] . '/i';
-			$conditions = array('title' => array('like' => $q));
-			$limit = 10;
-
+			$q = $this->request->query['q'];
+			$conditions = array('title' => array('like' => "/$q/i"));
+			$limit = 7;
 
 			$anime = Anime::find('all', compact('conditions', 'limit'));
 			$manga = Manga::find('all', compact('conditions', 'limit'));
 			$kdrama = Kdrama::find('all', compact('conditions', 'limit'));
-			
-			return compact('anime', 'manga', 'kdrama');	
+
+			return compact('q', 'anime', 'manga', 'kdrama');
 		}
 	}
 

views/elements/search.html.php

@@ -1,4 +1,4 @@
-<?= $this->form->create(null, array('method' => 'get')); ?>
+<?= $this->form->create(null, array('method' => 'get', 'class' => 'search')); ?>
 	<?= $this->form->text('q'); ?>
 	<?= $this->form->select('type', array(''  => 'All',
 								  		  'anime'  => 'Anime',

views/layouts/default.html.php

@@ -62,7 +62,7 @@ use \lithium\security\Auth;
 	';
 	?>
 
-	<?= $this->form->create(null, array('url' => '/search/', 'class' => 'search', 'method' => 'get')); ?>
+	<?= $this->form->create(null, array('url' => '/search/', 'class' => 'navsearch', 'method' => 'get')); ?>
 	<?= $this->form->text('q', array('placeholder' => 'Search...')); ?>
 	<input type="submit" value="Go">
 	<?= $this->form->end(); ?>

views/search/anime.html.php

@@ -1,6 +1,7 @@
 <?php
 $this->styles($this->html->style('pagination'));
 $this->styles($this->html->style('table'));
+$this->styles($this->html->style('search'));
 ?>
 
 <?= $this->_render('element', 'search') ?>

views/search/index.html.php

@@ -1,15 +1,31 @@
 <?php
 $this->styles($this->html->style('table'));
+$this->styles($this->html->style('search'));
 ?>
 
-<h3>Anime</h3>
+<?= $this->_render('element', 'search') ?>
+
+<h2 class="ribbon">Anime</h2>
+<div class="triangle-ribbon"></div>
 <?= $this->_render('element', 'animetable', compact('anime')) ?>
-<?= $this->html->link("More", array('controller' => 'search',
-									'action' => 'anime')); ?>
-<h3>Manga</h3>
-<?= $this->html->link("More", array('controller' => 'search',
-									'action' => 'anime')); ?>
-
-<h3>K Drama</h3>
-<?= $this->html->link("More", array('controller' => 'search',
-									'action' => 'anime')); ?>
+<p class="more">
+<a href="/search/anime/<?= $q ?>">More</a>
+</p>
+
+<h2 class="ribbon">Manga</h2>
+<div class="triangle-ribbon"></div>
+<p>results</p>
+<?php if(count($manga) > 0): ?>
+<p class="more">
+<a href="/search/manga/<?= $q ?>">More</a>
+</p>
+<?php endif ?>
+
+<h2 class="ribbon">K-Drama</h2>
+<div class="triangle-ribbon"></div>
+<p>results</p>
+<?php if(count($kdrama) > 0): ?>
+<p class="more">
+<a href="/search/kdrama/<?= $q ?>">More</a>
+</p>
+<?php endif ?>

webroot/css/base.css

@@ -36,6 +36,7 @@ h2.ribbon {
 	clear: left;
 	left: -67px;
 	top: -33px;
+	margin-bottom: -20px;
 	z-index: -1;
 }
 
@@ -231,7 +232,7 @@ p {
 	-webkit-border-radius:20px;
 }
 
-.search {
+form.navsearch {
 	float: right;
 	margin-top: 5px;
 }
@@ -250,13 +251,12 @@ form input, form textarea {
 	-webkit-border-radius: 3px;
 }
 input[type="button"], input[type="submit"], button {
+	padding: 6px 5px; /* looks high in FF at inherited 7 5 */
+	line-height: 18px; /* looks small in webkit at 6 5 */
 	cursor: pointer;
 	display: inline-block;
 	font-weight: 700;
 	outline: none;
-	width: auto;
-	text-align: center;
-	vertical-align: middle;
 	background: #ddd;
 	color: #444;
 	text-shadow: 0 -1px 0 #eee;
@@ -267,6 +267,14 @@ input[type="button"], input[type="submit"], button {
 input[type="button"]:hover, input[type="submit"]:hover, button:hover {
 	background: #eee;
 }
+form select {
+	padding: 6px 5px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	background-color: #eee;
+}
 
 div#login {
 	text-align: center;

webroot/css/home.css

@@ -12,7 +12,7 @@ div#sg_left {
 	left: 0;
 	bottom: -1px;
 	width: 3%;
-	background: -moz-linear-gradient(left,  rgba(255,255,255,1), rgba(255,255,255,0));
+	background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
 	background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1);
 	z-index: 1;

webroot/css/search.css

@@ -0,0 +1,28 @@
+form.search {
+	text-align: center;
+}
+form.search input[type="text"] {
+	width: 700px;
+}
+p.more {
+	text-align: center;
+	margin: 15px;
+}
+p.more a {
+	padding: 7px 10px;
+	border: 1px solid #aaa;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	background: #ddd;
+	background: -moz-linear-gradient(top, #ddd, #bbb);
+	background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1);
+	color: #111;
+}
+p.more a:hover {
+	background: #eee;
+	background: -moz-linear-gradient(top, #eee, #ccc);
+	background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1);
+}