[CARDS][Note] Note actions are now displayed at the end

Due to space constraint on mobile screens, prior actions placement proved to be a problem. Additionally, note replies are now separated from their parent, allowing more horizontal space to be used if necessary/more reply depth to be presented in a reasonable fashion.
This commit is contained in:
Eliseu Amaro 2022-02-08 01:26:25 +00:00
parent 5cd3bc3206
commit 7b0667109d
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 37 additions and 36 deletions

View File

@ -51,7 +51,7 @@
{% else %}
{{ noteView.note_vanilla(conversation) }}
{% endif %}
<hr tabindex="0" title="{{ 'End of note and replies.' | trans }}">
<hr class="hr-replies-end" tabindex="0" title="{{ 'End of note and replies.' | trans }}">
{% endblock current_note %}
{% endfor %}
</section>

View File

@ -149,10 +149,13 @@
padding: unset;
}
.h-entry .replies {
border-left: 1px solid var(--border);
.note-replies {
margin-left: var(--xl);
}
.note-replies-start {
margin-top: var(--s);
margin-bottom: var(--s);
padding: 0 var(--s);
}
.h-entry a:focus {
@ -228,7 +231,6 @@ embed header {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: var(--gradient-backwards);
}
.note-info-start {
flex: 1;
@ -253,14 +255,16 @@ embed header {
font-style: italic;
}
.note-actions {
display: block;
display: flex;
flex-direction: initial;
justify-content: flex-end;
padding: 4px 8px;
background: var(--gradient-backwards);
border-radius: 0 0 var(--s) 0;
}
.note-actions > li {
display: inline-block;
margin-left: 4px;
}
.note-actions-extra-details {
margin-right: 4px;
margin-left: 8px;
}
.note-actions-extra-details ul {
display: flex;
@ -278,13 +282,7 @@ embed header {
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;
}
@ -310,7 +308,7 @@ embed header {
.note-content {
border-radius: 0 0 var(--s) var(--s);
display: block;
padding: 0 4px 4px 0;
padding: 0 4px 8px 0;
}
.note-replies-start {
@ -319,8 +317,13 @@ embed header {
opacity: .5;
}
.hr-replies-end {
margin-bottom: var(--xl);
}
.note-sidebar {
display: flex;
flex-direction: column;
padding: var(--s);
}
@ -370,11 +373,7 @@ embed header {
@media only screen and (max-width: 1280px) {
.note-sidebar {
padding: 8px 2px 0;
padding: 4px 6px;
}
.note-sidebar > * {
max-height: 2rem;
max-width: 2rem;
}
}

View File

@ -1,6 +1,6 @@
{% block note_actions %}
{% if app.user or note_actions_hide is defined %}
<menu class="note-actions note-info-end">
<menu class="note-actions">
<li class="note-actions-extra">
<details class="note-actions-extra-details">
<summary>
@ -15,7 +15,6 @@
</menu>
</details>
</li>
<span class="note-actions-separator"></span>
{% for current_action in get_note_actions(note) %}
<li><a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}"></a></li>
{% endfor %}
@ -27,14 +26,16 @@
{% import '/cards/macros/note.html.twig' as noteView %}
{% if replies is defined and replies is not empty %}
<div class="u-in-reply-to replies">
<span class="note-replies-start"
tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</span>
{% for conversation in replies %}
{{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
<hr tabindex="0" title="{{ 'End of reply' | trans }}">
{% endfor %}
</div>
<section class="note-replies">
<div class="note-replies-start"
tabindex="0">{{ '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>
</section>
{% endif %}
{% endblock note_replies %}

View File

@ -10,10 +10,10 @@
<article id="{{ 'note-anchor-' ~ note.getId() }}"
class="h-entry hentry note" lang={{ note.getLanguageLocale() }}>
{{ block('note_sidebar', 'cards/blocks/note.html.twig') }}
<div class="note-wrapper">
<header class="note-info">
{{ block('note_info', 'cards/blocks/note.html.twig') }}
{{ block('note_actions', 'cards/blocks/note.html.twig') }}
</header>
<section role="dialog" class="e-content entry-content note-content">
@ -21,11 +21,12 @@
{{ block('note_attachments', 'cards/blocks/note.html.twig') }}
{{ block('note_links', 'cards/blocks/note.html.twig') }}
</section>
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
{{ block('note_complementary_info', 'cards/blocks/note.html.twig') }}
{{ block('note_actions', 'cards/blocks/note.html.twig') }}
</div>
</article>
{{ block('note_replies', 'cards/blocks/note.html.twig') }}
{% endmacro note_vanilla %}
{% macro note_compact(note) %}