Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-11-09 16:22:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

CSS instructions for formatting in the notification.tpl

Browse source 
A space has been inserted between the user icon and the outlined text. Texts are wrapped after 70 characters.
This commit is contained in:
loma-one 2024-08-07 12:43:00 +02:00 committed by GitHub
parent 66f4c70bfe
commit 2083fca753
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
view/templates/notifications/notification.tpl
View file

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