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 1/9] 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>

From f8be6f805711de28ac43dda7a6c0ae84f229a390 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:22:39 +0200
Subject: [PATCH 2/9] CSS instructions for formatting in the notification.tpl

A space has been inserted between the user icon and the outlined text. Texts are wrapped after 70 characters.
---
 view/templates/notifications/notification.tpl | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/view/templates/notifications/notification.tpl b/view/templates/notifications/notification.tpl
index dcee492baa..5ebf3c2d10 100644
--- a/view/templates/notifications/notification.tpl
+++ b/view/templates/notifications/notification.tpl
@@ -1,4 +1,29 @@
 
+<style>
+	/* Flexbox layout to align the icon and text in a single line */
+	.notif-item a {
+		display: flex;
+		align-items: flex-start; /* Aligns items at the start of the flex container */
+	}
+
+	/* Margin to create space between the icon and the text */
+	.notif-image {
+		margin-right: 10px; /* Adjust the space between the icon and text as needed */
+
+		}
+
+	/* Styles to ensure the text wraps properly after 70 characters */
+	.notif-text {
+		display: inline-block; /* Allows the text to be constrained within a block-level element */
+		max-width: 70ch; /* Limits the maximum width of the text to 70 characters */
+		overflow-wrap: break-word; /* Ensures that words will break if necessary to fit the width */
+	}
+</style>
+
 <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
-	<a href="{{$notification.link}}"><img src="{{$notification.image}}" aria-hidden="true" class="notif-image">{{$notification.text}} <span class="notif-when">{{$notification.ago}}</span></a>
+	<a href="{{$notification.link}}">
+		<img src="{{$notification.image}}" aria-hidden="true" class="notif-image">
+		<span class="notif-text">{{$notification.text}}</span>
+		<span class="notif-when">{{$notification.ago}}</span>
+	</a>
 </div>

From e16ee01b4c037074e0a4f38abd13d3abf1d09690 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:27:24 +0200
Subject: [PATCH 3/9] Revert "CSS instructions for formatting in the
 notification.tpl"

---
 view/templates/notifications/notification.tpl | 27 +------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/view/templates/notifications/notification.tpl b/view/templates/notifications/notification.tpl
index 5ebf3c2d10..dcee492baa 100644
--- a/view/templates/notifications/notification.tpl
+++ b/view/templates/notifications/notification.tpl
@@ -1,29 +1,4 @@
 
-<style>
-	/* Flexbox layout to align the icon and text in a single line */
-	.notif-item a {
-		display: flex;
-		align-items: flex-start; /* Aligns items at the start of the flex container */
-	}
-
-	/* Margin to create space between the icon and the text */
-	.notif-image {
-		margin-right: 10px; /* Adjust the space between the icon and text as needed */
-
-		}
-
-	/* Styles to ensure the text wraps properly after 70 characters */
-	.notif-text {
-		display: inline-block; /* Allows the text to be constrained within a block-level element */
-		max-width: 70ch; /* Limits the maximum width of the text to 70 characters */
-		overflow-wrap: break-word; /* Ensures that words will break if necessary to fit the width */
-	}
-</style>
-
 <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
-	<a href="{{$notification.link}}">
-		<img src="{{$notification.image}}" aria-hidden="true" class="notif-image">
-		<span class="notif-text">{{$notification.text}}</span>
-		<span class="notif-when">{{$notification.ago}}</span>
-	</a>
+	<a href="{{$notification.link}}"><img src="{{$notification.image}}" aria-hidden="true" class="notif-image">{{$notification.text}} <span class="notif-when">{{$notification.ago}}</span></a>
 </div>

From 2083fca7536c60310a20e73b0cc072a2cf07621a Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:43:00 +0200
Subject: [PATCH 4/9]  CSS instructions for formatting in the notification.tpl

A space has been inserted between the user icon and the outlined text. Texts are wrapped after 70 characters.
---
 view/templates/notifications/notification.tpl | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/view/templates/notifications/notification.tpl b/view/templates/notifications/notification.tpl
