Fix some parts of aside_flux

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

3 files changed, 75 insertions, 39 deletions

diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index e572e9d48..30f362348 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -1,4 +1,13 @@
-<div class="aside aside-flux" id="aside-flux">
+<?php
+	$class = '';
+	if (FreshRSS_Context::$conf->hide_read_feeds &&
+			FreshRSS_Context::isStateEnabled(FreshRSS_Entry::STATE_NOT_READ) &&
+			!FreshRSS_Context::isStateEnabled(FreshRSS_Entry::STATE_READ)) {
+		$class = ' state_unread';
+	}
+?>
+
+<div class="aside aside_flux<?php echo $class; ?>" id="aside_flux">
 	<a class="toggle_aside" href="#close"><?php echo _i('close'); ?></a>
 
 	<?php if (FreshRSS_Auth::hasAccess()) { ?>
@@ -14,24 +23,36 @@
 
 	<ul class="tree">
 		<li class="tree-folder<?php echo FreshRSS_Context::isCurrentGet('a') ? ' active' : ''; ?>">
-			<a class="tree-folder-title" data-unread="<?php echo format_number(FreshRSS_Context::$total_unread); ?>" href="<?php echo _url('index', 'index'); ?>"><?php echo _i('all'), ' ', _t('main_stream'); ?></a>
+			<div class="tree-folder-title">
+				<?php echo _i('all'); ?> <a data-unread="<?php echo format_number(FreshRSS_Context::$total_unread); ?>" href="<?php echo _url('index', 'index'); ?>"><?php echo _t('main_stream'); ?></a>
+			</div>
 		</li>
 
 		<li class="tree-folder<?php echo FreshRSS_Context::isCurrentGet('s') ? ' active' : ''; ?>">
-			<a class="tree-folder-title" data-unread="<?php echo format_number(FreshRSS_Context::$total_starred['unread']); ?>" href="<?php echo _url('index', 'index', 'get', 's'); ?>"><?php echo _i('bookmark'), ' ', _t('favorite_feeds', format_number(FreshRSS_Context::$total_starred['all'])); ?></a>
+			<div class="tree-folder-title">
+				<?php echo _i('bookmark'); ?> <a data-unread="<?php echo format_number(FreshRSS_Context::$total_starred['unread']); ?>" href="<?php echo _url('index', 'index', 'get', 's'); ?>"><?php echo _t('favorite_feeds', format_number(FreshRSS_Context::$total_starred['all'])); ?></a>
+			</div>
 		</li>
 
 		<?php
 			foreach ($this->categories as $cat) {
 				$feeds = $cat->feeds();
 				if (!empty($feeds)) {
+					$c_active = FreshRSS_Context::isCurrentGet('c_' . $cat->id());
+					$c_show = $c_active && (!FreshRSS_Context::$conf->display_categories ||
+					                        FreshRSS_Context::$current_get['feed']);
 		?>
-		<li class="tree-folder<?php echo FreshRSS_Context::isCurrentGet('c_' . $cat->id()) ? ' active' : ''; ?>">
-			<a class="tree-folder-title" data-unread="<?php echo format_number($cat->nbNotRead()); ?>" href="<?php echo _url('index', 'index', 'get', 'c_' . $cat->id()); ?>"><?php echo _i('category'), ' ', $cat->name(); ?></a>
+		<li class="tree-folder<?php echo $c_active ? ' active' : ''; ?>" data-unread="<?php echo $cat->nbNotRead(); ?>">
+			<div class="tree-folder-title">
+				<?php echo _i('category'); ?> <a data-unread="<?php echo format_number($cat->nbNotRead()); ?>" href="<?php echo _url('index', 'index', 'get', 'c_' . $cat->id()); ?>"><?php echo $cat->name(); ?></a>
+			</div>
 
-			<ul class="items">
-				<?php foreach ($feeds as $feed) { ?>
-				<li class="item<?php echo FreshRSS_Context::isCurrentGet('f_' . $feed->id()) ? ' active' : ''; ?>">
+			<ul class="tree-folder-items<?php echo $c_show ? ' active' : ''; ?>">
+				<?php
+					foreach ($feeds as $feed) {
+						$f_active = FreshRSS_Context::isCurrentGet('f_' . $feed->id());
+				?>
+				<li class="item<?php echo $f_active ? ' active' : ''; ?><?php echo $feed->inError() ? ' error' : ''; ?><?php echo $feed->nbEntries() <= 0 ? ' empty' : ''; ?>" data-unread="<?php echo $feed->nbNotRead(); ?>">
 					<div class="dropdown">
 						<div class="dropdown-target"></div>
 						<a class="dropdown-toggle" data-fweb="<?php echo $feed->website(); ?>"><?php echo _i('configure'); ?></a>
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 3f6ae956d..3b79a0822 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -353,6 +353,22 @@ a.btn {
 	visibility: visible;
 }
 
+/*=== Tree */
+.tree {
+	margin: 10px 0;
+}
+.tree-folder-title {
+	padding: 0 10px;
+	line-height: 2.5rem;
+	font-size: 1.2rem;
+	font-weight: bold;
+}
+.tree-folder-items .item {
+	padding: 0 5px 0 20px;
+	line-height: 2.5rem;
+	font-size: 0.8rem;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 1a96f1e2f..1eb67c15d 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -325,6 +325,26 @@ a.btn {
 	cursor: grab;
 }
 
+/*=== Tree */
+.tree {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.tree-folder-title {
+	display: block;
+}
+.tree-folder-items {
+	padding: 0;
+	list-style: none;
+}
+.tree-folder-items .item {
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
@@ -371,52 +391,31 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.categories {
-	list-style: none;
-	margin: 0;
-}
-.state_unread li:not(.active)[data-unread="0"] {
+.aside_flux.state_unread .tree-folder:not(.active)[data-unread="0"],
+.aside_flux.state_unread .tree-folder .item:not(.active)[data-unread="0"] {
 	display: none;
 }
-.category {
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-.category .btn:not([data-unread="0"]):after {
+.aside_flux .tree-folder-title > a:not([data-unread="0"]):after {
 	content: attr(data-unread);
 }
 
 /*=== Aside main page (feeds) */
-.categories .feeds {
-	width: 100%;
-	list-style: none;
-}
-.categories .feeds:not(.active) {
+.aside_flux .tree-folder-items:not(.active) {
 	display: none;
 }
-.categories .feeds .feed {
-	display: inline-block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-}
-.categories .feeds .feed:not([data-unread="0"]):before {
+.aside_flux .tree-folder-items .item > a:not([data-unread="0"]):before {
 	content: "(" attr(data-unread) ") ";
 }
-.categories .feeds .dropdown-menu {
+.aside_flux .tree-folder-items .dropdown-menu {
 	left: 0;
 }
-.categories .feeds .item .dropdown-toggle > .icon {
+.aside_flux .tree-folder-items .item .dropdown-toggle > .icon {
 	visibility: hidden;
 	cursor: pointer;
-	vertical-align: top;
 }
-.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.categories .feeds .item:hover .dropdown-toggle > .icon,
-.categories .feeds .item.active .dropdown-toggle > .icon {
+.aside_flux .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_flux .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_flux .tree-folder-items .item.active .dropdown-toggle > .icon {
 	visibility: visible;
 }