Amélioration design navigation en liste + diverses ajouts design

app/layout/aside_configure.phtml

@@ -1,17 +1,16 @@
-<div class="aside">
-	<ul>
-		<li><h2>Configuration</h2></li>
-		<li <?php echo Request::actionName () == 'display' ? 'class="active"' : ''; ?>>
-			<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'display')); ?>">Général et affichage</a>
-		</li>
-		<li <?php echo Request::actionName () == 'categorize' ? 'class="active"' : ''; ?>>
-			<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'categorize')); ?>">Catégories</a>
-		</li>
-		<li <?php echo Request::actionName () == 'shortcut' ? 'class="active"' : ''; ?>>
-			<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'shortcut')); ?>">Raccourcis</a>
-		</li>
-		<li <?php echo Request::actionName () == 'importExport' ? 'class="active"' : ''; ?>>
-			<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport')); ?>">Import / Export OPML</a>
-		</li>
-	</ul>
+<div class="nav nav-list aside">
+	<li class="nav-header">Configuration</li>
+
+	<li <?php echo Request::actionName () == 'display' ? 'class="active"' : ''; ?>>
+		<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'display')); ?>">Général et affichage</a>
+	</li>
+	<li <?php echo Request::actionName () == 'categorize' ? 'class="active"' : ''; ?>>
+		<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'categorize')); ?>">Catégories</a>
+	</li>
+	<li <?php echo Request::actionName () == 'shortcut' ? 'class="active"' : ''; ?>>
+		<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'shortcut')); ?>">Raccourcis</a>
+	</li>
+	<li <?php echo Request::actionName () == 'importExport' ? 'class="active"' : ''; ?>>
+		<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport')); ?>">Import / Export OPML</a>
+	</li>
 </div>

app/layout/aside_feed.phtml

@@ -1,20 +1,18 @@
-<div class="aside">
-	<ul>
-		<li><h2>Vox flux RSS</h2></li>
-		<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
-		<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" />
-			<input type="submit" value="+" />
-		</form></li>
-		<?php } ?>
-		<?php if (!empty ($this->feeds)) { ?>
-		<?php foreach ($this->feeds as $feed) { ?>
-		<li <?php echo ($this->flux && $this->flux->id () == $feed->id ()) ? 'class="active"' : ''; ?>>
-			<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'feed', 'params' => array ('id' => $feed->id ()))); ?>"><?php echo $feed->name (); ?></a>
-		</li>
-		<?php } ?>
-		<?php } else { ?>
-		<li class="disable"><span>Aucun flux</span></li>
-		<?php } ?>
-	</ul>
-</div>
+<ul class="nav nav-list aside">
+	<li class="nav-header">Vos flux RSS</li>
+
+	<?php if (!empty ($this->feeds)) { ?>
+	<?php foreach ($this->feeds as $feed) { ?>
+	<li <?php echo ($this->flux && $this->flux->id () == $feed->id ()) ? 'class="active"' : ''; ?>>
+		<a href="<?php echo Url::display (array ('c' => 'configure', 'a' => 'feed', 'params' => array ('id' => $feed->id ()))); ?>"><?php echo $feed->name (); ?></a>
+	</li>
+	<?php } ?>
+	<?php } else { ?>
+	<li class="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" />
+		<input type="submit" value="+" />
+	</form></li>
+</ul>

app/layout/aside_flux.phtml

@@ -1,4 +1,4 @@
-<div class="aside">
+<div class="aside aside_flux">
 	<?php if (isset ($this->cat_aside)) { ?>
 	<ul class="categories">
 		<li><a class="btn btn-important" href="<?php echo _url ('configure', 'feed'); ?>">Gestion des abonnements</a></li>

app/views/configure/categorize.phtml

@@ -13,6 +13,6 @@
 		<label for="new_category">Ajouter une catégorie</label>
 		<input type="text" id="new_category" name="new_category" placeholder="Nouvelle catégorie" />
 	
-		<input type="submit" value="Valider" />
+		<button class="btn btn-important">Sauvegarder</button>
 	</form>
 </div>

app/views/configure/display.phtml

@@ -42,6 +42,6 @@
 			<label for="radio_no">Non<noscript> - <strong>nécessite que javascript soit activé</strong></noscript></label>
 		</div>
 	
-		<input type="submit" value="Valider" />
+		<button class="btn btn-important">Valider</button>
 	</form>
 </div>

app/views/configure/feed.phtml

@@ -21,11 +21,11 @@
 		<?php } ?>
 	</div>
 	
-	<input type="submit" value="Valider" />
+	<button class="btn btn-important">Valider</button>
 	<?php } ?>
 	
