Fix issue #130 : amélioration vue globale

Désormais, en cliquant sur une catégorie ou un flux, une "popup" s'ouvre
nous proposant les flux à lire directement. Les mêmes actions que la vue
normale sont alors possibles

Cela a impliqué de gros changements javascript en aval puisque les
articles n'étaient plus repérés en fonction de la fenêtre, mais en
fonction du popup (#panel)

Le code va vraiment devoir être repris pour avoir une architecture
logique (voir issue #121)

2 files changed, 59 insertions, 0 deletions

diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 107318dde..89212ab1e 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -389,6 +389,30 @@
 			margin: 0;
 		}
 
+#panel {
+	display: none;
+	position: fixed;
+	top: 10px; bottom: 10px;
+	left: 100px; right: 100px;
+	overflow: auto;
+	background: #fff;
+	border: 1px solid #95a5a6;
+	border-radius: 5px;
+}
+	#panel .close {
+		position: absolute;
+		top: 10px; right: 0;
+		display: inline-block;
+		width: 26px;
+		height: 26px;
+		margin: 0 10px 0 0;
+		border: 1px solid #ccc;
+		border-radius: 20px;
+		text-align: center;
+		line-height: 26px;
+		background: #fff;
+	}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;
@@ -614,4 +638,8 @@
 	.nav_entries {
 		width: 100%;
 	}
+
+	#panel {
+		left: 5px; right: 5px;
+	}
 }
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index 193fa3d6f..a9fd22230 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -283,6 +283,7 @@ body {
 				}
 
 #stream.reader .flux {
+	position: relative;
 	padding: 0 0 30px;
 	border: none;
 	background: #ecf0f1;
@@ -385,6 +386,32 @@ body {
 			margin: 0;
 		}
 
+#panel {
+	display: none;
+	position: fixed;
+	top: 10px; bottom: 10px;
+	left: 100px; right: 100px;
+	overflow: auto;
+	background: #fff;
+	border: 1px solid #95a5a6;
+	border-radius: 5px;
+}
+	#panel .close {
+		position: absolute;
+		top: 10px; right: 0px;
+		display: inline-block;
+		width: 26px;
+		height: 26px;
+		margin: 0 10px 0 0;
+		border-radius: 3px;
+		text-align: center;
+		line-height: 24px;
+		background: #95a5a6;
+	}
+		#panel .close:hover {
+			background: #7f8c8d;
+		}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;
@@ -633,4 +660,8 @@ body {
 	.nav_menu .stick .btn {
 		margin: 10px 0;
 	}
+
+	#panel {
+		left: 5px; right: 5px;
+	}
 }