Grosse optimisation JavaScript

* Fusion de endless_mode.js dans main.js car endless_mode.js est
toujours chargé et assez petit.
* Suppression des changements de style en JavaScript lors du chargement
(genre boucle de .hide(), ou d'ajout de classe ".stick") et
implémentation en PHP + CSS à la place.
* Chargement JavaScript asynchrone (defer + async) pour de meilleurs
performances.
* Utilisation préférable des événements globaux plutôt que des
événements pour chaque élément avec jQuery.on(events, selector) pour un
chargement plus rapide et moins de mémoire utilisée.
* Optimisation manuelle du JavaScript (sélecteurs CSS plus performants,
méthodes jQuery plus appropriées, etc.).
* Désactivation de init_img() qui était coûteux, lancé à un moment où
les images ne sont de toute manière pas encore chargées, et qui
n'apporte rien car il y a déjà un img {max-width:100%} en CSS.
* JavaScript en mode strict.
* Enfin, passage du code JavaScript dans JSLint et du coup nombreuses
corrections (syntaxe, variables, méthodes dépréciées...).
* Devrait permettre de fermer
https://github.com/marienfressinaud/FreshRSS/issues/121
* Au passage, quelques simplifications CSS pour de meilleures
performances.

16 files changed, 402 insertions, 391 deletions

diff --git a/app/controllers/indexController.php b/app/controllers/indexController.php
index 9f71c0e57..15b0b1d18 100755
--- a/app/controllers/indexController.php
+++ b/app/controllers/indexController.php
@@ -18,7 +18,6 @@ class indexController extends ActionController {
 
 			View::appendScript (Url::display ('/scripts/shortcut.js'));
 			View::appendScript (Url::display ('/scripts/main.js'));
-			View::appendScript (Url::display ('/scripts/endless_mode.js'));
 
 			if ($output == 'global') {
 				View::appendScript (Url::display ('/scripts/global_view.js'));
diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index 22f52d25a..f661eadd4 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -51,8 +51,9 @@
 		<?php if (!empty ($feeds)) { ?>
 		<li>
 			<?php $c_active = false; if ($this->get_c == $cat->id ()) { $c_active = true; } ?>
-			<div class="category<?php echo $c_active ? ' active' : ''; ?>">
+			<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 $cat->name (); ?></a>
+				<a class="btn dropdown-toggle" href="#"><i class="icon <?php echo $c_active ? 'i_up' : 'i_down'; ?>"></i></a>
 			</div>
 
 			<ul class="feeds<?php echo $c_active ? ' active' : ''; ?>">
diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index 7f389463e..cfbdc4a2e 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -8,6 +8,7 @@
 
 		<?php echo self::headTitle (); ?>
 		<?php echo self::headStyle (); ?>
+		<?php echo self::headScript (); ?>
 		<script>//<![CDATA[
 <?php $this->renderHelper ('../javascript/main'); ?>
 		//]]></script>
diff --git a/app/layout/nav_entries.phtml b/app/layout/nav_entries.phtml
index 5501f1725..3c3c3ae5e 100644
--- a/app/layout/nav_entries.phtml
+++ b/app/layout/nav_entries.phtml
@@ -1,4 +1,4 @@
-<ul class="nav_entries">
+<ul id="nav_entries">
 	<li class="item"><a class="previous_entry" href="#"><i class="icon i_prev"></i></a></li>
 	<li class="item"><a class="up" href="#"><i class="icon i_up"></i></a></li>
 	<li class="item"><a class="next_entry" href="#"><i class="icon i_next"></i></a></li>
diff --git a/app/models/Feed.php b/app/models/Feed.php
index 14eeb942a..d3e429b22 100644
--- a/app/models/Feed.php
+++ b/app/models/Feed.php
@@ -171,7 +171,7 @@ class Feed extends Model {
 	}
 	public function _nbNotRead ($value) {
 		$this->nbNotRead = is_numeric ($value) ? intval ($value) : -1;
-		}
+	}
 	public function _nbEntries ($value) {
 		$this->nbEntries = is_numeric ($value) ? intval ($value) : -1;
 	}
diff --git a/app/views/helpers/view/global_view.phtml b/app/views/helpers/view/global_view.phtml
index 131152f27..9fd7d9863 100644
--- a/app/views/helpers/view/global_view.phtml
+++ b/app/views/helpers/view/global_view.phtml
@@ -37,6 +37,6 @@
 </div>
 
 <div id="overlay"></div>
-<div id="panel">
+<div id="panel"<?php echo $this->conf->displayPosts () === 'no' ? ' class="hide_posts"' : ''; ?>>
 	<a class="close" href="#"><i class="icon i_close"></i></a>
 </div>
\ No newline at end of file
diff --git a/app/views/helpers/view/normal_view.phtml b/app/views/helpers/view/normal_view.phtml
index 88fc602f6..46547587f 100644
--- a/app/views/helpers/view/normal_view.phtml
+++ b/app/views/helpers/view/normal_view.phtml
@@ -7,7 +7,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 	$items = $this->entryPaginator->items ();
 ?>
 
-<div id="stream" class="normal">
+<div id="stream" class="normal<?php echo $this->conf->displayPosts () === 'no' ? ' hide_posts' : ''; ?>">
 	<?php
 		$display_today = true;
 		$display_yesterday = true;
@@ -77,7 +77,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 							$link = urlencode ($item->link ());
 							$title = urlencode ($item->title () . ' - ' . $feed->name ());
 					?>
-					<div class="dropdown">
+						<div class="dropdown">
 						<div id="dropdown-share-<?php echo $item->id ();?>" class="dropdown-target"></div>
 						<i class="icon i_share"></i> <a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>"><?php echo Translate::t ('share'); ?></a>
 
@@ -85,8 +85,8 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 							<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
 
 							<?php
-							$shaarli = $this->conf->urlShaarli ();
-							if ((!login_is_conf ($this->conf) || is_logged ()) && $shaarli) {
+								$shaarli = $this->conf->urlShaarli ();
+								if ((!login_is_conf ($this->conf) || is_logged ()) && $shaarli) {
 							?>
 							<li class="item">
 								<a target="_blank" href="<?php echo $shaarli . '?post=' . $link . '&amp;title=' . $title . '&amp;source=bookmarklet'; ?>">
@@ -128,7 +128,6 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 
 						<ul class="dropdown-menu">
 							<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
-
 							<?php foreach($tags as $tag) { ?>
 							<li class="item"><a href="<?php echo _url ('index', 'index', 'search', urlencode ('#' . $tag)); ?>"><?php echo $tag; ?></a></li>
 							<?php } ?>
diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml
index 82ed8ff18..7adb57037 100644
--- a/app/views/javascript/main.phtml
+++ b/app/views/javascript/main.phtml
@@ -1,13 +1,13 @@
 <?php
+	echo '"use strict";', "\n";
 	$mark = $this->conf->markWhen ();
 	echo 'var ',
-		'hide_posts=', $this->conf->displayPosts () === 'no' ? 'true,' : 'false,',
-		'hide_posts=', $this->conf->displayPosts () === 'no' ? 'true,' : 'false,',
-		'auto_mark_article=', $mark['article'] === 'yes' ? 'true,' : 'false,',
-		'auto_mark_site=', $mark['site'] === 'yes' ? 'true,' : 'false,',
-		'auto_mark_scroll=', $mark['scroll'] === 'yes' ? 'true,' : 'false,',
-		'auto_load_more=', $this->conf->autoLoadMore () === 'yes' ? 'true,' : 'false,',
-		'does_lazyload=', $this->conf->lazyload() === 'yes' ? 'true' : 'false', ";\n";
+		'hide_posts=', ($this->conf->displayPosts () === 'yes' || Request::param ('output') === 'reader') ? 'false' : 'true',
+		',auto_mark_article=', $mark['article'] === 'yes' ? 'true' : 'false',
+		',auto_mark_site=', $mark['site'] === 'yes' ? 'true' : 'false',
+		',auto_mark_scroll=', $mark['scroll'] === 'yes' ? 'true' : 'false',
+		',auto_load_more=', $this->conf->autoLoadMore () === 'yes' ? 'true' : 'false',
+		',does_lazyload=', $this->conf->lazyload() === 'yes' ? 'true' : 'false', ";\n";
 
 	$s = $this->conf->shortcuts ();
 	echo 'var shortcuts={',
diff --git a/lib/minz/View.php b/lib/minz/View.php
index 1bfa0a61f..fd92762b3 100755
--- a/lib/minz/View.php
+++ b/lib/minz/View.php
@@ -150,9 +150,8 @@ class View {
 				$styles .= '<!--[if ' . $cond . ']>';
 			}
 
-			$styles .= '<link rel="stylesheet" type="text/css"';
-			$styles .= ' media="' . $style['media'] . '"';
-			$styles .= ' href="' . $style['url'] . '" />';
+			$styles .= '<link rel="stylesheet" media="' . $style['media']
+				. '" href="' . $style['url'] . '" />';
 
 			if ($cond) {
 				$styles .= '<![endif]-->';
@@ -190,9 +189,14 @@ class View {
 				$scripts .= '<!--[if ' . $cond . ']>';
 			}
 
-			$scripts .= '<script type="text/javascript"';
-			$scripts .= ' src="' . $script['url'] . '">';
-			$scripts .= '</script>';
+			$scripts .= '<script src="' . $script['url'] . '"';
+			if ($script['defer']) {
+				$scripts .= ' defer="defer"';
+			}
+			if ($script['async']) {
+				$scripts .= ' async="async"';
+			}
+			$scripts .= '></script>';
 
 			if ($cond) {
 				$scripts .= '<![endif]-->';
@@ -203,16 +207,20 @@ class View {
 
 		return $scripts;
 	}
-	public static function prependScript ($url, $cond = false) {
+	public static function prependScript ($url, $cond = false, $defer = true, $async = true) {
 		array_unshift(self::$scripts, array (
 			'url' => $url,
-			'cond' => $cond
+			'cond' => $cond,
+			'defer' => $defer,
+			'async' => $async,
 		));
 	}
-	public static function appendScript ($url, $cond = false) {
+	public static function appendScript ($url, $cond = false, $defer = true, $async = true) {
 		self::$scripts[] = array (
 			'url' => $url,
-			'cond' => $cond
+			'cond' => $cond,
+			'defer' => $defer,
+			'async' => $async,
 		);
 	}
 
diff --git a/public/scripts/endless_mode.js b/public/scripts/endless_mode.js
deleted file mode 100644
index b56614a55..000000000
--- a/public/scripts/endless_mode.js
+++ /dev/null
@@ -1,44 +0,0 @@
-var url_load_more = "";
-var load_more = false;
-var container = null;
-
-function init_load_more(block) {
-	var next_link = $("a#load_more")
-	if (!next_link.length) {
-		// no more article to load
-		url_load_more = "";
-		return;
-	}
-
-	url_load_more = next_link.attr("href");
-	container = block;
-
-	$("#load_more").click (function () {
-		load_more_posts ();
-
-		return false;
-	});
-}
-
-function load_more_posts () {
-	if(load_more == true || url_load_more == "") {
-		return;
-	}
-
-	load_more = true;
-	$("#load_more").addClass("loading");
-	$.get (url_load_more, function (data) {
-		container.children(".flux:last").after($("#stream .flux", data));
-		$(".pagination").html($(".pagination", data).html());
-
-		init_load_more(container);
-		init_posts();
-		
-		$("#load_more").removeClass("loading");
-		load_more = false;
-	});
-}
-
-$(document).ready (function () {
-	init_load_more($("#stream"));
-});
\ No newline at end of file
diff --git a/public/scripts/global_view.js b/public/scripts/global_view.js
index bc2254011..8e86fcb21 100644
--- a/public/scripts/global_view.js
+++ b/public/scripts/global_view.js
@@ -1,13 +1,14 @@
+"use strict";
 var panel_loading = false;
 
 function load_panel(link) {
-	if(panel_loading) {
+	if (panel_loading) {
 		return;
 	}
 
 	panel_loading = true;
 
-	$.get (link, function (data) {
+	$.get(link, function (data) {
 		$("#panel").append($(".nav_menu, #stream .day, #stream .flux, #stream .pagination", data));
 
 		$("#panel .nav_menu").children().not("#nav_menu_read_all").remove();
@@ -21,14 +22,14 @@ function load_panel(link) {
 		// force le démarrage du scroll en haut.
 		// Sans ça, si l'on scroll en lisant une catégorie par exemple,
 		// en en ouvrant une autre ensuite, on se retrouve au même point de scroll
-		$("#panel").scrollTop (0);
+		$("#panel").scrollTop(0);
 
 		panel_loading = false;
 	});
 }
 
 function init_close_panel() {
-	$("#panel .close").click(function() {
+	$("#panel .close").click(function () {
 		$("#panel").html('<a class="close" href="#"><i class="icon i_close"></i></a>');
 
 		init_close_panel();
@@ -38,7 +39,7 @@ function init_close_panel() {
 }
 
 function init_global_view() {
-	$("#stream .category a").click(function() {
+	$("#stream .category a").click(function () {
 		var link = $(this).attr("href");
 
 		load_panel(link);
@@ -51,8 +52,9 @@ function init_global_view() {
 	init_stream_delegates($("#panel"));
 }
 
-
-$(document).ready (function () {
+if (document.addEventListener) {
+	document.addEventListener('DOMContentLoaded', function () {
 	init_global_view();
 	init_close_panel();
-});
\ No newline at end of file
+	}, false);
+}
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 684239568..92259696f 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -1,260 +1,248 @@
-function is_reader_mode() {
-	var stream = $("#stream.reader");
-	return stream.html() != null;
-}
+"use strict";
+var $stream = null;
 
 function is_normal_mode() {
-	var stream = $("#stream.normal");
-	return stream.html() != null;
+	return $stream.hasClass('normal');
 }
 
 function is_global_mode() {
-	var stream = $("#stream.global");
-	return stream.html() != null;
+	return $stream.hasClass('global');
 }
 
-function redirect (url, new_tab) {
+function redirect(url, new_tab) {
 	if (url) {
 		if (new_tab) {
-			window.open (url);
+			window.open(url);
 		} else {
 			location.href = url;
 		}
 	}
 }
 
-function toggleContent (new_active, old_active) {
-	if (does_lazyload) {
-		new_active.find('img[data-original]').each(function() {
-			this.setAttribute('src', this.getAttribute('data-original'));
-			this.removeAttribute('data-original');
-		});
-	}
-
-	old_active.removeClass ("active");
-	if (old_active[0] != new_active[0]) {
-		new_active.addClass ("active");
-	}
-
-	var box_to_move = "html,body";
-	var relative_move = false;
-	if (is_global_mode()) {
-		box_to_move = "#panel";
-		relative_move = true;
-	}
-
-	var new_pos = new_active.position ().top,
-		old_scroll = $(box_to_move).scrollTop (),
-		new_scroll = old_scroll;
-	if (hide_posts) {
-		old_active.children (".flux_content").toggle (0);
-
-		new_pos = new_active.position ().top;
-		old_scroll = $(box_to_move).scrollTop ();
-
-		if (relative_move) {
-			new_pos += old_scroll;
-		}
-
-		if (old_active[0] != new_active[0]) {
-			new_active.children (".flux_content").toggle (0, function () {
-				new_scroll = $(box_to_move).scrollTop (new_pos).scrollTop ();
-			});
-		}
-	} else {
-		if (relative_move) {
-			new_pos += old_scroll;
-		}
-
-		new_scroll = $(box_to_move).scrollTop (new_pos).scrollTop ();
-	}
-
-	if (auto_mark_article) {
-		mark_read(new_active, true);
-	}
-}
-
-function _incLabel(p, inc) {
-	var i = (parseInt(p.replace(/\D/g, '')) || 0) + inc;
+function incLabel(p, inc) {
+	var i = (parseInt(p.replace(/\D/g, ''), 10) || 0) + inc;
 	return i > 0 ? ' (' + i + ')' : '';
 }
 
-function mark_read (active, only_not_read) {
-	if (active[0] === undefined || (
-		only_not_read === true && !active.hasClass("not_read"))) {
+function mark_read(active, only_not_read) {
+	if (active[0] === undefined || (only_not_read === true && !active.hasClass("not_read"))) {
 		return false;
 	}
 
-	url = active.find ("a.read").attr ("href");
+	var url = active.find("a.read").attr("href");
 	if (url === undefined) {
 		return false;
 	}
 
-	$.ajax ({
+	$.ajax({
 		type: 'POST',
 		url: url,
 		data : { ajax: true }
-	}).done (function (data) {
-		res = jQuery.parseJSON(data);
+	}).done(function (data) {
+		var res = $.parseJSON(data);
 
-		active.find ("a.read").attr ("href", res.url);
+		active.find("a.read").attr("href", res.url);
 
 		var inc = 0;
-		if (active.hasClass ("not_read")) {
-			active.removeClass ("not_read");
+		if (active.hasClass("not_read")) {
+			active.removeClass("not_read");
 			inc--;
 		} else if (only_not_read !== true || active.hasClass("not_read")) {
-			active.addClass ("not_read");
+			active.addClass("not_read");
 			inc++;
 		}
 
-		//Update unread: feed	//Alex
+		//Update unread: feed
 		var feed_url = active.find(".website>a").attr("href"),
 			feed_id = feed_url.substr(feed_url.lastIndexOf('f_')),
 			elem = $('#' + feed_id + ' .feed').get(0),
-			attr_unread = elem ? elem.getAttributeNode('data-unread') : null,
-			feed_priority = elem ? parseInt(elem.getAttribute('data-priority')) : 0;
-		if (attr_unread)
-			attr_unread.value = Math.max(0, parseInt(attr_unread.value) + inc);
+			feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0,
+			feed_priority = elem ? (parseInt(elem.getAttribute('data-priority'), 10) || 0) : 0;
+		elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
 
 		//Update unread: category
 		elem = $('#' + feed_id).parent().prevAll('.category').children(':first').get(0);
-		attr_unread = elem ? elem.getAttributeNode('data-unread') : null;
-		if (attr_unread)
-			attr_unread.value = Math.max(0, parseInt(attr_unread.value) + inc);
+		feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
+		elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
 
-		if (feed_priority > 0) {	//Update unread: all
+		//Update unread: all
+		if (feed_priority > 0) {
 			elem = $('#aside_flux .all').children(':first').get(0);
-			attr_unread = elem ? elem.getAttributeNode('data-unread') : null;
-			if (attr_unread)
-				attr_unread.value = Math.max(0, parseInt(attr_unread.value) + inc);
+			feed_unread = elem ? (parseInt(elem.getAttribute('data-unread'), 10) || 0) : 0;
+			elem.setAttribute('data-unread', Math.max(0, feed_unread + inc));
 		}
 
 		//Update unread: title
-		document.title = document.title.replace(/((?: \(\d+\))?)( - .*?)((?: \(\d+\))?)$/, function(m, p1, p2, p3) {
-			return _incLabel(p1, inc) + p2 + _incLabel(p3, feed_priority > 0 ? inc : 0);
+		document.title = document.title.replace(/((?: \(\d+\))?)( - .*?)((?: \(\d+\))?)$/, function (m, p1, p2, p3) {
+			return incLabel(p1, inc) + p2 + incLabel(p3, feed_priority > 0 ? inc : 0);
 		});
 	});
 }
 
-function mark_favorite (active) {
+function mark_favorite(active) {
 	if (active[0] === undefined) {
 		return false;
 	}
 
-	url = active.find ("a.bookmark").attr ("href");
+	var url = active.find("a.bookmark").attr("href");
 	if (url === undefined) {
 		return false;
 	}
 
-	$.ajax ({
+	$.ajax({
 		type: 'POST',
 		url: url,
 		data : { ajax: true }
-	}).done (function (data) {
-		res = jQuery.parseJSON(data);
+	}).done(function (data) {
+		var res = $.parseJSON(data);
 
-		active.find ("a.bookmark").attr ("href", res.url);
+		active.find("a.bookmark").attr("href", res.url);
 		var inc = 0;
-		if (active.hasClass ("favorite")) {
-			active.removeClass ("favorite");
+		if (active.hasClass("favorite")) {
+			active.removeClass("favorite");
 			inc--;
 		} else {
-			active.addClass ("favorite");
+			active.addClass("favorite");
 			inc++;
 		}
 
 		var favourites = $('.favorites>a').contents().last().get(0);
-		if (favourites && favourites.textContent)
-			favourites.textContent = favourites.textContent.replace(/((?: \(\d+\))?\s*)$/, function(m, p1) {
-				return _incLabel(p1, inc);
+		if (favourites && favourites.textContent) {
+			favourites.textContent = favourites.textContent.replace(/((?: \(\d+\))?\s*)$/, function (m, p1) {
+				return incLabel(p1, inc);
 			});
+		}
 	});
 }
 
+function toggleContent(new_active, old_active) {
+	if (does_lazyload) {
+		new_active.find('img[data-original]').each(function () {
+			this.setAttribute('src', this.getAttribute('data-original'));
+			this.removeAttribute('data-original');
+		});
+	}
+
+	old_active.removeClass("active");
+	if (old_active[0] !== new_active[0]) {
+		new_active.addClass("active");
+	}
+
+	var box_to_move = "html,body",
+		relative_move = false;
+	if (is_global_mode()) {
+		box_to_move = "#panel";
+		relative_move = true;
+	}
+
+	var new_pos = new_active.position().top,
+		old_scroll = $(box_to_move).scrollTop();
+	if (hide_posts) {
+
+		new_pos = new_active.position().top;
+		old_scroll = $(box_to_move).scrollTop();
+
+		if (relative_move) {
+			new_pos += old_scroll;
+		}
+
+		if (old_active[0] !== new_active[0]) {
+			new_active.children(".flux_content").first().each(function () {
+				$(box_to_move).scrollTop(new_pos).scrollTop();
+			});
+		}
+	} else {
+		if (relative_move) {
+			new_pos += old_scroll;
+		}
+
+		$(box_to_move).scrollTop(new_pos).scrollTop();
+	}
+
+	if (auto_mark_article) {
+		mark_read(new_active, true);
+	}
+}
+
 function prev_entry() {
-	old_active = $(".flux.active");
-	last_active = $(".flux:last");
-	new_active = old_active.prevAll (".flux:first");
+	var old_active = $(".flux.active"),
+		last_active = $(".flux:last"),
+		new_active = old_active.prevAll(".flux:first");
 
 	if (new_active.hasClass("flux")) {
-		toggleContent (new_active, old_active);
-	} else if (old_active[0] === undefined &&
-		new_active[0] === undefined) {
-		toggleContent (last_active, old_active);
+		toggleContent(new_active, old_active);
+	} else if (old_active[0] === undefined && new_active[0] === undefined) {
+		toggleContent(last_active, old_active);
 	}
 }
 
 function next_entry() {
-	old_active = $(".flux.active");
-	first_active = $(".flux:first");
-	last_active = $(".flux:last");
-	new_active = old_active.nextAll (".flux:first");
+	var old_active = $(".flux.active"),
+		first_active = $(".flux:first"),
+		last_active = $(".flux:last"),
+		new_active = old_active.nextAll(".flux:first");
 
 	if (new_active.hasClass("flux")) {
-		toggleContent (new_active, old_active);
-	} else if (old_active[0] === undefined &&
-		new_active[0] === undefined) {
-		toggleContent (first_active, old_active);
+		toggleContent(new_active, old_active);
+	} else if (old_active[0] === undefined && new_active[0] === undefined) {
+		toggleContent(first_active, old_active);
 	}
 
 	if ((!auto_load_more) && (last_active.attr("id") === new_active.attr("id"))) {
-		load_more_posts ();
+		load_more_posts();
 	}
 }
 
-function init_img () {
+/*function init_img() {
 	var maxWidth = $(".flux_content .content").width() / 2;
-	$(".flux_content .content img").each (function () {
-		if ($(this).width () > maxWidth) {
+	$(".flux_content .content img").each(function () {
+		if ($(this).width() > maxWidth) {
 			$(this).addClass("big");
 		}
 	});
-}
+}*/
 
 function inMarkViewport(flux, box_to_follow, relative_follow) {
 	var top = flux.position().top;
 	if (relative_follow) {
 		top += box_to_follow.scrollTop();
 	}
-	var height = flux.height();
-	var begin = top + 3 * height / 4;
-	var bot = Math.min(begin + 75, top + height);
-
-	var windowTop = box_to_follow.scrollTop();
-	var windowBot = windowTop + box_to_follow.height() / 2;
+	var height = flux.height(),
+		begin = top + 3 * height / 4,
+		bot = Math.min(begin + 75, top + height),
+		windowTop = box_to_follow.scrollTop(),
+		windowBot = windowTop + box_to_follow.height() / 2;
 
 	return (windowBot >= begin && bot >= windowBot);
 }
 
-function init_posts () {
-	init_img ();
+function init_lazyload() {
 	if ($.fn.lazyload) {
 		if (is_global_mode()) {
-			$(".flux .content img").lazyload({
+			$(".flux_content img").lazyload({
 				container: $("#panel")
 			});
 		} else {
-			$(".flux .content img").lazyload();
+			$(".flux_content img").lazyload();
 		}
 	}
+}
 
-	if (hide_posts) {
-		$(".flux:not(.active) .flux_content").hide ();
-	}
+function init_posts() {
+	//init_img();	//Alex
+	init_lazyload();
 
-	var box_to_follow = $(window);
-	var relative_follow = false;
+	var box_to_follow = $(window),
+		relative_follow = false;
 	if (is_global_mode()) {
 		box_to_follow = $("#panel");
 		relative_follow = true;
 	}
 
 	if (auto_mark_scroll) {
-		box_to_follow.scroll(function() {
-			$('.flux.not_read:visible').each(function() {
-				if ($(this).children(".flux_content").is(':visible') &&
-					inMarkViewport($(this), box_to_follow, relative_follow)) {
+		box_to_follow.scroll(function () {
+			$('.not_read:visible').each(function () {
+				if ($(this).children(".flux_content").is(':visible') && inMarkViewport($(this), box_to_follow, relative_follow)) {
 					mark_read($(this), true);
 				}
 			});
@@ -262,147 +250,142 @@ function init_posts () {
 	}
 
 	if (auto_load_more) {
-		box_to_follow.scroll(function() {
+		box_to_follow.scroll(function () {
 			var load_more = $("#load_more");
-			if (!load_more.is(':visible')) return;
-			var boxBot = box_to_follow.scrollTop() + box_to_follow.height();
-			var load_more_top = load_more.position().top;
+			if (!load_more.is(':visible')) {
+				return;
+			}
+			var boxBot = box_to_follow.scrollTop() + box_to_follow.height(),
+				load_more_top = load_more.position().top;
 			if (relative_follow) {
 				load_more_top += box_to_follow.scrollTop();
 			}
 			if (boxBot >= load_more_top) {
-				load_more_posts ();
+				load_more_posts();
 			}
 		});
 	}
 }
 
-function init_column_categories () {
+function init_column_categories() {
 	if (!is_normal_mode()) {
 		return;
 	}
-
-	//TODO: toggle class in PHP and remove the CSS changes done in JavaScript
-	$(".category:not(.all):not(.favorites) .btn:first-child").width ("160px");
-	$(".category:not(.all):not(.favorites)").addClass("stick").
-		append ("<a class=\"btn dropdown-toggle\" href=\"#\"><i class=\"icon i_down\"></i></a>");
-
-	$(".category + .feeds").not(".active").hide();
-	$(".category.active a.dropdown-toggle i").toggleClass ("i_up");
-
-	$(".category a.dropdown-toggle").click (function () {
-		$(this).children ().toggleClass ("i_up");
-		$(this).parent ().next (".feeds").slideToggle();
+	$('#aside_flux').on('click', '.category>a.dropdown-toggle', function () {
+		$(this).children().toggleClass("i_down").toggleClass("i_up");
+		$(this).parent().next(".feeds").slideToggle();
 		return false;
 	});
 }
 
-function init_shortcuts () {
+function init_shortcuts() {
 	// Touches de manipulation
-	shortcut.add(shortcuts['mark_read'], function () {
+	shortcut.add(shortcuts.mark_read, function () {
 		// on marque comme lu ou non lu
-		active = $(".flux.active");
-		mark_read (active, false);
+		var active = $(".flux.active");
+		mark_read(active, false);
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
-	shortcut.add("shift+"+shortcuts['mark_read'], function () {
+	shortcut.add("shift+" + shortcuts.mark_read, function () {
 		// on marque tout comme lu
-		url = $(".nav_menu a.read_all").attr ("href");
-		redirect (url, false);
+		var url = $(".nav_menu a.read_all").attr("href");
+		redirect(url, false);
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
-	shortcut.add(shortcuts['mark_favorite'], function () {
+	shortcut.add(shortcuts.mark_favorite, function () {
 		// on marque comme favori ou non favori
-		active = $(".flux.active");
-		mark_favorite (active);
+		var active = $(".flux.active");
+		mark_favorite(active);
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
 
 	// Touches de navigation
-	shortcut.add(shortcuts['prev_entry'], prev_entry, {
-		'disable_in_input':true
+	shortcut.add(shortcuts.prev_entry, prev_entry, {
+		'disable_in_input': true
 	});
-	shortcut.add("shift+"+shortcuts['prev_entry'], function () {
-		old_active = $(".flux.active");
-		first = $(".flux:first");
+	shortcut.add("shift+" + shortcuts.prev_entry, function () {
+		var old_active = $(".flux.active"),
+			first = $(".flux:first");
 
 		if (first.hasClass("flux")) {
-			toggleContent (first, old_active);
+			toggleContent(first, old_active);
 		}
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
-	shortcut.add(shortcuts['next_entry'], next_entry, {
-		'disable_in_input':true
+	shortcut.add(shortcuts.next_entry, next_entry, {
+		'disable_in_input': true
 	});
-	shortcut.add("shift+"+shortcuts['next_entry'], function () {
-		old_active = $(".flux.active");
-		last = $(".flux:last");
+	shortcut.add("shift+" + shortcuts.next_entry, function () {
+		var old_active = $(".flux.active"),
+			last = $(".flux:last");
 
 		if (last.hasClass("flux")) {
-			toggleContent (last, old_active);
+			toggleContent(last, old_active);
 		}
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
-	shortcut.add(shortcuts['go_website'], function () {
-		url_website = $(".flux.active .link a").attr ("href");
+	shortcut.add(shortcuts.go_website, function () {
+		var url_website = $(".flux.active .link a").attr("href");
 
 		if (auto_mark_site) {
-			$(".flux.active").each (function () {
+			$(".flux.active").each(function () {
 				mark_read($(this), true);
 			});
 		}
 
-		redirect (url_website, true);
+		redirect(url_website, true);
 	}, {
-		'disable_in_input':true
+		'disable_in_input': true
 	});
 }
 
 function init_stream_delegates(divStream) {
-	divStream.on('click', '.flux_header .item.title, .flux_header .item.date', function (e) {	//flux_header_toggle
-		old_active = $(".flux.active");
-		new_active = $(this).parent ().parent ();
+	divStream.on('click', '.flux_header>.item.title, .flux_header>.item.date', function (e) {	//flux_header_toggle
+		var old_active = $(".flux.active"),
+			new_active = $(this).parent().parent();
 		if (e.target.tagName.toUpperCase() === 'A') {	//Leave real links alone
 			if (auto_mark_article) {
 				mark_read(new_active, true);
 			}
 			return true;
 		}
-		toggleContent (new_active, old_active);
+		toggleContent(new_active, old_active);
 	});
 
 	divStream.on('click', '.flux a.read', function () {
-		active = $(this).parents (".flux");
-		mark_read (active, false);
+		var active = $(this).parents(".flux");
+		mark_read(active, false);
 
 		return false;
 	});
 
 	divStream.on('click', '.flux a.bookmark', function () {
-		active = $(this).parents (".flux");
-		mark_favorite (active);
+		var active = $(this).parents(".flux");
+		mark_favorite(active);
 
 		return false;
 	});
 
 	divStream.on('click', '.flux .content a', function () {
-		$(this).attr ('target', '_blank');
+		$(this).attr('target', '_blank');
 	});
 
-	divStream.on('click', '.item.title>a',function (e) {
-		if (e.ctrlKey) return true;	//Allow default control-click behaviour such as open in backround-tab
-		$(this).parent ().click ();	//Will perform toggle flux_content
+	divStream.on('click', '.item.title>a', function (e) {
+		if (e.ctrlKey) {
+			return true;	//Allow default control-click behaviour such as open in backround-tab
+		}
+		$(this).parent().click();	//Will perform toggle flux_content
 		return false;
 	});
 
-	divStream.on('click', '.bigMarkAsRead', function() {
-		url = $(".nav_menu a.read_all").attr ("href");
-		redirect (url, false);
+	divStream.on('click', '.bigMarkAsRead', function () {
+		var url = $(".nav_menu .read_all").attr("href");
+		redirect(url, false);
 		return false;
 	});
 
@@ -414,30 +397,31 @@ function init_stream_delegates(divStream) {
 }
 
 function init_nav_entries() {
-	$('.nav_entries a.previous_entry').click(function() {
+	var $nav_entries = $('#nav_entries');
+	$nav_entries.find('.previous_entry').click(function () {
 		prev_entry();
 		return false;
 	});
-	$('.nav_entries a.next_entry').click(function() {
+	$nav_entries.find('.next_entry').click(function () {
 		next_entry();
 		return false;
 	});
-	$('.nav_entries a.up').click(function() {
-		var active_item = $(".flux.active");
-		var windowTop = $(window).scrollTop();
-		var item_top = active_item.position ().top;
+	$nav_entries.find('.up').click(function () {
+		var active_item = $(".flux.active"),
+			windowTop = $(window).scrollTop(),
+			item_top = active_item.position().top;
 
 		if (windowTop > item_top) {
-			$("html,body").scrollTop (item_top);
+			$("html,body").scrollTop(item_top);
 		} else {
-			$("html,body").scrollTop (0);
+			$("html,body").scrollTop(0);
 		}
 		return false;
 	});
 }
 
 function init_templates() {
-	$('#aside_flux').on('click', '.dropdown-toggle', function () {
+	$('#aside_flux').on('click', '.feeds .dropdown-toggle', function () {
 		if ($(this).nextAll('.dropdown-menu').length === 0) {
 			var feed_id = $(this).closest('li').attr('id').substr(2),
 				feed_web = $(this).data('fweb'),
@@ -448,42 +432,83 @@ function init_templates() {
 }
 
 function init_actualize() {
-	$("#actualize").click (function () {
-		$.getScript('./?c=javascript&a=actualize').done(function() {
-			updateFeeds ();
+	$("#actualize").click(function () {
+		$.getScript('./?c=javascript&a=actualize').done(function () {
+			updateFeeds();
 		});
 		return false;
 	});
 }
 
-function closeNotification () {
-	$(".notification").slideUp (200, function () {
-		$(".notification").remove ();
+function closeNotification() {
+	$(".notification").slideUp(200, function () {
+		$(".notification").remove();
 	});
 }
 
 function init_notifications() {
-	notif = $(".notification");
+	var notif = $(".notification");
 	if (notif[0] !== undefined) {
-		timer = setInterval('closeNotification()', 5000);
+		window.setInterval(closeNotification, 4000);
 
-		notif.find ("a.close").click (function () {
-			closeNotification ();
+		notif.find("a.close").click(function () {
+			closeNotification();
 			return false;
 		});
 	}
 }
 
-$(function () {
-	if (is_reader_mode()) {
-		hide_posts = false;
+//<endless_mode>
+var url_load_more = "",
+	load_more = false;
+
+function load_more_posts() {
+	if (load_more || url_load_more === '') {
+		return;
+	}
+
+	load_more = true;
+	$('#load_more').addClass('loading');
+	$.get(url_load_more, function (data) {
+		$stream.children('.flux:last').after($('#stream', data).children('.flux'));
+		$('.pagination').replaceWith($('.pagination', data));
+
+		init_load_more();
+		init_lazyload();
+
+		$('#load_more').removeClass('loading');
+		load_more = false;
+	});
+}
+
+function init_load_more() {
+	var $next_link = $("#load_more");
+	if (!$next_link.length) {
+		// no more article to load
+		url_load_more = "";
+		return;
 	}
-	init_posts ();
-	init_column_categories ();
-	init_shortcuts ();
-	init_stream_delegates($('#stream'));
-	init_nav_entries();
-	init_templates();
-	init_notifications();
-	init_actualize();
-});
+
+	url_load_more = $next_link.attr("href");
+
+	$next_link.click(function () {
+		load_more_posts();
+		return false;
+	});
+}
+//</endless_mode>
+
+if (document.addEventListener) {	//jQuery not ready yet
+	document.addEventListener('DOMContentLoaded', function () {
+		$stream = $('#stream');
+		init_posts();
+		init_column_categories();
+		init_shortcuts();
+		init_stream_delegates($stream);
+		init_nav_entries();
+		init_templates();
+		init_notifications();
+		init_actualize();
+		init_load_more();
+	}, false);
+}
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 144c77c92..168417312 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -107,6 +107,9 @@
 			width: 195px;
 			position: relative;
 		}
+		.category.stick .btn:first-child {
+			width:160px;
+		}
 		.category .btn:first-child:not([data-unread="0"]):after {
 			content: attr(data-unread);
 			position: absolute;
@@ -120,6 +123,9 @@
 			box-shadow: 1px 3px 3px #aaa inset;
 			text-shadow: 0 0 1px #aaa;
 		}
+		.category + .feeds:not(.active) {
+			display:none;
+		}
 	.categories .feeds {
 		width: 100%;
 		margin: 0;
@@ -403,11 +409,11 @@
 	.content p {
 		margin: 0 0 20px;
 	}
-	.content img.big {
+	img.big {
 		display: block;
 		margin: 10px auto;
 	}
-	.content figure img.big {
+	figure img.big {
 		margin: 0;
 	}
 	.content hr {
@@ -473,6 +479,10 @@
 	text-align: center;
 }
 
+.hide_posts > :not(.active) > .flux_content {
+	display:none;
+}
+
 /*** PAGINATION ***/
 .pagination {
 	display: table;
@@ -493,10 +503,10 @@
 			font-weight: bold;
 			font-size: 140%;
 		}
-		.pagination .item.pager-first,
-		.pagination .item.pager-previous,
-		.pagination .item.pager-next,
-		.pagination .item.pager-last {
+		.pagination .pager-first,
+		.pagination .pager-previous,
+		.pagination .pager-next,
+		.pagination .pager-last {
 			width: 100px;
 		}
 		.pagination .item a {
@@ -511,7 +521,7 @@
 		border-top: 1px solid #aaa;
 	}
 
-.nav_entries {
+#nav_entries {
 	display: table;
 	width: 250px;
 	height: 40px;
@@ -525,14 +535,14 @@
 	line-height: 40px;
 	table-layout: fixed;
 }
-	.nav_entries .item {
+	#nav_entries .item {
 		display: table-cell;
 		width: 30%;
 	}
-		.nav_entries .item a {
+		#nav_entries a {
 			display: block;
 		}
-		.nav_entries .item .icon.i_up {
+		#nav_entries .i_up {
 			margin: 5px 0 0;
 			vertical-align: top;
 		}
@@ -720,7 +730,7 @@
 			margin: 30px 0;
 		}
 
-	.nav_entries {
+	#nav_entries {
 		width: 100%;
 	}
 
@@ -769,27 +779,27 @@
 		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
 		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
 	}
-	.btn.btn-important {
+	.btn-important {
 		background: #0084CC;
 		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 	}
-		.btn.btn-important:hover {
+		.btn-important:hover {
 			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 		}
-	.btn.btn-attention {
+	.btn-attention {
 		background: #E95B57;
 		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 	}
-		.btn.btn-attention:hover {
+		.btn-attention:hover {
 			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
 			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
 			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 8685b4e92..f6fb1bcf2 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -161,7 +161,7 @@ input, select, textarea {
 	.stick input:first-child {
 		border-radius: 3px 0 0 3px;
 	}
-		.stick .btn.btn-important:first-child {
+		.stick .btn-important:first-child {
 			border-right: 1px solid #06f;
 		}
 	.stick .btn:last-child,
@@ -217,30 +217,30 @@ input, select, textarea {
 		background: #eee;
 	}
 
-	.btn.btn-important {
+	.btn-important {
 		background: linear-gradient(to bottom, #0084CC, #0045CC);
 		color: #fff;
 		border: 1px solid #0062B7;
 		text-shadow: 0px -1px 0 #aaa;
 	}
-		.btn.btn-important:hover {
+		.btn-important:hover {
 			background: linear-gradient(to bottom, #0066CC, #0045CC);
 		}
-		.btn.btn-important:active {
+		.btn-important:active {
 			background: #0044CB;
 			box-shadow: none;
 		}
 
-	.btn.btn-attention {
+	.btn-attention {
 		background: linear-gradient(to bottom, #E95B57, #BD362F);
 		color: #fff;
 		border: 1px solid #C44742;
 		text-shadow: 0px -1px 0px #666;
 	}
-		.btn.btn-attention:hover {
+		.btn-attention:hover {
 			background: linear-gradient(to bottom, #D14641, #BD362F);
 		}
-		.btn.btn-attention:active {
+		.btn-attention:active {
 			background: #BD362F;
 			box-shadow: none;
 		}
@@ -486,99 +486,99 @@ input, select, textarea {
 	line-height: 16px;
 	background: center center no-repeat;
 }
-	.icon.i_refresh {
+	.i_refresh {
 		background-image: url("icons/refresh.png");
 		background-image: url("icons/refresh.svg");
 	}
-	.icon.i_bookmark {
+	.i_bookmark {
 		background-image: url("icons/starred.png");
 		background-image: url("icons/starred.svg");
 	}
-	.icon.i_not_bookmark {
+	.i_not_bookmark {
 		background-image: url("icons/unstarred.png");
 		background-image: url("icons/unstarred.svg");
 	}
-	.icon.i_read {
+	.i_read {
 		background-image: url("icons/read.png");
 		background-image: url("icons/read.svg");
 	}
-	.icon.i_unread {
+	.i_unread {
 		background-image: url("icons/unread.png");
 		background-image: url("icons/unread.svg");
 	}
-	.icon.i_all {
+	.i_all {
 		background-image: url("icons/all.png");
 		background-image: url("icons/all.svg");
 	}
-	.icon.i_close {
+	.i_close {
 		background-image: url("icons/close.png");
 		background-image: url("icons/close.svg");
 	}
-	.icon.i_search {
+	.i_search {
 		background-image: url("icons/search.png");
 		background-image: url("icons/search.svg");
 	}
-	.icon.i_configure {
+	.i_configure {
 		background-image: url("icons/configure.png");
 		background-image: url("icons/configure.svg");
 	}
-	.icon.i_login {
+	.i_login {
 		background-image: url("icons/login.png");
 		background-image: url("icons/login.svg");
 	}
-	.icon.i_logout {
+	.i_logout {
 		background-image: url("icons/logout.png");
 		background-image: url("icons/logout.svg");
 	}
-	.icon.i_add {
+	.i_add {
 		background-image: url("icons/add.png");
 		background-image: url("icons/add.svg");
 	}
-	.icon.i_link {
+	.i_link {
 		background-image: url("icons/link.png");
 		background-image: url("icons/link.svg");
 	}
-	.icon.i_down {
+	.i_down {
 		background-image: url("icons/down.png");
 		background-image: url("icons/down.svg");
 	}
-	.icon.i_up {
+	.i_up {
 		background-image: url("icons/up.png");
 		background-image: url("icons/up.svg");
 	}
-	.icon.i_next {
+	.i_next {
 		background-image: url("icons/next.png");
 		background-image: url("icons/next.svg");
 	}
-	.icon.i_prev {
+	.i_prev {
 		background-image: url("icons/previous.png");
 		background-image: url("icons/previous.svg");
 	}
-	.icon.i_help {
+	.i_help {
 		background-image: url("icons/help.png");
 		background-image: url("icons/help.svg");
 	}
-	.icon.i_note {
+	.i_note {
 		background-image: url("icons/note.png");
 		background-image: url("icons/note.svg");
 	}
-	.icon.i_note_empty {
+	.i_note_empty {
 		background-image: url("icons/note_empty.png");
 		background-image: url("icons/note_empty.svg");
 	}
-	.icon.i_category {
+	.i_category {
 		background-image: url("icons/category.png");
 		background-image: url("icons/category.svg");
 	}
-	.icon.i_rss {
+	.i_rss {
 		background-image: url("icons/rss.png");
 		background-image: url("icons/rss.svg");
 	}
-	.icon.i_share {
+	.i_share {
 		background-image: url("icons/share.png");
 		background-image: url("icons/share.svg");
 	}
-	.icon.i_tag {
+	.i_tag {
 		background-image: url("icons/tag.png");
 		background-image: url("icons/tag.svg");
 	}
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index 60c454bbe..81a5d684b 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -106,6 +106,9 @@ body {
 			width: 195px;
 			position: relative;
 		}
+		.category.stick .btn:first-child {
+			width:160px;
+		}
 		.category .btn:first-child:not([data-unread="0"]):after {
 			content: attr(data-unread);
 			position: absolute;
@@ -117,6 +120,9 @@ body {
 			border-left: 3px solid #2980B9;
 			border-radius: 5px 0 0 5px;
 		}
+		.category + .feeds:not(.active) {
+			display:none;
+		}
 	.categories .feeds {
 		width: 220px;
 		margin: 0 auto;
@@ -393,11 +399,11 @@ body {
 	.content p {
 		margin: 0 0 20px;
 	}
-	.content img.big {
+	img.big {
 		display: block;
 		margin: 10px auto;
 	}
-	.content figure img.big {
+	figure img.big {
 		margin: 0;
 	}
 	.content hr {
@@ -465,6 +471,10 @@ body {
 	text-align: center;
 }
 
+.hide_posts > :not(.active) > .flux_content {
+	display:none;
+}
+
 /*** PAGINATION ***/
 .pagination {
 	display: table;
@@ -507,7 +517,7 @@ body {
 				text-decoration: none;
 			}
 
-.nav_entries {
+#nav_entries {
 	display: table;
 	width: 250px;
 	height: 40px;
@@ -520,14 +530,14 @@ body {
 	line-height: 40px;
 	table-layout: fixed;
 }
-	.nav_entries .item {
+	#nav_entries .item {
 		display: table-cell;
 		width: 30%;
 	}
-		.nav_entries .item a {
+		#nav_entries a {
 			display: block;
 		}
-		.nav_entries .item .icon.i_up {
+		#nav_entries .i_up {
 			margin: 5px 0 0;
 			vertical-align: top;
 		}
@@ -727,7 +737,7 @@ body {
 			margin: 30px 0;
 		}
 
-	.nav_entries {
+	#nav_entries {
 		width: 100%;
 	}
 
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 0824d1bb3..ef4b96e82 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -478,99 +478,99 @@ input, select, textarea {
 	line-height: 16px;
 	background: center center no-repeat;
 }
-	.icon.i_refresh {
+	.i_refresh {
 		background-image: url("icons/refresh.png");
 		background-image: url("icons/refresh.svg");
 	}
-	.icon.i_bookmark {
+	.i_bookmark {
 		background-image: url("icons/starred.png");
 		background-image: url("icons/starred.svg");
 	}
-	.icon.i_not_bookmark {
+	.i_not_bookmark {
 		background-image: url("icons/unstarred.png");
 		background-image: url("icons/unstarred.svg");
 	}
-	.icon.i_read {
+	.i_read {
 		background-image: url("icons/read.png");
 		background-image: url("icons/read.svg");
 	}
-	.icon.i_unread {
+	.i_unread {
 		background-image: url("icons/unread.png");
 		background-image: url("icons/unread.svg");
 	}
-	.icon.i_all {
+	.i_all {
 		background-image: url("icons/all.png");
 		background-image: url("icons/all.svg");
 	}
-	.icon.i_close {
+	.i_close {
 		background-image: url("icons/close.png");
 		background-image: url("icons/close.svg");
 	}
-	.icon.i_search {
+	.i_search {
 		background-image: url("icons/search.png");
 		background-image: url("icons/search.svg");
 	}
-	.icon.i_configure {
+	.i_configure {
 		background-image: url("icons/configure.png");
 		background-image: url("icons/configure.svg");
 	}
-	.icon.i_login {
+	.i_login {
 		background-image: url("icons/login.png");
 		background-image: url("icons/login.svg");
 	}
-	.icon.i_logout {
+	.i_logout {
 		background-image: url("icons/logout.png");
 		background-image: url("icons/logout.svg");
 	}
-	.icon.i_add {
+	.i_add {
 		background-image: url("icons/add.png");
 		background-image: url("icons/add.svg");
 	}
-	.icon.i_link {
+	.i_link {
 		background-image: url("icons/link.png");
 		background-image: url("icons/link.svg");
 	}
-	.icon.i_down {
+	.i_down {
 		background-image: url("icons/down.png");
 		background-image: url("icons/down.svg");
 	}
-	.icon.i_up {
+	.i_up {
 		background-image: url("icons/up.png");
 		background-image: url("icons/up.svg");
 	}
-	.icon.i_next {
+	.i_next {
 		background-image: url("icons/next.png");
 		background-image: url("icons/next.svg");
 	}
-	.icon.i_prev {
+	.i_prev {
 		background-image: url("icons/previous.png");
 		background-image: url("icons/previous.svg");
 	}
-	.icon.i_help {
+	.i_help {
 		background-image: url("icons/help.png");
 		background-image: url("icons/help.svg");
 	}
-	.icon.i_note {
+	.i_note {
 		background-image: url("icons/note.png");
 		background-image: url("icons/note.svg");
 	}
-	.icon.i_note_empty {
+	.i_note_empty {
 		background-image: url("icons/note_empty.png");
 		background-image: url("icons/note_empty.svg");
 	}
-	.icon.i_category {
+	.i_category {
 		background-image: url("icons/category.png");
 		background-image: url("icons/category.svg");
 	}
-	.icon.i_rss {
+	.i_rss {
 		background-image: url("icons/rss.png");
 		background-image: url("icons/rss.svg");
 	}
-	.icon.i_share {
+	.i_share {
 		background-image: url("icons/share.png");
 		background-image: url("icons/share.svg");
 	}
-	.icon.i_tag {
+	.i_tag {
 		background-image: url("icons/tag.png");
 		background-image: url("icons/tag.svg");
 	}