GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[CSS] .note-info text will automatically crop when no space is available, on hover will show contents

Browse Source
This commit is contained in:
Eliseu Amaro 2022-01-25 00:02:38 +00:00
parent ee04571f4d
commit e3bfb1ebc5
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
2 changed files with 74 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
public/assets/default_theme/css/pages/feeds.css
View File

@ -203,48 +203,6 @@
margin-top: var(--s);
}
.note-actions {
float: right;
}
.note-actions > li {
display: inline-block;
margin-left: 2px;
margin-right: 2px;
}
.note-actions-extra-details ul {
display: flex;
flex-direction: column;
}
.note-actions-extra-details hr {
margin: unset;
}
.note-actions-extra-details summary {
opacity: .33;
}
.note-actions-extra-details[open] > summary + * > li {
font-size: .937rem;
line-height: 2;
}
.note-actions-separator {
background: var(--foreground);
display: inline-block;
height: 1em;
margin-left: 2px;
margin-right: 2px;
opacity: .33;
width: 1px;
}
.note-actions-set {
opacity: 1 !important;
}
.note-attachments {
display: flex;
}
@ -265,21 +223,75 @@
margin-right: var(--s);
}
.note-author-fullname {
.note-info,
embed header {
border-bottom: unset;
border-radius: 0 var(--s) 0 0;
display: flex;
line-height: initial;
padding: 4px var(--s) 4px 0;
}
.note-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: var(--gradient-backwards);
}
.note-info-start {
flex: 1;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.note-info-start:hover, .note-info-start:focus {
text-align: left;
direction: rtl;
}
.note-info-start small {
opacity: 0.5;
}
.note-author-url {
font-weight: 700;
}
.note-author-nickname, .note-conversation-info {
opacity: .5;
.note-author-uri,
.note-conversation-info {
font-style: italic;
}
.note-author-url {
float: left;
.note-actions {
display: block;
}
.note-actions > li {
display: inline-block;
margin-left: 4px;
}
.note-author-url, .note-conversation-url, .note-url {
font-style: italic;
.note-actions-extra-details {
margin-right: 4px;
}
.note-actions-extra-details ul {
display: flex;
flex-direction: column;
}
.note-actions-extra-details hr {
margin: unset;
}
.note-actions-extra-details summary {
opacity: 0.5;
}
.note-actions-extra-details[open] > summary + * > li {
font-size: 0.937rem;
line-height: 2;
}
.note-actions-separator {
background: var(--foreground);
display: inline-block;
height: 1em;
opacity: 0.33;
width: 1px;
}
.note-actions-set {
opacity: 1 !important;
}
.note-complementary {
@ -306,32 +318,6 @@
padding: 0 4px 4px 0;
}
.note-conversation-info {
margin-left: 4px;
}
.note-info {
display: flex;
justify-content: space-between;
background: var(--gradient-backwards);
}
.note-info, embed header {
border-bottom: unset;
border-radius: 0 var(--s) 0 0;
display: flex;
line-height: initial;
padding: 4px var(--s) 4px 0;
}
.note-info-start {
display: flex;
}
.note-info-start > * {
word-break: break-all;
}
.note-replies-start {
font-size: .937rem;
font-weight: 700;

23
templates/cards/note/view.html.twig
View File

@ -79,20 +79,17 @@
{% block note_author %}
{# Microformat's h-card properties indicates a face icon is a "u-logo" #}
<a href="{{ actor_url }}">
<header class="note-author-fullname" tabindex="0"
title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
{% if fullname is not null %}
{{ fullname }}
{% else %}
{{ nickname }}
{% endif %}
</header>
<a href="{{ actor_url }}" class="note-author-url u-url" tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
{% if fullname is not null %}
{{ fullname }}
{% else %}
{{ nickname }}
{% endif %}
</a>
<small class="note-author-nickname">
<small class="note-author-uri">
<a href="{{ actor_uri }}"
class="note-author-url u-url">{{ mention }}</a>
class="u-url">{{ mention }}</a>
</small>
{% endblock note_author %}
@ -107,7 +104,7 @@
{% endblock note_sidebar %}
{% block note_info %}
<div class="note-info-start">
<span class="note-info-start">
{{ block('note_author') }}
<small class="note-conversation-info">
<a href="{{ note.getConversationUrl() }}"
@ -115,7 +112,7 @@
<a href="{{ note.getUrl() }}"
class="note-url">{{ note.getModified() | ago }}</a>
</small>
</div>
</span>
{% endblock note_info %}
{% block note_complementary_info %}