Last fix for Origine (I hope!)

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

3 files changed, 40 insertions, 49 deletions

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index d7b12426b..47b63f187 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -54,13 +54,12 @@
 						$f_active = FreshRSS_Context::isCurrentGet('f_' . $feed->id());
 				?>
 				<li id="f_<?php echo $feed->id(); ?>" class="item<?php echo $f_active ? ' active' : ''; ?><?php echo $feed->inError() ? ' error' : ''; ?><?php echo $feed->nbEntries() <= 0 ? ' empty' : ''; ?>" data-unread="<?php echo $feed->nbNotRead(); ?>" data-priority="<?php echo $feed->priority(); ?>">
-					<div class="dropdown">
+					<div class="dropdown no-mobile">
 						<div class="dropdown-target"></div>
 						<a class="dropdown-toggle" data-fweb="<?php echo $feed->website(); ?>"><?php echo _i('configure'); ?></a>
 						<?php /* feed_config_template */ ?>
 					</div>
-					<img class="favicon" src="<?php echo $feed->favicon(); ?>" alt="✇" />
-					<a data-unread="<?php echo format_number($feed->nbNotRead()); ?>" href="<?php echo _url('index', 'index', 'get', 'f_' . $feed->id()); ?>"><?php echo $feed->name(); ?></a>
+					<a data-unread="<?php echo format_number($feed->nbNotRead()); ?>" href="<?php echo _url('index', 'index', 'get', 'f_' . $feed->id()); ?>"><img class="favicon" src="<?php echo $feed->favicon(); ?>" alt="✇" /> <?php echo $feed->name(); ?></a>
 				</li>
 				<?php } ?>
 			</ul>
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 004d31f0f..7292379c0 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -503,11 +503,26 @@ a.btn {
 	margin: 10px 0;
 }
 .tree-folder-title {
+	position: relative;
 	padding: 0 10px;
+	background: #fff;
 	line-height: 2.5rem;
 	font-size: 1rem;
 	font-weight: bold;
 }
+.tree-folder-title .title {
+	background: inherit;
+	color: #444;
+}
+.tree-folder-title .title:hover {
+	text-decoration: none;
+}
+.tree-folder.active .tree-folder-title {
+	background: #f0f0f0;
+}
+.tree-folder.active .tree-folder-title .title {
+	color: #0062BE;
+}
 .tree-folder-items {
 	border-top: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
@@ -518,6 +533,15 @@ a.btn {
 	line-height: 2.5rem;
 	font-size: 0.8rem;
 }
+.tree-folder-items > .item.active {
+	background: #0062be;
+}
+.tree-folder-items > .item > a {
+	text-decoration: none;
+}
+.tree-folder-items > .item.active > a {
+	color: #fff;
+}
 
 /*=== STRUCTURE */
 /*===============*/
@@ -561,22 +585,12 @@ a.btn {
 	padding: 10px 0 50px;
 	text-align: center;
 }
-
-/*=== Aside main page (categories) */
 .aside.aside_feed .tree {
-	text-align: left;
-}
-.aside_feed .tree-folder-title {
-	position: relative;
-	background: #fff;
-}
-.aside_feed .tree-folder-title .title {
-	background: inherit;
-	color: #444;
-}
-.aside_feed .tree-folder-title .title:hover {
-	text-decoration: none;
+	position: sticky;
+	top: 0;
 }
+
+/*=== Aside main page (categories) */
 .aside_feed .tree-folder-title > .title:not([data-unread="0"]):after {
 	position: absolute;
 	right: 0;
@@ -587,39 +601,24 @@ a.btn {
 	background: inherit;
 	border-left: 1px solid #aaa;
 }
-.aside_feed .tree-folder.active .tree-folder-title {
-	background: #f0f0f0;
-}
-.aside_feed .tree-folder.active .tree-folder-title .title {
-	color: #0062BE;
-}
 
 /*=== Aside main page (feeds) */
-.aside_feed .tree-folder-items .item.active {
-	background: #0062BE;
-}
-.aside_feed .tree-folder-items .item.empty.active {
+.aside_feed .tree-folder-items > .item.empty.active {
 	background: #e67e22;
 }
-.aside_feed .tree-folder-items .item.error.active {
-	background: #BD362F;
+.aside_feed .tree-folder-items > .item.error.active {
+	background: #bd362f;
 }
-.aside_feed .tree-folder-items .item.empty > a {
+.aside_feed .tree-folder-items > .item.empty > a {
 	color: #e67e22;
 }
-.aside_feed .tree-folder-items .item.error > a {
-	color: #BD362F;
+.aside_feed .tree-folder-items > .item.error > a {
+	color: #bd362f;
 }
-.aside_feed .tree-folder-items .item.active > a,
-.aside_feed .tree-folder-items .item.empty.active > a,
-.aside_feed .tree-folder-items .item.error.active > a {
+.aside_feed .tree-folder-items > .item.empty.active > a,
+.aside_feed .tree-folder-items > .item.error.active > a {
 	color: #fff;
 }
-.aside_feed .tree-folder-items > .item > a {
-	line-height: 3em;
-	text-align: left;
-	text-decoration: none;
-}
 .aside_feed .tree-folder-items > .item:not([data-unread="0"]) {
 	font-weight: bold;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index bcafd162c..5a07426ea 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -330,6 +330,7 @@ a.btn {
 	margin: 0;
 	padding: 0;
 	list-style: none;
+	text-align: left;
 }
 .tree-folder-items {
 	padding: 0;
@@ -351,7 +352,7 @@ a.btn {
 .tree-folder-items > .item > a {
 	display: inline-block;
 	vertical-align: middle;
-	width: calc(100% - 32px);
+	width: calc(100% - 16px);
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -717,7 +718,6 @@ br + br + br {
 @media(max-width: 840px) {
 	.header,
 	.aside .btn-important,
-	.aside .feeds .dropdown,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -746,9 +746,6 @@ br + br + br {
 		width: 90%;
 		overflow: auto;
 	}
-	.aside .categories {
-		margin: 10px 0 75px;
-	}
 
 	.flux_header .item.website {
 		width: 40px;
@@ -770,10 +767,6 @@ br + br + br {
 		width: 100%;
 	}
 
-	#stream.global .box-category {
-		margin: 10px 0;
-	}
-
 	#panel {
 		top: 0; bottom: 0;
 		left: 0; right: 0;