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

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

View File

@ -203,48 +203,6 @@
margin-top: var(--s); 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 { .note-attachments {
display: flex; display: flex;
} }
@ -265,21 +223,75 @@
margin-right: var(--s); 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; font-weight: 700;
} }
.note-author-uri,
.note-author-nickname, .note-conversation-info { .note-conversation-info {
opacity: .5; font-style: italic;
} }
.note-actions {
.note-author-url { display: block;
float: left; }
.note-actions > li {
display: inline-block;
margin-left: 4px; margin-left: 4px;
} }
.note-actions-extra-details {
.note-author-url, .note-conversation-url, .note-url { margin-right: 4px;
font-style: italic; }
.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 { .note-complementary {
@ -306,32 +318,6 @@
padding: 0 4px 4px 0; 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 { .note-replies-start {
font-size: .937rem; font-size: .937rem;
font-weight: 700; font-weight: 700;

View File

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