Design of the slider

See https://github.com/marienfressinaud/FreshRSS/issues/646

3 files changed, 36 insertions, 7 deletions

diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 2d55890f7..10578bdd3 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -134,9 +134,10 @@
 	<?php } ?>
 </div>
 
-<div id="slider">
+<a id="close-slider"></a>
+<div id="slider"<?php echo isset($this->feed) ? ' class="active"' : ''; ?>>
 <?php
-	if (isset($this->feed) && $this->feed) {
+	if (isset($this->feed)) {
 		$this->renderHelper('feed/update');
 	}
 ?>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 7fed7a819..925a93650 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1241,7 +1241,8 @@ function faviconNbUnread(n) {
 }
 
 function init_slider_observers() {
-	var slider = $('#slider');
+	var slider = $('#slider'),
+	    closer = $('#close-slider');
 	if (slider.length < 1) {
 		return;
 	}
@@ -1252,7 +1253,6 @@ function init_slider_observers() {
 		}
 
 		ajax_loading = true;
-
 		var url_slide = $(this).attr('href');
 
 		$.ajax({
@@ -1261,12 +1261,18 @@ function init_slider_observers() {
 			data : { ajax: true }
 		}).done(function (data) {
 			slider.html(data);
-			slider.show();
+			closer.addClass('active');
+			slider.addClass('active');
 			ajax_loading = false;
 		});
 
 		return false;
-	})
+	});
+
+	closer.on('click', function() {
+		closer.removeClass('active');
+		slider.removeClass('active');
+	});
 }
 
 function init_all() {
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 397f943a6..e6c832ee4 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -647,7 +647,29 @@ br + br + br {
 
 /*=== Slider */
 #slider {
-	min-height: 50px;
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 100%; right: 0;
+	overflow: auto;
+	background: #fff;
+	border-left: 1px solid #aaa;
+	transition: left 200ms linear;
+	-moz-transition: left 200ms linear;
+	-webkit-transition: left 200ms linear;
+	-o-transition: left 200ms linear;
+	-ms-transition: left 200ms linear;
+}
+#slider.active {
+	left: 40%;
+}
+#close-slider {
+	position: fixed;
+	top: 0; bottom: 0;
+	left: 100%; right: 0;
+	cursor: pointer;
+}
+#close-slider.active {
+	left: 0;
 }
 
 /*=== DIVERS */