From 7695f08e7b8b72bc5b78d22f857742a1a6b85d43 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Sun, 4 Aug 2024 12:33:56 +0200
Subject: [PATCH] Usability improvements trending_tags.tpl

The tranding tags don't look very nice. The changes are intended to make them more attractive.

 - For this purpose, each tag is preceded by a "fa fa-hashtag".
 - The # in front of the word has been removed
 - Clicking on a hashtag searches with a hashtag as usual.
 - Other tags were previously displayed indented
 - Now it is ensured that all hashtags are in one line

This is a suggestion that can be discarded at any time. I would still be happy if the changes could be adopted.
---
 view/templates/widget/trending_tags.tpl | 65 +++++++++++++++++++------
 1 file changed, 51 insertions(+), 14 deletions(-)

diff --git a/view/templates/widget/trending_tags.tpl b/view/templates/widget/trending_tags.tpl
index 31e22532a0..428646071d 100644
--- a/view/templates/widget/trending_tags.tpl
+++ b/view/templates/widget/trending_tags.tpl
@@ -5,22 +5,59 @@
 	<span class="fakelink" onclick="openCloseWidget('trending-tags-sidebar', 'trending-tags-sidebar-inflated');">
 		<h3>{{$title}}</h3>
 	</span>
-	<ul>
-{{section name=ol loop=$tags max=10}}
-		<li><a href="search?tag={{$tags[ol].term}}">#{{$tags[ol].term}}</a></li>
-{{/section}}
-	</ul>
-{{if $tags|count > 10}}
-	<details>
-		<summary>{{$more}}</summary>
-		<ul>
-	{{section name=ul loop=$tags start=10}}
-			<li><a href="search?tag={{$tags[ul].term}}">#{{$tags[ul].term}}</a></li>
+	<ul id="tags-list" style="list-style-type: none; padding: 0; margin: 0;">
+	{{section name=ol loop=$tags max=10}}
+		<li style="margin-bottom: 5px;">
+			<a href="search?tag={{$tags[ol].term}}" style="text-decoration: none; color: inherit;">
+				<i class="fa fa-hashtag" aria-hidden="true"></i> {{$tags[ol].term}}
+			</a>
+		</li>
 	{{/section}}
-		</ul>
-	</details>
-{{/if}}
+	</ul>
+	{{if $tags|count > 10}}
+	<div style="text-align: left; margin-top: 10px;">
+		<a href="#"
+			onclick="toggleTags(event)"
+			role="button"
+			aria-expanded="false"
+			aria-controls="more-tags"
+			style="text-decoration: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; font-weight: bold;">
+			<i id="caret-icon" class="fa fa-caret-right" aria-hidden="true" style="margin-right: 5px;"></i>
+			<span id="link-text">Show More</span>
+		</a>
+	</div>
+	<ul id="more-tags" style="display:none; list-style-type: none; padding: 0; margin: 0;">
+		{{section name=ul loop=$tags start=10}}
+			<li style="margin-bottom: 5px;">
+				<a href="search?tag={{$tags[ul].term}}" style="text-decoration: none; color: inherit;">
+					<i class="fa fa-hashtag" aria-hidden="true"></i> {{$tags[ul].term}}
+				</a>
+			</li>
+		{{/section}}
+	</ul>
+	{{/if}}
 </div>
+
 <script>
+function toggleTags(event) {
+	event.preventDefault(); // Verhindert, dass der Link die Seite neu lädt
+	var moreTags = document.getElementById('more-tags');
+	var link = event.target.closest('a');
+	var caretIcon = document.getElementById('caret-icon');
+	var linkText = document.getElementById('link-text');
+
+	if (moreTags.style.display === 'none') {
+		moreTags.style.display = 'block';
+		linkText.textContent = 'Show Less';
+		link.setAttribute('aria-expanded', 'true');
+		caretIcon.className = 'fa fa-caret-down'; // Ändert das Icon auf "Caret Down"
+	} else {
+		moreTags.style.display = 'none';
+		linkText.textContent = 'Show More';
+		link.setAttribute('aria-expanded', 'false');
+		caretIcon.className = 'fa fa-caret-right'; // Ändert das Icon auf "Caret Right"
+	}
+}
+
 initWidget('trending-tags-sidebar', 'trending-tags-sidebar-inflated');
 </script>