Improved: dropdown close area (#4293)

* fix Ansum theme: close X in white

* fix Mapco theme: close X in white

* move the dropdown-close outside of the list

* CSS

* bring flux elemt behind the grey background

* Update main.js

app/layout/aside_feed.phtml

@@ -122,18 +122,17 @@
 
 <script id="tag_config_template" type="text/html">
 	<ul class="dropdown-menu">
-		<li class="dropdown-close"><a href="#close">❌</a></li>
 		<li class="item">
 			<button class="as-link confirm" disabled="disabled"
 				form="mark-read-aside" formaction="<?= _url('tag', 'delete', 'id_tag', '------') ?>"
 				type="submit"><?= _t('gen.action.remove') ?></button>
 		</li>
 	</ul>
+	<a class="dropdown-close" href="#close">❌</a>
 </script>
 
 <script id="feed_config_template" type="text/html">
 	<ul class="dropdown-menu">
-		<li class="dropdown-close"><a href="#close">❌</a></li>
 		<li class="item"><a href="<?= _url('index', $actual_view, 'get', 'f_------') ?>"><?= _t('gen.action.filter') ?></a></li>
 		<?php if (FreshRSS_Auth::hasAccess()) { ?>
 		<li class="item"><a href="<?= _url('stats', 'repartition', 'id', '------') ?>"><?= _t('index.menu.stats') ?></a></li>
@@ -160,4 +159,5 @@
 		</li>
 		<?php } ?>
 	</ul>
+	<a class="dropdown-close" href="#close">❌</a>
 </script>

app/layout/header.phtml

@@ -40,7 +40,7 @@
 			<a class="btn dropdown-toggle" href="#dropdown-configure"><?= _i('configure') ?></a>
 			<ul class="dropdown-menu scrollbar-thin">
 				<li class="dropdown-header-close"><a class="toggle_aside" href="#close"><?= _i('close') ?></a></li>
-				<li class="dropdown-close"><a href="#close">❌</a></li>
+				
 				<li class="dropdown-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?></li>
 				<li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li>
 				<?php if (FreshRSS_Auth::accessNeedsAction()): ?>
@@ -77,6 +77,7 @@
 				<li class="item"><a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a></li>
 				<?= Minz_ExtensionManager::callHook('menu_other_entry') ?>
 			</ul>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 	</nav>
 	<?php } elseif (FreshRSS_Auth::accessNeedsAction()) { ?>

app/layout/nav_menu.phtml

@@ -34,8 +34,6 @@
 
 			<a class="dropdown-toggle btn" href="#dropdown-query" title="<?= _t('index.menu.queries') ?>"><?= _i('bookmark-tag') ?></a>
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close">❌</a></li>
-
 				<li class="dropdown-header">
 					<?= _t('index.menu.queries') ?>
 					<a href="<?= _url('configure', 'queries') ?>"><?= _i('configure') ?></a>
@@ -58,6 +56,7 @@
 				?>
 				<li class="item"><a href="<?= Minz_Url::display($url_query) ?>"><?= _i('bookmark-add') ?> <?= _t('index.menu.bookmark_query') ?></a></li>
 			</ul>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 	</div>
 
@@ -102,8 +101,6 @@
 
 			<a class="dropdown-toggle btn" href="#dropdown-read"><?= _i('down') ?></a>
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close">❌</a></li>
-
 				<li class="item">
 					<button class="as-link <?= $confirm ?>"
 						form="mark-read-menu"
@@ -139,6 +136,7 @@
 						type="submit"><?= $string_unmark ?></button>
 				</li>
 			</ul>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 		</form>
 	</div>

app/views/helpers/index/normal/entry_bottom.phtml

@@ -45,10 +45,9 @@
 				echo _t('index.menu.tags');
 			?></a>
 			<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
-				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<!-- Ajax -->
 			</ul>
-			<div class="dropdown-close"><a href="#close">❌</a></div>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 	</li><?php
 	}
@@ -62,11 +61,12 @@
 				echo _t('index.tag.related');
 			?></a>
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close">❌</a></li><?php
+				<?php
 				foreach ($tags as $tag) {
 					?><li class="item"><a href="<?= _url('index', 'index', 'search', '#' . str_replace(' ', '+', htmlspecialchars_decode($tag, ENT_QUOTES))) ?>"><?= $tag ?></a></li><?php
 				} ?>
 			</ul>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 	</li><?php
 	}
@@ -80,7 +80,6 @@
 			</a>
 
 			<ul class="dropdown-menu">
