[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.

components/Collection/templates/collection/notes.html.twig

@@ -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>

public/assets/default_theme/css/pages/feeds.css

@@ -149,10 +149,13 @@
     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);
-    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;
+    margin-left: 8px;
-}
-.note-actions-extra-details {
-    margin-right: 4px;
 }
 .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;
-    }
 }

templates/cards/blocks/note.html.twig

@@ -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">
+        <section class="note-replies">
-            <span class="note-replies-start"
+            <div class="note-replies-start"
-                  tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</span>
+                  tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</div>
-            {% for conversation in replies %}
+            <div class="u-in-reply-to replies">
-                {{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
+                {% for conversation in replies %}
-                <hr tabindex="0" title="{{ 'End of reply' | trans }}">
+                    {{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
-            {% endfor %}
+                    <hr tabindex="0" title="{{ 'End of reply' | trans }}">
-        </div>
+                {% endfor %}
+            </div>
+        </section>
     {% endif %}
 {% endblock note_replies %}
 

templates/cards/macros/note.html.twig

@@ -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) %}