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.

diff --git a/view/templates/widget/trending_tags.tpl b/view/templates/widget/trending_tags.tpl
index 31e22532a0d1d141839fd61cc22f70a143016517..428646071d57ea5da55654289c1f06379d4c503f 100644 (file)
--- 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>