Improve: Aside slider: close slider when click on the outside of slider (#4061)

* CSS + PHTML

* give some grey background

* fixed whitespace

* fixed RTL

* close area just for mobile view

5 files changed, 39 insertions, 1 deletions

diff --git a/app/layout/aside_configure.phtml b/app/layout/aside_configure.phtml
index c790d0521..f71419dc1 100644
--- a/app/layout/aside_configure.phtml
+++ b/app/layout/aside_configure.phtml
@@ -1,5 +1,6 @@
 <nav class="nav nav-list aside" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
+	
 	<ul>
 		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>	
 		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
@@ -61,6 +62,7 @@
 		</li>
 	</ul>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 <nav class="nav_menu nav_mobile">
 	<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
 </nav>
diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index cb4b7b80e..63dc28bd1 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -14,7 +14,7 @@
 		$state_filter_cat = '&state=' . $state_filter_cat;
 	}
 ?>
-<nav class="aside aside_feed<?= $class ?>" id="aside_feed">
+<nav class="nav aside aside_feed<?= $class ?>" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 
 	<?php if (FreshRSS_Auth::hasAccess()) { ?>
@@ -116,6 +116,7 @@
 	</ul>
 	</form>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 
 <div id="first_load" class="loading"></div>
 <?php flush(); ?>
diff --git a/app/layout/aside_subscription.phtml b/app/layout/aside_subscription.phtml
index 842d8785b..aa7857f74 100644
--- a/app/layout/aside_subscription.phtml
+++ b/app/layout/aside_subscription.phtml
@@ -35,6 +35,7 @@
 
 	</ul>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 <nav class="nav_menu nav_mobile">
 	<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
 </nav>
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index d6c7f3337..5238ebbdb 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -664,6 +664,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside + .close-aside {
+	display: none;
+}
+
 /*=== Aside main page */
 .aside_feed .category .title {
 	width: calc(100% - 35px);
@@ -1431,6 +1435,19 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
+	.aside:target + .close-aside {
+		background: rgba(0, 0, 0, 0.2);
+		display: block;
+		font-size: 0;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		cursor: pointer;
+		z-index: 99;
+	}
+
 	.nav_mobile {
 		display: block;
 	}
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 9d2c4a6c6..6770a248c 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -664,6 +664,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside + .close-aside {
+	display: none;
+}
+
 /*=== Aside main page */
 .aside_feed .category .title {
 	width: calc(100% - 35px);
@@ -1431,6 +1435,19 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
+	.aside:target + .close-aside {
+		background: rgba(0, 0, 0, 0.2);
+		display: block;
+		font-size: 0;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		cursor: pointer;
+		z-index: 99;
+	}
+
 	.nav_mobile {
 		display: block;
 	}