[CARDS][Note] Note's actions are now inside the same div as Note's complementary info, overall footprint of replies diminished

This commit is contained in:
Eliseu Amaro 2022-02-08 16:13:46 +00:00
parent 67a2387b31
commit f6b19d2a0f
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
3 changed files with 74 additions and 54 deletions

View File

@ -143,12 +143,28 @@
background-color: var(--background-card);
border-radius: var(--s);
display: flex;
flex-wrap: wrap;
}
.h-entry .embed[class*="p-"] {
padding: unset;
}
.u-in-reply-to {
display: flex;
}
.u-in-reply-to > * {
width: 100%;
}
.u-in-reply-to::before {
content: '\201C';
font-size: 32px;
opacity: 0.66;
margin-right: var(--s);
}
.note-replies {
margin-left: var(--xl);
}
@ -258,9 +274,8 @@ embed header {
display: flex;
flex-direction: initial;
justify-content: flex-end;
padding: 4px 8px;
background: var(--gradient-backwards);
border-radius: 0 0 var(--s) 0;
flex: 1;
align-items: center;
}
.note-actions > li {
display: inline-block;
@ -274,8 +289,6 @@ embed header {
margin: unset;
}
.note-actions-extra-details summary {
width: 1em;
height: 1em;
opacity: 0.5;
}
.note-actions-extra-details[open] > summary + * > a {
@ -287,28 +300,33 @@ embed header {
opacity: 1 !important;
}
.note-complementary {
background: var(--gradient) !important;
border-left: 1px solid var(--accent);
font-size: .937rem;
margin-bottom: 4px;
margin-right: var(--s);
padding-left: var(--s);
border-radius: 0 0 0 var(--s);
.note-end {
display: flex;
}
.note-complementary a {
.note-complementary {
width: 100%;
display: flex;
font-size: .937rem;
background: var(--gradient-backwards);
padding: 4px 8px;
border-radius: 0 0 var(--s) 0;
}
.note-complementary-info a {
font-weight: 700;
}
.note-complementary:last-of-type {
margin-bottom: var(--s);
.note-complementary-info span {
display: block;
line-height: 1.3;
}
.note-content {
border-radius: 0 0 var(--s) var(--s);
display: block;
padding: 0 4px 8px 0;
flex: 1;
}
.note-replies-start {
@ -368,7 +386,7 @@ embed header {
.note-wrapper {
height: inherit;
width: 100%;
flex: 1;
}
@media only screen and (max-width: 1280px) {

View File

@ -27,14 +27,13 @@
{% if replies is defined and replies is not empty %}
<section class="note-replies">
<div class="note-replies-start"
tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</div>
<div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div>
<div class="u-in-reply-to replies">
{% for conversation in replies %}
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
<hr tabindex="0" title="{{ 'End of reply' | trans }}">
{% endfor %}
</div>
<hr tabindex="0" title="{{ 'End of reply' | trans }}">
</section>
{% endif %}
{% endblock note_replies %}
@ -125,13 +124,14 @@
</span>
{% endblock note_info %}
{% block note_complementary_info %}
{% block note_complementary %}
<aside title="{{ 'Note\'s complementary information' | trans }}" class="note-complementary">
<div class="note-complementary-info">
{% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
<aside title="{{ 'Note\'s complementary information' | trans }}"
class="note-complementary">
{% set actor_count = complementary_info['actors'] | length %}
{% set counter = 0 %}
{% for complementary_info_actor in complementary_info['actors'] %}
<span>
{% if app.user is not null %}
{% if complementary_info_actor is defined and complementary_info_actor.getNickname() != app.user.nickname %}
<a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a>
@ -158,6 +158,9 @@
{% endif %}
{{ complementary_info['action'] ~ ' this note' | trans }}
{% endif %}
</aside>
</span>
{% endfor %}
{% endblock note_complementary_info %}
</div>
{{ block('note_actions', 'cards/blocks/note.html.twig') }}
</aside>
{% endblock note_complementary %}

View File

@ -21,9 +21,8 @@
{{ block('note_attachments', 'cards/blocks/note.html.twig') }}
{{ block('note_links', 'cards/blocks/note.html.twig') }}
</section>
{{ block('note_complementary_info', 'cards/blocks/note.html.twig') }}
{{ block('note_actions', 'cards/blocks/note.html.twig') }}
</div>
{{ block('note_complementary', 'cards/blocks/note.html.twig') }}
</article>
{{ block('note_replies', 'cards/blocks/note.html.twig') }}