-				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<li class="dropdown-header"><?= _t('index.share') ?> <a href="<?= _url('configure', 'integration') ?>"><?= _i('configure') ?></a></li><?php
 					$id = $this->entry->id();
 					$link = $this->entry->link();
@@ -112,6 +111,7 @@
 				</li><?php
 					}
 			?></ul>
+			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 		<?php } ?>
 	</li><?php

p/scripts/main.js

@@ -692,7 +692,7 @@ function auto_share(key) {
 	key = parseInt(key);
 	if (key <= shares.length) {
 		shares[key - 1].click();
-		share.parentElement.querySelector('.dropdown-menu .dropdown-close a').click();
+		share.parentElement.querySelector('.dropdown-menu + a.dropdown-close').click();
 	}
 }
 

p/themes/Ansum/_mobile.scss

@@ -68,6 +68,10 @@
 		height: 50px;
 		line-height: 50px;
 		text-align: center;
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
 	}
 
 	.header {

p/themes/Ansum/ansum.css

@@ -1442,6 +1442,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;

p/themes/Ansum/ansum.rtl.css

@@ -1442,6 +1442,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;

p/themes/Mapco/_mobile.scss

@@ -67,6 +67,10 @@
 		height: 50px;
 		line-height: 50px;
 		text-align: center;
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
 	}
 
 	.header {

p/themes/Mapco/mapco.css

@@ -1427,6 +1427,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;

p/themes/Mapco/mapco.rtl.css

@@ -1427,6 +1427,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;

p/themes/base-theme/template.css

@@ -561,32 +561,18 @@ input[type="checkbox"]:focus-visible {
 	z-index: 1000;
 }
 
-.dropdown-close {
-	display: inline;
+.dropdown-menu + .dropdown-close {
+	display: none;
 }
 
-.dropdown-close a {
+.dropdown-target:target ~ .dropdown-close {
 	display: block;
 	font-size: 0;
 	position: fixed;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
-	z-index: -11;
-	cursor: default;
-}
-
-.dropdown div.dropdown-close {
-	display: none;
-}
-
-.dropdown-target:target ~ div.dropdown-close {
-	display: block;
 	z-index: 999;
-	position: relative;
-}
-
-.dropdown-menu-scrollable .dropdown-close {
-	display: none;
+	cursor: default;
 }
 
 .separator {
@@ -993,7 +979,7 @@ input[type="search"] {
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;
-	position: relative;
+	position: static;
 }
 
 .flux .item {
@@ -1795,7 +1781,8 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside {
+	.aside:target + .close-aside,
+	.configure .dropdown-target:target ~ .dropdown-close {
 		background: rgba(0, 0, 0, 0.2);
 		display: block;
 		font-size: 0;
@@ -1804,7 +1791,7 @@ input:checked + .slide-container .properties {
 		bottom: 0;
 		left: 0;
 		right: 0;
-		cursor: pointer;
+		cursor: default;
 		z-index: 99;
 	}
 

p/themes/base-theme/template.rtl.css

@@ -561,32 +561,18 @@ input[type="checkbox"]:focus-visible {
 	z-index: 1000;
 }
 
-.dropdown-close {
-	display: inline;
+.dropdown-menu + .dropdown-close {
+	display: none;
 }
 
-.dropdown-close a {
+.dropdown-target:target ~ .dropdown-close {
 	display: block;
 	font-size: 0;
 	position: fixed;
 	top: 0; bottom: 0;
 	right: 0; left: 0;
-	z-index: -11;
-	cursor: default;
-}
-
-.dropdown div.dropdown-close {
-	display: none;
-}
-
-.dropdown-target:target ~ div.dropdown-close {
-	display: block;
 	z-index: 999;
-	position: relative;
-}
-
-.dropdown-menu-scrollable .dropdown-close {
-	display: none;
+	cursor: default;
 }
 
 .separator {
@@ -993,7 +979,7 @@ input[type="search"] {
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;
-	position: relative;
+	position: static;
 }
 
 .flux .item {
@@ -1795,7 +1781,8 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside {
+	.aside:target + .close-aside,
+	.configure .dropdown-target:target ~ .dropdown-close {
 		background: rgba(0, 0, 0, 0.2);
 		display: block;
 		font-size: 0;
@@ -1804,7 +1791,7 @@ input:checked + .slide-container .properties {
 		bottom: 0;
 		right: 0;
 		left: 0;
-		cursor: pointer;
+		cursor: default;
 		z-index: 99;
 	}