-	<button formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
+	<button class="btn" formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
 </form>
 <?php } else { ?>
-<div class="nothing">Aucun flux sélectionné</div>
+<div class="alert"><span class="alert-head">Aucun flux sélectionné.</span> Pensez à en ajouter !</div>
 <?php } ?>

app/views/configure/importExport.phtml

@@ -16,12 +16,12 @@
 <div>
 	<form method="post" action="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'import'))); ?>" enctype="multipart/form-data">
 		<h1>Exporter au format OPML</h1>
-		<button formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
+		<button class="btn btn-important" formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
 	
 		<h1>Importer au format OPML</h1>
 		<label for="file">Fichier</label>
 		<input type="file" name="file" id="file" />
-		<input type="submit" value="Charger" />
+		<button class="btn btn-important">Importer</button>
 	</form>
 </div>
 <?php } ?>

app/views/configure/shortcut.phtml

@@ -40,6 +40,6 @@
 		<input type="text" id="prev_page" name="shortcuts[prev_page]" list="keys" value="<?php echo $s['prev_page']; ?>" />
 		<p>+ <code>shift</code> pour passer à la première page</p>
 	
-		<input type="submit" value="Valider" />
+		<button class="btn btn-important">Sauvegarder</button>
 	</form>
 </div>

app/views/index/index.phtml

@@ -52,14 +52,10 @@
 	<?php $this->entryPaginator->render ('pagination.phtml', 'page'); ?>
 </div>
 <?php } else { ?>
-<div class="table">
-	<div class="nothing">
-		<p>
-			Il n'y a aucun flux à afficher.
-		<?php if (Session::param ('mode', 'all') == 'not_read') { ?>
-		<a class="print_all" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'all'))); ?>">Afficher tous les articles ?</a>
-		<?php }	?>
-		</p>
-	</div>
+<div class="alert">
+	<span class="alert-head">Il n'y a aucun flux à afficher.</span>
+	<?php if (Session::param ('mode', 'all') == 'not_read') { ?>
+	<a class="print_all" href="<?php echo Url::display (array ('a' => 'changeMode', 'params' => array ('mode' => 'all'))); ?>">Afficher tous les articles ?</a>
+	<?php }	?>
 </div>
 <?php } ?>

public/theme/base.css