index dcee492baa..5ebf3c2d10 100644
--- a/view/templates/notifications/notification.tpl
+++ b/view/templates/notifications/notification.tpl
@@ -1,4 +1,29 @@
 
+<style>
+	/* Flexbox layout to align the icon and text in a single line */
+	.notif-item a {
+		display: flex;
+		align-items: flex-start; /* Aligns items at the start of the flex container */
+	}
+
+	/* Margin to create space between the icon and the text */
+	.notif-image {
+		margin-right: 10px; /* Adjust the space between the icon and text as needed */
+
+		}
+
+	/* Styles to ensure the text wraps properly after 70 characters */
+	.notif-text {
+		display: inline-block; /* Allows the text to be constrained within a block-level element */
+		max-width: 70ch; /* Limits the maximum width of the text to 70 characters */
+		overflow-wrap: break-word; /* Ensures that words will break if necessary to fit the width */
+	}
+</style>
+
 <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
-	<a href="{{$notification.link}}"><img src="{{$notification.image}}" aria-hidden="true" class="notif-image">{{$notification.text}} <span class="notif-when">{{$notification.ago}}</span></a>
+	<a href="{{$notification.link}}">
+		<img src="{{$notification.image}}" aria-hidden="true" class="notif-image">
+		<span class="notif-text">{{$notification.text}}</span>
+		<span class="notif-when">{{$notification.ago}}</span>
+	</a>
 </div>

From 5e2687e7ea0a6c050d79a7eee5c53535ef97b1f3 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:28:47 +0200
Subject: [PATCH 5/9] css instructions notification.tpl global.css

---
 view/global.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/view/global.css b/view/global.css
