Fixed: article footer dropdowns (my labels, article tags, sharing) (#6959)

* fix dropdown triangle in mobile view

* Nord theme

* mobile view: width improved. Each theme can decide about border-radius

* Ansum/Mapco theme

* fix pink dark theme: label icon in pink now too

* my labels: line breaks improved

* article tags: headline added

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

@@ -53,6 +53,7 @@
 				<?= _i('tag') ?><?= _t('index.tag.related') ?>
 			</a>
 			<ul class="dropdown-menu">
+				<li class="dropdown-header"><?= _t('index.tag.related') ?></li>
 				<?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

p/scripts/main.js

@@ -1455,7 +1455,7 @@ function loadDynamicTags(div) {
 					(context.anonymous ? '' : 'class="checkboxTag" ') +
 					'name="t_' + tag.id + '"type="checkbox" ' +
 					(context.anonymous ? 'disabled="disabled" ' : '') +
-					(tag.checked ? 'checked="checked" ' : '') + '/> ' + tag.name + '</label></li>';
+					(tag.checked ? 'checked="checked" ' : '') + '/>' + tag.name + '</label></li>';
 				datalist += '<option value="' + tag.name + '"></option>';
 			}
 			if (context.anonymous && nbLabelsChecked === 0) {

p/themes/Ansum/_components.scss

@@ -13,7 +13,7 @@
 .horizontal-list {
 	padding: 0.1rem 0;
 
-	.item {
+	& > .item {
 		&:first-child {
 			padding-left: 0.5rem;
 		}

p/themes/Ansum/_mobile.scss

@@ -115,10 +115,6 @@
 
 		~ a.dropdown-toggle {
 			&:not(.btn) {
-				~ .dropdown-menu {
-					margin-top: 0;
-				}
-
 				&::after {
 					bottom: -17px;
 				}

p/themes/Ansum/ansum.css

@@ -208,7 +208,7 @@ th {
 .horizontal-list {
 	padding: 0.1rem 0;
 }
-.horizontal-list .item:first-child {
+.horizontal-list > .item:first-child {
 	padding-left: 0.5rem;
 }
 
@@ -1282,9 +1282,6 @@ main.prompt {
 		right: 21px;
 		bottom: -14px;
 	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
-	}
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}

p/themes/Ansum/ansum.rtl.css

@@ -208,7 +208,7 @@ th {
 .horizontal-list {
 	padding: 0.1rem 0;
 }
-.horizontal-list .item:first-child {
+.horizontal-list > .item:first-child {
 	padding-right: 0.5rem;
 }
 
@@ -1282,9 +1282,6 @@ main.prompt {
 		left: 21px;
 		bottom: -14px;
 	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
-	}
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}

p/themes/Dark-pink/pinkdark.css

@@ -106,6 +106,7 @@ input:focus {
 .icon[src*="/all"],
 .icon[src*="/down"],
 .icon[src*="/help"],
+.icon[src*="/label"],
 .icon[src*="/link"],
 .icon[src*="/login"],
 .icon[src*="/logout"],

p/themes/Dark-pink/pinkdark.rtl.css

@@ -106,6 +106,7 @@ input:focus {
 .icon[src*="/all"],
 .icon[src*="/down"],
 .icon[src*="/help"],
+.icon[src*="/label"],
 .icon[src*="/link"],
 .icon[src*="/login"],
 .icon[src*="/logout"],

p/themes/Mapco/_components.scss

@@ -13,7 +13,7 @@
 .horizontal-list {
 	padding: 0.1rem 0;
 
-	.item {
+	& > .item {
 		&:first-child {
 			padding-left: 0.5rem;
 		}

p/themes/Mapco/_mobile.scss

@@ -122,10 +122,6 @@
 
 		~ a.dropdown-toggle {
 			&:not(.btn) {
-				~ .dropdown-menu {
-					margin-top: 0;
-				}
-
 				&::after {
 					bottom: -17px;
 				}

p/themes/Mapco/mapco.css

@@ -207,7 +207,7 @@ th {
 .horizontal-list {
 	padding: 0.1rem 0;
 }
-.horizontal-list .item:first-child {
+.horizontal-list > .item:first-child {
 	padding-left: 0.5rem;
 }
 
@@ -1302,9 +1302,6 @@ main.prompt {
 		right: 21px;
 		bottom: -14px;
 	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
-	}
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}

p/themes/Mapco/mapco.rtl.css

@@ -207,7 +207,7 @@ th {
 .horizontal-list {
 	padding: 0.1rem 0;
 }
-.horizontal-list .item:first-child {
+.horizontal-list > .item:first-child {
 	padding-right: 0.5rem;
 }
 
@@ -1302,9 +1302,6 @@ main.prompt {
 		left: 21px;
 		bottom: -14px;
 	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
-	}
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}

p/themes/Nord/nord.css

@@ -799,7 +799,7 @@ li.item.active {
 	padding: 0.25rem;
 }
 
-.flux .tags .icon {
+.flux .content .tags .icon {
 	padding: 0.25rem;
 }
 
@@ -1333,10 +1333,6 @@ optgroup::before {
 		margin: 0;
 	}
 
-	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 7px;
-	}
-
 	.dropdown .dropdown-menu {
 		border-radius: 6px;
 	}

p/themes/Nord/nord.rtl.css

@@ -799,7 +799,7 @@ li.item.active {
 	padding: 0.25rem;
 }
 
-.flux .tags .icon {
+.flux .content .tags .icon {
 	padding: 0.25rem;
 }
 
@@ -1333,10 +1333,6 @@ optgroup::before {
 		margin: 0;
 	}
 
-	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 7px;
-	}
-
 	.dropdown .dropdown-menu {
 		border-radius: 6px;
 	}

p/themes/base-theme/frss.css

@@ -355,13 +355,19 @@ input[type="checkbox"] {
 
 .dropdown-menu input[type="checkbox"] {
 	margin-left: 1em;
-	margin-right: .5em;
+	margin-right: 0.5rem;
+	width: 1rem;
 }
 
 .dropdown-menu .item .checkboxNewTag {
 	display: none;
 }
 
+.dropdown-menu .item label:not(.noHover):has(input[type="checkbox"]) {
+	padding-left: 2.5rem;
+	text-indent: -2.5rem;
+}
+
 .dropdown-menu .item.addItem {
 	padding: 0 0.5em;
 }
@@ -728,6 +734,11 @@ input[type="checkbox"]:focus-visible {
 	scroll-margin-bottom: 2rem;
 }
 
+.horizontal-list.bottom .dropdown-menu {
+	left: 0.5rem;
+	right: auto;
+}
+
 .dropdown-menu::after {
 	background-color: inherit;
 	width: 10px;
@@ -743,6 +754,11 @@ input[type="checkbox"]:focus-visible {
 	transform: rotate(45deg);
 }
 
+.horizontal-list.bottom .dropdown-menu::after {
+	left: 0.5rem;
+	right: auto;
+}
+
 .dropdown-menu-scrollable {
 	max-height: min(75vh, 50em);
 	overflow-x: hidden;
@@ -2421,10 +2437,8 @@ html.slider-active {
 	}
 
 	.dropdown .dropdown-menu {
-		width: 94%;
-		border-radius: 0;
-		left: 3%;
-		right: 3%;
+		left: 0.5rem !important;
+		right: 0.5rem !important;
 		position: absolute;
 	}
 
@@ -2472,6 +2486,11 @@ html.slider-active {
 		cursor: default;
 	}
 
+	.horizontal-list.bottom .dropdown-target:target ~ .dropdown-toggle::after {
+		top: 31px;
+		left: 10px;
+	}
+
 	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
 		margin-top: 10px;
 	}

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

@@ -355,13 +355,19 @@ input[type="checkbox"] {
 
 .dropdown-menu input[type="checkbox"] {
 	margin-right: 1em;
-	margin-left: .5em;
+	margin-left: 0.5rem;
+	width: 1rem;
 }
 
 .dropdown-menu .item .checkboxNewTag {
 	display: none;
 }
 
+.dropdown-menu .item label:not(.noHover):has(input[type="checkbox"]) {
+	padding-right: 2.5rem;
+	text-indent: -2.5rem;
+}
+
 .dropdown-menu .item.addItem {
 	padding: 0 0.5em;
 }
@@ -728,6 +734,11 @@ input[type="checkbox"]:focus-visible {
 	scroll-margin-bottom: 2rem;
 }
 
+.horizontal-list.bottom .dropdown-menu {
+	right: 0.5rem;
+	left: auto;
+}
+
 .dropdown-menu::after {
 	background-color: inherit;
 	width: 10px;
@@ -743,6 +754,11 @@ input[type="checkbox"]:focus-visible {
 	transform: rotate(-45deg);
 }
 
+.horizontal-list.bottom .dropdown-menu::after {
+	right: 0.5rem;
+	left: auto;
+}
+
 .dropdown-menu-scrollable {
 	max-height: min(75vh, 50em);
 	overflow-x: hidden;
@@ -2421,10 +2437,8 @@ html.slider-active {
 	}
 
 	.dropdown .dropdown-menu {
-		width: 94%;
-		border-radius: 0;
-		right: 3%;
-		left: 3%;
+		right: 0.5rem !important;
+		left: 0.5rem !important;
 		position: absolute;
 	}
 
@@ -2472,6 +2486,11 @@ html.slider-active {
 		cursor: default;
 	}
 
+	.horizontal-list.bottom .dropdown-target:target ~ .dropdown-toggle::after {
+		top: 31px;
+		right: 10px;
+	}
+
 	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
 		margin-top: 10px;
 	}