Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2025-01-03 15:22:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Usability improvements trending_tags.tpl

Browse source 
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.
This commit is contained in:
loma-one 2024-08-04 12:33:56 +02:00 committed by GitHub
parent 89084c6b05
commit 7695f08e7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 51 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
view/templates/widget/trending_tags.tpl
View file

@ -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>