@@ -42,8 +42,8 @@ img {
 /* FORMULAIRES */
 .btn {
 	display: inline-block;
-	min-height: 30px;
-	min-width: 20px;
+	min-height: 25px;
+	min-width: 15px;
 	padding: 5px 10px;
 	background: #fff;
 	background: linear-gradient(#fff, #eee);
@@ -53,8 +53,9 @@ img {
 	border-right: 1px solid #aaa;
 	color: #666;
 	text-shadow: 0px 1px 1px #ddd;
-	line-height: 30px;
+	line-height: 25px;
 	vertical-align: middle;
+	cursor: pointer;
 }
 	.btn:hover {
 		background: #f4f4f4;
@@ -82,6 +83,67 @@ img {
 			box-shadow: none;
 		}
 
+/* NAVIGATION */
+.nav.nav-list li {
+	display: block;
+	height: 35px;
+	line-height: 35px;
+}
+	.nav.nav-list li:hover {
+		background: #fafafa;
+	}
+		.nav.nav-list li:hover a {
+			color: #003388;
+		}
+	.nav.nav-list li.active {
+		background: #0062BE;
+		color: #fff;
+	}
+		.nav.nav-list li.active a {
+			color: #fff;
+		}
+	.nav.nav-list li.disable {
+		color: #aaa;
+		background: #fafafa;
+		text-align: center;
+	}
+	.nav.nav-list li > * {
+		display: block;
+		padding: 0 10px;
+	}
+		.nav.nav-list a:hover {
+			text-decoration: none;
+		}
+
+	.nav.nav-list li.nav-header {
+		padding: 0 10px;
+		color: #666;
+		background: #f4f4f4;
+		border-bottom: 1px solid #ddd;
+		font-weight: bold;
+		text-shadow: 0 0 1px #ddd;
+	}
+
+/* ALERTS */
+.alert {
+	display: block;
+	width: 90%;
+	margin: 15px auto;
+	padding: 10px 15px;
+	background: #f4f4f4;
+	border: 1px solid #ccc;
+	border-right: 1px solid #aaa;
+	border-bottom: 1px solid #aaa;
+	border-radius: 5px;
+	color: #aaa;
+	text-shadow: 0 0 1px #eee;
+	box-shadow: 1px 1px 3px #aaa inset;
+}
+	.alert .alert-head {
+		font-weight: bold;
+		font-size: 105%;
+	}
+
 /* ICONES */
 .icon {
 	display: inline-block;
@@ -139,18 +201,20 @@ img {
 	display: table;
 	width: 100%;
 	height: 100%;
-	background: #fafafa;
+	background: #fff;
 	table-layout: fixed;
 }
 	.aside {
 		display: table-cell;
 		height: 100%;
 		width: 250px;
-		padding: 10px 0;
 		vertical-align: top;
 		border-right: 1px solid #aaa;
 		background: #fff;
 	}
+		.aside.aside_flux {
+			padding: 10px 0;
+		}
 
 	.nav_menu {
 		width: 100%;
@@ -171,6 +235,7 @@ img {
 }
 	.categories .feeds .feed,
 	.categories .category {
+		position: relative;
 		display: block;
 		width: 200px;
 		margin: 5px auto;
@@ -193,7 +258,9 @@ img {
 			vertical-align: middle;
 		}
 	.categories .notRead {
-		padding: 5px;
+		position: absolute;
+		top: 3px; right: 3px;
+		padding: 1px 5px;
 		background: #bbb;
 		color: #fff;
 		font-size: 90%;
@@ -205,32 +272,32 @@ img {
 		text-shadow: 0 0 1px #aaa;
 	}
 
-.post.flux {
+.flux {
 	font-family: Palatino, "Times New Roman", serif;
 	border-left: 10px solid #aaa;
 	background: #fafafa;
 }
-	.post.flux:hover {
+	.flux:hover {
 		background: #fff;
 	}
-	.post.flux .content {
+	.flux .content {
 		padding: 20px 100px;
 		line-height: 170%;
 	}
-		.post.flux .content h1, .post.flux .content h2, .post.flux .content h3 {
+		.flux .content h1, .flux .content h2, .flux .content h3 {
 			margin: 20px 0 5px;
 		}
-		.post.flux .content p {
+		.flux .content p {
 			margin: 10px 0;
 		}
-		.post.flux .content img.big {
+		.flux .content img.big {
 			display: block;
 			margin: 10px 0;
 			width: 100%;
 			box-shadow: 0 0 5px #000;
 			border-radius: 5px;
 		}
-		.post.flux .content pre {
+		.flux .content pre {
 			width: 90%;
 			margin: 10px auto;
 			padding: 10px;
@@ -240,7 +307,7 @@ img {
 			color: #fafafa;
 			border-radius: 5px;
 		}
-		.post.flux .content q, .post.flux .content blockquote {
+		.flux .content q, .flux .content blockquote {
 			display: block;
 			margin: 0;
 			padding: 10px 20px;
@@ -248,15 +315,15 @@ img {
 			border-left: 4px solid #ccc;
 			color: #666;
 		}
-	.post.flux.active {
+	.flux.active {
 		border-left: 10px solid #0062BE;
 		background: #fff;
 	}
-	.post.flux.not_read {
+	.flux.not_read {
 		border-left: 10px solid #FF5300;
 		background: #FFF3ED;
 	}
-	.post.flux.favorite {
+	.flux.favorite {
 		border-left: 10px solid #FFC300;
 		background: #FFF6DA;
 	}
@@ -289,7 +356,7 @@ img {
 					.flux_header .item.manage .read:hover {
 						text-decoration: none;
 					}
-					.post.flux.not_read .flux_header .item.manage .read {
+					.flux.not_read .flux_header .item.manage .read {
 						background: url("icons/unread.svg") center center no-repeat;
 					}
 				.flux_header .item.manage .bookmark {
@@ -302,7 +369,7 @@ img {
 					.flux_header .item.manage .bookmark:hover {
 						text-decoration: none;
 					}
-					.post.flux.favorite .flux_header .item.manage .bookmark {
+					.flux.favorite .flux_header .item.manage .bookmark {
 						background: url("icons/starred.svg") center center no-repeat;
 					}
 			.flux_header .item.website {
@@ -321,7 +388,7 @@ img {
 					padding: 0;
 					font-weight: normal;
 				}
-					.post.flux.not_read .flux_header .item.title h1 {
+					.flux.not_read .flux_header .item.title h1 {
 						font-weight: bold;
 					}
 			.flux_header .item.date {
@@ -421,7 +488,7 @@ img {
 	.flux_header .item.website {
 		width: 20px;
 	}
-	.post.flux .content {
+	.flux .content {
 		padding: 10px;
 	}
 	.pagination .pager-previous, .pagination .pager-next {