Suppression code HTML inutile + amélioration CSS + restructuration du layout + correction bug mise à jour d'articles lorsqu'on visualise une catégorie

app/layout/configure_aside.phtml → app/layout/aside_configure.phtml

@@ -1,5 +1,5 @@
 <div class="aside">
-	<ul id="menu">
+	<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>

app/layout/aside_feed.phtml

@@ -0,0 +1,20 @@
+<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>

app/layout/layout.phtml

@@ -11,13 +11,7 @@
 <?php $this->partial ('header'); ?>
 
 <div id="global">
-	<?php if (Request::controllerName () != 'configure') { ?>
-	<?php $this->partial ('aside'); ?>
-	<?php } ?>
-	
-	<div id="main">
-		<?php $this->render (); ?>
-	</div>
+	<?php $this->render (); ?>
 </div>
 
 <?php $this->partial ('persona'); ?>

app/models/Entry.php

@@ -297,7 +297,7 @@ class EntryDAO extends Model_pdo {
 
 		$deb = ($this->currentPage - 1) * $this->nbItemsPerPage;
 		$fin = $this->nbItemsPerPage;
-		$sql = 'SELECT * FROM entry e INNER JOIN feed f ON e.id_feed = f.id' . $where
+		$sql = 'SELECT e.* FROM entry e INNER JOIN feed f ON e.id_feed = f.id' . $where
 		     . ' ORDER BY date' . $order
 		     . ' LIMIT ' . $deb . ', ' . $fin;
 

app/views/configure/categorize.phtml

@@ -1,6 +1,6 @@
-<div class="table">
-	<?php $this->partial ('configure_aside'); ?>
+<?php $this->partial ('aside_configure'); ?>
 
+<div class="table">
 	<form method="post" action="">
 		<h1>Gérer les catégories</h1>
 	

app/views/configure/display.phtml

@@ -1,6 +1,6 @@
-<div class="table">
-	<?php $this->partial ('configure_aside'); ?>
+<?php $this->partial ('aside_configure'); ?>
 
+<div class="table">
 	<form method="post" action="">
 		<h1>Configuration générale</h1>
 	

app/views/configure/feed.phtml

@@ -1,54 +1,31 @@
-<div class="table">
-	<?php /* $this->partial ('configure_aside'); */ ?>
+<?php $this->partial ('aside_feed'); ?>
 
-	<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>
+<?php if ($this->flux) { ?>
+<form method="post" action="">
+	<h1><?php echo $this->flux->name (); ?></h1>
+	<?php echo $this->flux->description (); ?>
+	
+	<label>URL du site</label>
+	<span><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
+	
+	<label>Nombre d'articles</label>
+	<span><?php echo $this->flux->nbEntries (); ?></span>
 	
-	<?php if ($this->flux) { ?>
-	<form method="post" action="">
-		<h1><?php echo $this->flux->name (); ?></h1>
-		<?php echo $this->flux->description (); ?>
-		
-		<label>URL du site</label>
-		<span><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
-		
-		<label>Nombre d'articles</label>
-		<span><?php echo $this->flux->nbEntries (); ?></span>
-		
-		<?php if (!empty ($this->categories)) { ?>
-		<label>Ranger dans une catégorie</label>
-		<div class="radio_group">
-			<?php foreach ($this->categories as $cat) { ?>
-			<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
-			<label for="cat_<?php echo $cat->id (); ?>"><?php echo $cat->name (); ?></label>
-			<br />
-			<?php } ?>
-		</div>
-		
-		<input type="submit" value="Valider" />
+	<?php if (!empty ($this->categories)) { ?>
+	<label>Ranger dans une catégorie</label>
+	<div class="radio_group">
+		<?php foreach ($this->categories as $cat) { ?>
+		<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
+		<label for="cat_<?php echo $cat->id (); ?>"><?php echo $cat->name (); ?></label>
+		<br />
 		<?php } ?>
-		
-		<button 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>
+	
+	<input type="submit" value="Valider" />
 	<?php } ?>
-</div>
+	
+	<button 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>
+<?php } ?>

app/views/configure/importExport.phtml

@@ -11,9 +11,9 @@
 	</body>
 </opml>
 <?php } else { ?>
-<div class="table">
-	<?php $this->partial ('configure_aside'); ?>
+<?php $this->partial ('aside_configure'); ?>
 
+<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>

app/views/configure/shortcut.phtml

@@ -1,6 +1,6 @@
-<div class="table">
-	<?php $this->partial ('configure_aside'); ?>
+<?php $this->partial ('aside_configure'); ?>
 
+<div>
 	<datalist id="keys">
 		<?php foreach ($this->list_keys as $key) { ?>
 		<option value="<?php echo $key; ?>">

app/views/helpers/pagination.phtml

@@ -5,10 +5,10 @@
 ?>
 
 <ul class="pagination">
-	<li class="item pager-next">
-	<?php if ($this->currentPage < $this->nbPage) { ?>
-	<?php $params[$getteur] = $this->currentPage + 1; ?>
-	<a href="<?php echo Url::display (array ('c' => $c, 'a' => $a, 'params' => $params)); ?>">‹ Anciens</a>
+	<li class="item pager-previous">
+	<?php if ($this->currentPage > 1) { ?>
+	<?php $params[$getteur] = $this->currentPage - 1; ?>
+	<a href="<?php echo Url::display (array ('c' => $c, 'a' => $a, 'params' => $params)); ?>">‹ plus récents</a>
 	<?php } else { ?>
 	&nbsp;
 	<?php } ?>
@@ -16,10 +16,10 @@
 
 	<li class="item pager-current">page <?php echo $this->currentPage; ?> / <?php echo $this->nbPage; ?></li>
 
-	<li class="item pager-previous">
-	<?php if ($this->currentPage > 1) { ?>
-	<?php $params[$getteur] = $this->currentPage - 1; ?>
-	<a href="<?php echo Url::display (array ('c' => $c, 'a' => $a, 'params' => $params)); ?>">Récents ›</a>
+	<li class="item pager-next">
+	<?php if ($this->currentPage < $this->nbPage) { ?>
+	<?php $params[$getteur] = $this->currentPage + 1; ?>
+	<a href="<?php echo Url::display (array ('c' => $c, 'a' => $a, 'params' => $params)); ?>">plus anciens ›</a>
 	<?php } else { ?>
 	&nbsp;
 	<?php } ?>

app/views/index/index.phtml

@@ -1,5 +1,7 @@
+<?php $this->partial ('aside_flux'); ?>
+
 <?php $items = $this->entryPaginator->items (true); ?>
-<div id="top">
+<div class="nav_menu">
 	<a class="btn" href="<?php echo Url::display (array ('c' => 'feed', 'a' => 'actualize')); ?>"><i class="icon refresh"></i></a>
 
 	<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>

app/views/javascript/main.phtml

@@ -104,7 +104,7 @@ function mark_favorite (active) {
 }
 
 function init_img () {
-	var imgs = $(".post.flux .content img").each (function () {
+	$(".post.flux .content img").each (function () {
 		if ($(this).width () > ($("#stream").width()) / 2) {
 			$(this).addClass("big");
 		}

public/theme/base.css

@@ -109,37 +109,39 @@ img {
 	}
 
 /* STRUCTURE */
-#global {
+.header {
 	display: table;
 	width: 100%;
-	height: 100%;
-	background: #fafafa;
+	background: #f4f4f4;
+	table-layout: fixed;
 }
-	.header {
-		display: table;
-		width: 100%;
-		background: #f4f4f4;
-		table-layout: fixed;
+	.header .item {
+		display: table-cell;
+		padding: 10px 0;
+		border-bottom: 1px solid #aaa;
+		vertical-align: middle;
+		text-align: center;
 	}
-		.header .item {
-			display: table-cell;
-			padding: 10px 0;
-			border-bottom: 1px solid #aaa;
-			vertical-align: middle;
-			text-align: center;
+		.header .item.title {
+			width: 250px;
 		}
-			.header .item.title {
-				width: 250px;
+			.header .item.title h1 {
+				padding: 0;
 			}
-				.header .item.title h1 {
-					padding: 0;
-				}
-				.header .item.title a:hover {
-					text-decoration: none;
-				}
-			.header .item.configure {
-				width: 100px;
+			.header .item.title a:hover {
+				text-decoration: none;
 			}
+		.header .item.configure {
+			width: 100px;
+		}
+
+#global {
+	display: table;
+	width: 100%;
+	height: 100%;
+	background: #fafafa;
+	table-layout: fixed;
+}
 	.aside {
 		display: table-cell;
 		height: 100%;
@@ -149,36 +151,16 @@ img {
 		border-right: 1px solid #aaa;
 		background: #fff;
 	}
-		
-	#main {
-		display: table-cell;
-		height: 100%;
-		line-height: 180%;
+
+	.nav_menu {
+		width: 100%;
 		background: #fafafa;
-		vertical-align: top;
+		border-bottom: 1px solid #aaa;
+		text-align: center;
+		padding: 5px 0;
 	}
-		#top {
-			width: 100%;
-			background: #fafafa;
-			border-bottom: 1px solid #aaa;
-			text-align: center;
-			padding: 5px 0;
-		}
-			#top .btn {
-				margin: 0 10px;
-			}
-		#main .table {
-			display: table;
-			width: 100%;
-			height: 100%;
-			table-layout: fixed;
-		}
-		#main .nothing {
-			display: table-cell;
-			width: 100%;
-			height: 100%;
-			vertical-align: middle;
-			text-align: center;
+		.nav_menu .btn {
+			margin: 0 5px;
 		}
 
 .categories {
@@ -223,169 +205,173 @@ img {
 		text-shadow: 0 0 1px #aaa;
 	}
 
-.post {
+.post.flux {
+	font-family: Palatino, "Times New Roman", serif;
+	border-left: 10px solid #aaa;
+	background: #fafafa;
 }
-	.post.flux {
-		font-family: Palatino, "Times New Roman", serif;
-		border-left: 10px solid #aaa;
-		background: #fafafa;
+	.post.flux:hover {
+		background: #fff;
 	}
-		.post.flux:hover {
-			background: #fff;
+	.post.flux .content {
+		padding: 20px 100px;
+		line-height: 170%;
+	}
+		.post.flux .content h1, .post.flux .content h2, .post.flux .content h3 {
+			margin: 20px 0 5px;
 		}
-		.post.flux .content {
-			padding: 20px 100px;
-			line-height: 170%;
+		.post.flux .content p {
+			margin: 10px 0;
 		}
-			.post.flux .content h1, .post.flux .content h2, .post.flux .content h3 {
-				margin: 20px 0 5px;
-			}
-			.post.flux .content p {
-				margin: 10px 0;
-			}
-			.post.flux .content img.big {
-				display: block;
-				margin: 10px 0;
-				width: 100%;
-				box-shadow: 0 0 5px #000;
-				border-radius: 5px;
-			}
-			.post.flux .content pre {
-				width: 90%;
-				margin: 10px auto;
-				padding: 10px;
-				overflow: auto;
-				background: #666;
-				border: 1px solid #000;
-				color: #fafafa;
-				border-radius: 5px;
-			}
-			.post.flux .content q, .post.flux .content blockquote {
-				display: block;
-				margin: 0;
-				padding: 10px 20px;
-				font-style: italic;
-				border-left: 4px solid #ccc;
-				color: #666;
-			}
-		.post.flux.active {
-			border-left: 10px solid #0062BE;
-			background: #fff;
+		.post.flux .content img.big {
+			display: block;
+			margin: 10px 0;
+			width: 100%;
+			box-shadow: 0 0 5px #000;
+			border-radius: 5px;
 		}
-		.post.flux.not_read {
-			border-left: 10px solid #FF5300;
-			background: #FFF3ED;
+		.post.flux .content pre {
+			width: 90%;
+			margin: 10px auto;
+			padding: 10px;
+			overflow: auto;
+			background: #666;
+			border: 1px solid #000;
+			color: #fafafa;
+			border-radius: 5px;
 		}
-		.post.flux.favorite {
-			border-left: 10px solid #FFC300;
-			background: #FFF6DA;
+		.post.flux .content q, .post.flux .content blockquote {
+			display: block;
+			margin: 0;
+			padding: 10px 20px;
+			font-style: italic;
+			border-left: 4px solid #ccc;
+			color: #666;
 		}
-.flux_header {
-	display: table;
-	table-layout: fixed;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 25px;
-	font-size: 12px;
-	line-height: 25px;
-	border-top: 1px solid #ddd;
-}
-	.flux_header .item {
-		display: table-cell;
-		vertical-align: middle;
+	.post.flux.active {
+		border-left: 10px solid #0062BE;
+		background: #fff;
+	}
+	.post.flux.not_read {
+		border-left: 10px solid #FF5300;
+		background: #FFF3ED;
+	}
+	.post.flux.favorite {
+		border-left: 10px solid #FFC300;
+		background: #FFF6DA;
 	}
-		.flux_header .item.manage {
-			width: 50px;
+
+	.flux_header {
+		display: table;
+		table-layout: fixed;
+		margin: 0;
+		padding: 0;
+		width: 100%;
+		height: 25px;
+		font-size: 12px;
+		line-height: 25px;
+		border-top: 1px solid #ddd;
+	}
+		.flux_header .item {
+			display: table-cell;
+			vertical-align: middle;
 		}
-			.flux_header .item.manage .read {
-				display: inline-block;
-				width: 25px;
-				height: 25px;
-				background: url("icons/read.svg") center center no-repeat;
-				vertical-align: middle;
+			.flux_header .item.manage {
+				width: 50px;
 			}
-				.flux_header .item.manage .read:hover {
-					text-decoration: none;
+				.flux_header .item.manage .read {
+					display: inline-block;
+					width: 25px;
+					height: 25px;
+					background: url("icons/read.svg") center center no-repeat;
+					vertical-align: middle;
 				}
-				.post.flux.not_read .flux_header .item.manage .read {
-					background: url("icons/unread.svg") center center no-repeat;
+					.flux_header .item.manage .read:hover {
+						text-decoration: none;
+					}
+					.post.flux.not_read .flux_header .item.manage .read {
+						background: url("icons/unread.svg") center center no-repeat;
+					}
+				.flux_header .item.manage .bookmark {
+					display: inline-block;
+					width: 25px;
+					height: 25px;
+					background: url("icons/non-starred.svg") center center no-repeat;
+					vertical-align: middle;
 				}
-			.flux_header .item.manage .bookmark {
-				display: inline-block;
-				width: 25px;
-				height: 25px;
-				background: url("icons/non-starred.svg") center center no-repeat;
-				vertical-align: middle;
+					.flux_header .item.manage .bookmark:hover {
+						text-decoration: none;
+					}
+					.post.flux.favorite .flux_header .item.manage .bookmark {
+						background: url("icons/starred.svg") center center no-repeat;
+					}
+			.flux_header .item.website {
+				width: 200px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
-				.flux_header .item.manage .bookmark:hover {
-					text-decoration: none;
-				}
-				.post.flux.favorite .flux_header .item.manage .bookmark {
-					background: url("icons/starred.svg") center center no-repeat;
-				}
-		.flux_header .item.website {
-			width: 200px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-		.flux_header .item.title {
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-			.flux_header .item.title h1 {
-				font-size: 12px;
-				padding: 0;
-				font-weight: normal;
+			.flux_header .item.title {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
-				.post.flux.not_read .flux_header .item.title h1 {
-					font-weight: bold;
+				.flux_header .item.title h1 {
+					font-size: 12px;
+					padding: 0;
+					font-weight: normal;
 				}
-		.flux_header .item.date {
-			width: 200px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			text-align: right;
-			font-size: 10px;
-			color: #666;
-		}
-		.flux_header .item.link {
-			width: 35px;
-			text-align: center;
-		}
-			.flux_header .item.link a {
-				display: inline-block;
-				width: 25px;
-				height: 25px;
-				background: url("website.svg") center center no-repeat;
-				vertical-align: middle;
+					.post.flux.not_read .flux_header .item.title h1 {
+						font-weight: bold;
+					}
+			.flux_header .item.date {
+				width: 200px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				text-align: right;
+				font-size: 10px;
+				color: #666;
+			}
+			.flux_header .item.link {
+				width: 35px;
+				text-align: center;
 			}
-				.flux_header .item.link a:hover {
-					text-decoration: none;
+				.flux_header .item.link a {
+					display: inline-block;
+					width: 25px;
+					height: 25px;
+					background: url("icons/website.svg") center center no-repeat;
+					vertical-align: middle;
 				}
+					.flux_header .item.link a:hover {
+						text-decoration: none;
+					}
 
 /*** PAGINATION ***/
 .pagination {
-	display: block;
+	display: table;
+	width: 100%;
 	margin: 0;
 	background: #fafafa;
 	text-align: center;
 	color: #333;
 	font-size: 80%;
 	line-height: 200%;
-	border-top: 1px solid #aaa;
+	table-layout: fixed;
 }
 	.pagination .item {
-		display: inline-block;
+		display: table-cell;
 		padding: 5px 10px;
+		border-top: 1px solid #aaa;
 	}
 		.pagination .item a {
 			color: #333;
 			font-style: italic;
 		}
+	.pagination .pager-previous, .pagination .pager-next {
+		width: 200px;
+	}
 	.pagination .item.pager-current {
 		font-weight: bold;
 	}
@@ -426,24 +412,8 @@ img {
 	}
 
 @media(max-width: 840px) {
-	#global {
-		table-layout: fixed;
-	}
 	.header,
-	.aside {
-		display: none;
-	}
-	#main {
-		width: 100%;
-		padding: 0;
-	}
-		#top {
-			width: 100%;
-			position: static;
-		}
-	#stream {
-		padding: 0;
-	}
+	.aside,
 	.flux_header .item.website span,
 	.flux_header .item.date {
 		display: none;
@@ -454,12 +424,12 @@ img {
 	.post.flux .content {
 		padding: 10px;
 	}
-	a#read_mode {
-		display: none;
+	.pagination .pager-previous, .pagination .pager-next {
+		width: 100px;
 	}
 }
 @media(max-width: 450px) {
-	#top {
+	.nav_menu {
 		display: none;
 	}
 }