[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
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 37 additions and 36 deletions

View File

@ -51,7 +51,7 @@
{% else %} {% else %}
{{ noteView.note_vanilla(conversation) }} {{ noteView.note_vanilla(conversation) }}
{% endif %} {% 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 %} {% endblock current_note %}
{% endfor %} {% endfor %}
</section> </section>

View File

@ -149,10 +149,13 @@
padding: unset; padding: unset;
} }
.h-entry .replies { .note-replies {
border-left: 1px solid var(--border); margin-left: var(--xl);
}
.note-replies-start {
margin-top: var(--s);
margin-bottom: var(--s); margin-bottom: var(--s);
padding: 0 var(--s);
} }
.h-entry a:focus { .h-entry a:focus {
@ -228,7 +231,6 @@ embed header {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: var(--gradient-backwards);
} }
.note-info-start { .note-info-start {
flex: 1; flex: 1;
@ -253,14 +255,16 @@ embed header {
font-style: italic; font-style: italic;
} }
.note-actions { .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 { .note-actions > li {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 8px;
}
.note-actions-extra-details {
margin-right: 4px;
} }
.note-actions-extra-details ul { .note-actions-extra-details ul {
display: flex; display: flex;
@ -278,13 +282,7 @@ embed header {
font-size: 0.937rem; font-size: 0.937rem;
line-height: 2; line-height: 2;
} }
.note-actions-separator {
background: var(--foreground);
display: inline-block;
height: 1em;
opacity: 0.33;
width: 1px;
}
.note-actions-set { .note-actions-set {
opacity: 1 !important; opacity: 1 !important;
} }
@ -310,7 +308,7 @@ embed header {
.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 4px 0; padding: 0 4px 8px 0;
} }
.note-replies-start { .note-replies-start {
@ -319,8 +317,13 @@ embed header {
opacity: .5; opacity: .5;
} }
.hr-replies-end {
margin-bottom: var(--xl);
}
.note-sidebar { .note-sidebar {
display: flex; display: flex;
flex-direction: column;
padding: var(--s); padding: var(--s);
} }
@ -370,11 +373,7 @@ embed header {
@media only screen and (max-width: 1280px) { @media only screen and (max-width: 1280px) {
.note-sidebar { .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 %} {% block note_actions %}
{% if app.user or note_actions_hide is defined %} {% 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"> <li class="note-actions-extra">
<details class="note-actions-extra-details"> <details class="note-actions-extra-details">
<summary> <summary>
@ -15,7 +15,6 @@
</menu> </menu>
</details> </details>
</li> </li>
<span class="note-actions-separator"></span>
{% for current_action in get_note_actions(note) %} {% 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> <li><a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}"></a></li>
{% endfor %} {% endfor %}
@ -27,14 +26,16 @@
{% import '/cards/macros/note.html.twig' as noteView %} {% import '/cards/macros/note.html.twig' as noteView %}
{% if replies is defined and replies is not empty %} {% 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="u-in-reply-to replies"> <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 %} {% 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 }}"> <hr tabindex="0" title="{{ 'End of reply' | trans }}">
{% endfor %} {% endfor %}
</div> </div>
</section>
{% endif %} {% endif %}
{% endblock note_replies %} {% endblock note_replies %}

View File

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