Mise à jour de la vue globale

* Nombre de non lus mis à jour automatiquement
* Mise à jour structure HTML
* Mise à jour design

6 files changed, 78 insertions, 39 deletions

diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index e6eb974d2..72de9b6dd 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -35,7 +35,9 @@
 		<li>
 			<?php $c_active = false; if ($this->get_c == $cat->id ()) { $c_active = true; } ?>
 			<div class="category stick<?php echo $c_active ? ' active' : ''; ?>">
-				<a data-unread="<?php echo $cat->nbNotRead (); ?>" class="btn<?php echo $c_active ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id ()); ?>"><?php echo htmlspecialchars($cat->name (), ENT_NOQUOTES, 'UTF-8'); ?></a>
+				<a data-unread="<?php echo $cat->nbNotRead (); ?>" class="btn<?php echo $c_active ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id ()); ?>">
+					<?php echo htmlspecialchars($cat->name (), ENT_NOQUOTES, 'UTF-8'); ?>
+				</a>
 				<a class="btn dropdown-toggle" href="#"><i class="icon <?php echo $c_active ? 'i_up' : 'i_down'; ?>"></i></a>
 			</div>
 
diff --git a/app/views/helpers/view/global_view.phtml b/app/views/helpers/view/global_view.phtml
index fc55ed8ba..ae3bae9bc 100644
--- a/app/views/helpers/view/global_view.phtml
+++ b/app/views/helpers/view/global_view.phtml
@@ -1,30 +1,26 @@
 <?php $this->partial ('nav_menu'); ?>
 
-<div id="stream" class="global">
+<div id="stream" class="global categories">
 <?php
 	foreach ($this->cat_aside as $cat) {
 		$feeds = $cat->feeds ();
-		$catNotRead = $cat->nbNotRead ();
 		if (!empty ($feeds)) {
 ?>
-	<div class="category">
-		<div class="cat_header">
-			<a href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id (), 'output', 'normal'); ?>">
-			<?php echo htmlspecialchars($cat->name(), ENT_NOQUOTES, 'UTF-8'); ?><?php echo $catNotRead > 0 ? ' (' . $catNotRead . ')' : ''; ?>
+	<div class="box-category">
+		<div class="category">
+			<a data-unread="<?php echo $cat->nbNotRead (); ?>" class="btn" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id (), 'output', 'normal'); ?>">
+			<?php echo htmlspecialchars($cat->name(), ENT_NOQUOTES, 'UTF-8'); ?>
 			</a>
 		</div>
 
 		<ul class="feeds">
 			<?php foreach ($feeds as $feed) { ?>
 			<?php $not_read = $feed->nbNotRead (); ?>
-			<li class="item">
+			<li id="f_<?php echo $feed->id (); ?>" class="item<?php echo $feed->inError () ? ' error' : ''; ?><?php echo $feed->nbEntries () == 0 ? ' empty' : ''; ?>">
 				<img class="favicon" src="<?php echo $feed->favicon (); ?>" alt="✇" />
 
-				<a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id (), 'output', 'normal'); ?>">
-				<?php echo $not_read > 0 ? '<b>' : ''; ?>
+				<a class="feed" data-unread="<?php echo $feed->nbNotRead (); ?>" data-priority="<?php echo $feed->priority (); ?>" href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id (), 'output', 'normal'); ?>">
 				<?php echo htmlspecialchars($feed->name(), ENT_NOQUOTES, 'UTF-8'); ?>
-				<?php echo $not_read > 0 ? ' (' . $not_read . ')' : ''; ?>
-				<?php echo $not_read > 0 ? '</b>' : ''; ?>
 				</a>
 			</li>
 			<?php } ?>
