Ajout d'un fond noir en mode vue globale

Cache le site pour se concentrer sur la liste d'articles

app/views/helpers/view/global_view.phtml

@@ -36,6 +36,7 @@
 ?>
 </div>
 
+<div id="overlay"></div>
 <div id="panel">
 	<a class="close" href="#"><i class="icon i_close"></i></a>
 </div>

public/scripts/global_view.js

@@ -16,6 +16,7 @@ function load_panel(link) {
 		init_posts();
 		init_stream_delegates($("#panel"));
 
+		$("#overlay").fadeIn();
 		$("#panel").slideToggle();
 
 		panel_loading = false;
@@ -25,8 +26,10 @@ function load_panel(link) {
 function init_close_panel() {
 	$("#panel .close").click(function() {
 		$("#panel").html('<a class="close" href="#"><i class="icon i_close"></i></a>');
+
 		init_close_panel();
 		$("#panel").slideToggle();
+		$("#overlay").fadeOut();
 	});
 }
 

public/themes/default/freshrss.css

@@ -432,7 +432,7 @@
 	border-radius: 5px;
 }
 	#panel .close {
-		position: absolute;
+		position: fixed;
 		top: 10px; right: 0;
 		display: inline-block;
 		width: 26px;
@@ -445,6 +445,14 @@
 		background: #fff;
 	}
 
+#overlay {
+	display: none;
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 0; right: 0;
+	background: rgba(0, 0, 0, 0.9);
+}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;

public/themes/flat-design/freshrss.css

@@ -426,7 +426,7 @@ body {
 	border-radius: 5px;
 }
 	#panel .close {
-		position: absolute;
+		position: fixed;
 		top: 10px; right: 0px;
 		display: inline-block;
 		width: 26px;
@@ -441,6 +441,14 @@ body {
 			background: #7f8c8d;
 		}
 
+#overlay {
+	display: none;
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 0; right: 0;
+	background: rgba(0, 0, 0, 0.9);
+}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;