Amélioration design formulaires (boutons collés)

app/controllers/feedController.php

@@ -10,6 +10,7 @@ class feedController extends ActionController {
 		} else {
 			if (Request::isPost ()) {
 				$url = Request::param ('url_rss');
+				$params = array ();
 
 				try {
 					$feed = new Feed ($url);
@@ -51,6 +52,7 @@ class feedController extends ActionController {
 						'content' => 'Le flux <em>' . $feed->url () . '</em> a bien été ajouté'
 					);
 					Session::_param ('notification', $notif);
+					$params['id'] = $feed->id ();
 				} catch (FileNotExistException $e) {
 					Log::record ($e->getMessage (), Log::ERROR);
 					// notif
@@ -68,7 +70,7 @@ class feedController extends ActionController {
 					Session::_param ('notification', $notif);
 				}
 
-				Request::forward (array (), true);
+				Request::forward (array ('c' => 'configure', 'a' => 'feed', 'params' => $params), true);
 			}
 		}
 	}

app/layout/aside_feed.phtml

@@ -1,6 +1,13 @@
 <ul class="nav nav-list aside">
 	<li class="nav-header">Vos flux RSS</li>
 
+	<li class="nav-form"><form id="add_rss" method="post" action="<?php echo Url::display (array ('c' => 'feed', 'a' => 'add')); ?>">
+		<div class="stick">
+			<input type="url" name="url_rss" placeholder="Ajouter un flux RSS" />
+			<button class="btn" type="submit"><i class="icon add"></i></button>
+		</div>
+	</form></li>
+
 	<?php if (!empty ($this->feeds)) { ?>
 	<?php foreach ($this->feeds as $feed) { ?>
 	<li class="item<?php echo ($this->flux && $this->flux->id () == $feed->id ()) ? ' active' : ''; ?>">
@@ -8,11 +15,6 @@
 	</li>
 	<?php } ?>
 	<?php } else { ?>
-	<li class="disable">Aucun flux</li>
+	<li class="item disable">Aucun flux</li>
 	<?php } ?>
-
-	<li><form id="add_rss" method="post" action="<?php echo Url::display (array ('c' => 'feed', 'a' => 'add')); ?>">
-		<input type="url" name="url_rss" placeholder="Ajouter un flux RSS" />
-		<button class="btn"><i class="icon add"></i></button>
-	</form></li>
 </ul>

app/layout/header.phtml

@@ -15,8 +15,11 @@
 
 	<div class="item search">
 		<form action="<?php echo _url ('index', 'index'); ?>" method="get">
-			<input type="text" name="search" id="search" placeholder="Rechercher (non fonctionnel)" />
-			<button class="btn"><i class="icon search"></i></button>
+			<div class="stick">
+				<?php $s = Request::param ('search', ''); ?>
+				<input type="text" name="search" id="search" value="<?php echo $s; ?>" placeholder="Rechercher (non fonctionnel)" />
+				<button class="btn" type="submit"><i class="icon search"></i></button>
+			</div>
 		</form>
 	</div>
 

public/theme/base.css

@@ -59,15 +59,21 @@ label {
 input {
 	display: inline-block;
 	min-height: 25px;
-	padding: 5px 5px;
+	width: 200px;
+	padding: 5px;
 	background: #fdfdfd;
 	border: 1px solid #bbb;
 	border-radius: 3px;
 	color: #666;
-	line-height: 30px;
+	line-height: 25px;
 	vertical-align: middle;
 	box-shadow: 0 2px 2px #eee inset;
 }
+	input[type="radio"],
+	input[type="checkbox"] {
+		width: 15px;
+		min-height: 15px;
+	}
 	input:focus {
 		color: #0062BE;
 		border-color: #33BBFF;
@@ -108,23 +114,41 @@ input {
 			font-size: 14px;
 		}
 
+.stick {
+	white-space: nowrap;
+	font-size: 0px;
+	vertical-align: middle;
+}
+	.stick input {
+		border-radius: 3px 0 0 3px;
+		border-right: none;
+	}
+	.stick .btn {
+		border-top: 1px solid #bbb;
+		border-radius: 0 3px 3px 0;
+	}
+
 .btn {
 	display: inline-block;
-	min-height: 25px;
+	min-height: 37px;
 	min-width: 15px;
 	padding: 5px 10px;
 	background: #fff;
 	background: linear-gradient(#fff, #eee);
-	border-radius: 5px;
+	border-radius: 3px;
 	border: 1px solid #ddd;
 	border-bottom: 1px solid #aaa;
 	border-right: 1px solid #aaa;
 	color: #666;
 	text-shadow: 0px -1px 0 #ddd;
-	line-height: 25px;
+	line-height: 20px;
 	vertical-align: middle;
 	cursor: pointer;
 }
+	a.btn {
+		min-height: 25px;
+		line-height: 25px;
+	}
 	.btn:hover {
 		background: #f0f0f0;
 		background: linear-gradient(#f8f8f8, #f0f0f0);
@@ -211,6 +235,11 @@ input {
 		text-shadow: 0 0 1px #ddd;
 	}
 
+	.nav.nav-list .nav-form {
+		padding: 3px;
+		text-align: center;
+	}
+
 .nav-head {
 	display: block;
 	margin: 0;
@@ -248,9 +277,10 @@ input {
 /* ICONES */
 .icon {
 	display: inline-block;
-	width: 16px;
-	height: 16px;
+	width: 14px;
+	height: 14px;
 	vertical-align: middle;
+	line-height: 14px;
 }
 	.icon.refresh {
 		background: url("icons/refresh.svg") center center no-repeat;
@@ -307,6 +337,13 @@ input {
 			.header .item.title a:hover {
 				text-decoration: none;
 			}
+		.header .item.search input {
+			width: 200px;
+			transition: all 200ms linear;
+		}
+			.header .item.search input:focus {
+				width: 300px;
+			}
 		.header .item.configure {
 			width: 100px;
 		}
@@ -326,6 +363,9 @@ input {
 		border-right: 1px solid #aaa;
 		background: #fff;
 	}
+		.aside .nav-form input {
+			width: 180px;
+		}
 		.aside.aside_flux {
 			padding: 10px 0;
 		}