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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

73
templates/cards/blocks/note.html.twig
View File

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

3
templates/cards/macros/note.html.twig
View File

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