index 1dfbf18920..461ccca08a 100644
--- a/view/global.css
+++ b/view/global.css
@@ -788,4 +788,22 @@ summary.wall-item-summary {
 	font-weight: bold;
 	font-style: oblique;
   padding-bottom: 5px;
-}
\ No newline at end of file
+}
+
+/* css instructions notification.tpl */
+/* Flexbox layout to align the icon and text in a single line */
+.notif-item a {
+    display: flex;
+    align-items: flex-start;
+}
+
+/* Margin to create space between the icon and the text */
+.notif-image {
+    margin-right: 10px;
+
+/* Styles to ensure the text wraps properly after 70 characters */
+.notif-text {
+    display: inline-block;
+    max-width: 70ch;
+    overflow-wrap: break-word;
+}

From 5cc3b1f2f5f636fae23954cf91597c748ced6ecc Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:57:13 +0200
Subject: [PATCH 6/9] Template and css separated

---
 view/templates/notifications/notification.tpl | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/view/templates/notifications/notification.tpl b/view/templates/notifications/notification.tpl
index 5ebf3c2d10..edd57ae0e0 100644
--- a/view/templates/notifications/notification.tpl
+++ b/view/templates/notifications/notification.tpl
@@ -1,28 +1,8 @@
 
-<style>
-	/* Flexbox layout to align the icon and text in a single line */
-	.notif-item a {
-		display: flex;
-		align-items: flex-start; /* Aligns items at the start of the flex container */
-	}
-
-	/* Margin to create space between the icon and the text */
-	.notif-image {
-		margin-right: 10px; /* Adjust the space between the icon and text as needed */
-
-		}
-
-	/* Styles to ensure the text wraps properly after 70 characters */
-	.notif-text {
-		display: inline-block; /* Allows the text to be constrained within a block-level element */
-		max-width: 70ch; /* Limits the maximum width of the text to 70 characters */
-		overflow-wrap: break-word; /* Ensures that words will break if necessary to fit the width */
-	}
-</style>
-
 <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
 	<a href="{{$notification.link}}">
 		<img src="{{$notification.image}}" aria-hidden="true" class="notif-image">
+		<link rel="stylesheet" href="view/global.css">
 		<span class="notif-text">{{$notification.text}}</span>
 		<span class="notif-when">{{$notification.ago}}</span>
 	</a>

From 14fa0528cd3def810a6b1ff97611d8a9e460a276 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:26:09 +0200
Subject: [PATCH 7/9] Correction tab global.css

---
 view/global.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/view/global.css b/view/global.css
index 461ccca08a..361a73585e 100644
--- a/view/global.css
+++ b/view/global.css
@@ -793,17 +793,17 @@ summary.wall-item-summary {
 /* css instructions notification.tpl */
 /* Flexbox layout to align the icon and text in a single line */
 .notif-item a {
-    display: flex;
-    align-items: flex-start;
+    	display: flex;
+    	align-items: flex-start;
 }
 
 /* Margin to create space between the icon and the text */
 .notif-image {
-    margin-right: 10px;
+    	margin-right: 10px;
 
 /* Styles to ensure the text wraps properly after 70 characters */
 .notif-text {
-    display: inline-block;
-    max-width: 70ch;
-    overflow-wrap: break-word;
+    	display: inline-block;
+    	max-width: 70ch;
+    	overflow-wrap: break-word;
 }

From 4f877ad6b6aaa9892a1aa32bf46119d5ca3ac0b7 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Thu, 8 Aug 2024 06:09:41 +0200
Subject: [PATCH 8/9] Comments in English trending_tags.tpl

---
 view/templates/widget/trending_tags.tpl | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/view/templates/widget/trending_tags.tpl b/view/templates/widget/trending_tags.tpl
index 428646071d..5cf83e6d2e 100644
--- a/view/templates/widget/trending_tags.tpl
+++ b/view/templates/widget/trending_tags.tpl
@@ -40,7 +40,7 @@
 
 <script>
 function toggleTags(event) {
-	event.preventDefault(); // Verhindert, dass der Link die Seite neu lädt
+	event.preventDefault(); // Prevents the link from reloading the page
 	var moreTags = document.getElementById('more-tags');
 	var link = event.target.closest('a');
 	var caretIcon = document.getElementById('caret-icon');
@@ -50,12 +50,12 @@ function toggleTags(event) {
 		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"
+		caretIcon.className = 'fa fa-caret-down'; // Changes the icon to "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"
+		caretIcon.className = 'fa fa-caret-right'; // Changes the icon to "Caret Down"
 	}
 }
 

From 6b7561e8f7ddc1e717f2beb693d48db01cd56b86 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Thu, 8 Aug 2024 06:27:31 +0200
Subject: [PATCH 9/9] Remove comments as they are not relevant
 trending_tags.tpl

---
 view/templates/widget/trending_tags.tpl | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/view/templates/widget/trending_tags.tpl b/view/templates/widget/trending_tags.tpl
index 5cf83e6d2e..75ceaf9267 100644
--- a/view/templates/widget/trending_tags.tpl
+++ b/view/templates/widget/trending_tags.tpl
@@ -40,7 +40,7 @@
 
 <script>
 function toggleTags(event) {
-	event.preventDefault(); // Prevents the link from reloading the page
+	event.preventDefault();
 	var moreTags = document.getElementById('more-tags');
 	var link = event.target.closest('a');
 	var caretIcon = document.getElementById('caret-icon');
@@ -50,12 +50,12 @@ function toggleTags(event) {
 		moreTags.style.display = 'block';
 		linkText.textContent = 'Show Less';
 		link.setAttribute('aria-expanded', 'true');
-		caretIcon.className = 'fa fa-caret-down'; // Changes the icon to "Caret Down"
+		caretIcon.className = 'fa fa-caret-down';
 	} else {
 		moreTags.style.display = 'none';
 		linkText.textContent = 'Show More';
 		link.setAttribute('aria-expanded', 'false');
-		caretIcon.className = 'fa fa-caret-right'; // Changes the icon to "Caret Down"
+		caretIcon.className = 'fa fa-caret-right';
 	}
 }