diff --git a/public/scripts/global_view.js b/public/scripts/global_view.js
index 2c95bdfb7..94580dc0d 100644
--- a/public/scripts/global_view.js
+++ b/public/scripts/global_view.js
@@ -35,11 +35,13 @@ function init_close_panel() {
 		init_close_panel();
 		$("#panel").slideToggle();
 		$("#overlay").fadeOut();
+
+		return false;
 	});
 }
 
 function init_global_view() {
-	$("#stream .category a").click(function () {
+	$("#stream .box-category a").click(function () {
 		var link = $(this).attr("href");
 
 		load_panel(link);
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 2f3ed38f1..e0df69f61 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -68,15 +68,19 @@ function mark_read(active, only_not_read) {
 		//Update unread: all
 		if (feed_priority > 0) {
 			elem = $('#aside_flux .all').children(':first').get(0);
-			feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
-			elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
+			if (elem) {
+				feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
+				elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
+			}
 		}
 
 		//Update unread: favourites
 		if (active.closest('div').hasClass('favorite')) {
 			elem = $('#aside_flux .favorites').children(':first').get(0);
-			feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
-			elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
+			if (elem) {
+				feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
+				elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
+			}
 		}
 
 		//Update unread: title
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 34ec1395c..650f8eef6 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -100,9 +100,8 @@
 }
 	.category {
 		display: block;
-		padding: 5px 0;
 		width: 220px;
-		margin: 5px auto;
+		margin: 10px auto;
 		text-align: left;
 		overflow: hidden;
 		white-space: nowrap;
@@ -362,7 +361,7 @@
 #stream.global {
 	text-align: center;
 }
-	#stream.global .category {
+	#stream.global .box-category {
 		display: inline-block;
 		width: 280px;
 		margin: 20px 10px;
@@ -373,29 +372,48 @@
 		text-align: left;
 		box-shadow: 0 0 5px #bbb;
 	}
-		#stream.global .cat_header {
+		#stream.global .category {
+			width: 100%;
+			margin: 0;
+		}
+		#stream.global .btn {
+			display: block;
+			width: auto;
 			height: 35px;
+			margin: 0;
 			padding: 0 10px;
 			background: #eee;
+			border: none;
 			border-bottom: 1px solid #aaa;
 			border-radius: 5px 5px 0 0;
 			line-height: 35px;
 			font-size: 120%;
 		}
-			#stream.global .cat_header a {
-				color: #333;
-				text-shadow: 0 -1px 0px #aaa;
+			#stream.global .btn:not([data-unread="0"]) {
+				font-weight:bold;
+			}
+			#stream.global .btn:first-child:not([data-unread="0"]):after {
+				top: 0; right: 5px;
+				border: 0;
+				background: none;
+				color: #666;
+				font-weight: bold;
+				box-shadow: none;
 			}
-		#stream.global .category .feeds {
+		#stream.global .box-category .feeds {
+			display: block;
 			max-height: 250px;
 			margin: 0;
 			list-style: none;
 			overflow: auto;
 		}
-			#stream.global .category .feeds .item {
+			#stream.global .box-category .feeds .item {
 				padding: 2px 10px;
 				font-size: 90%;
 			}
+		#stream.global .box-category .feed {
+			width: 220px;
+		}
 
 .content {
 	min-height: 300px;
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index 23d1d93ea..9880c830f 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -94,9 +94,8 @@ body {
 }
 	.category {
 		display: block;
-		padding: 5px 0;
 		width: 220px;
-		margin: 5px auto;
+		margin: 10px auto;
 		text-align: left;
 		overflow: hidden;
 		white-space: nowrap;
@@ -124,7 +123,7 @@ body {
 			display:none;
 		}
 	.categories .feeds {
-		width: 220px;
+		width: 100%;
 		margin: 0 auto;
 		list-style: none;
 	}
@@ -348,39 +347,57 @@ body {
 #stream.global {
 	text-align: center;
 }
-	#stream.global .category {
+	#stream.global .box-category {
 		display: inline-block;
 		width: 280px;
 		margin: 20px 10px;
 		vertical-align: top;
-		border: 1px solid #aaa;
+		border: 1px solid #ddd;
 		border-radius: 5px;
 		text-align: left;
-		box-shadow: 0 0 5px #bbb;
 	}
-		#stream.global .cat_header {
+		#stream.global .category {
+			width: 100%;
+			margin: 0;
+		}
+		#stream.global .btn {
+			display: block;
+			width: auto;
 			height: 35px;
+			margin: 0;
 			padding: 0 10px;
-			background: #eee;
-			border-bottom: 1px solid #aaa;
+			background: #ecf0f1;
+			color: #333;
+			border-bottom: 1px solid #ddd;
 			border-radius: 5px 5px 0 0;
 			line-height: 35px;
 			font-size: 120%;
 		}
-			#stream.global .cat_header a {
+			#stream.global .btn:not([data-unread="0"]) {
+				font-weight:bold;
+			}
+			#stream.global .btn:first-child:not([data-unread="0"]):after {
+				top: 0; right: 5px;
+				border: 0;
+				background: none;
 				color: #333;
-				text-shadow: 0 -1px 0px #aaa;
+				font-weight: bold;
+				box-shadow: none;
 			}
-		#stream.global .category .feeds {
+		#stream.global .box-category .feeds {
+			display: block;
 			max-height: 250px;
 			margin: 0;
 			list-style: none;
 			overflow: auto;
 		}
-			#stream.global .category .feeds .item {
+			#stream.global .box-category .feeds .item {
 				padding: 2px 10px;
 				font-size: 90%;
 			}
+		#stream.global .box-category .feed {
+			width: 220px;
+		}
 
 .content {
 	min-height: 300px;