mirror of
https://github.com/friendica/friendica
synced 2024-12-23 00:00:21 +00:00
Merge pull request #14343 from loma-one/2024.06-rc
Usability improvements trending_tags.tpl & CSS instructions for formatting in the notification.tpl
This commit is contained in:
commit
776f413783
3 changed files with 76 additions and 16 deletions
|
@ -789,3 +789,21 @@ summary.wall-item-summary {
|
|||
font-style: oblique;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,9 @@
|
|||
|
||||
<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">
|
||||
<link rel="stylesheet" href="view/global.css">
|
||||
<span class="notif-text">{{$notification.text}}</span>
|
||||
<span class="notif-when">{{$notification.ago}}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -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}}
|
||||
{{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();
|
||||
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';
|
||||
} else {
|
||||
moreTags.style.display = 'none';
|
||||
linkText.textContent = 'Show More';
|
||||
link.setAttribute('aria-expanded', 'false');
|
||||
caretIcon.className = 'fa fa-caret-right';
|
||||
}
|
||||
}
|
||||
|
||||
initWidget('trending-tags-sidebar', 'trending-tags-sidebar-inflated');
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue