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

public/assets/default_theme/pages/feeds.css

@@ -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;
+    flex: 1;
-    background: var(--gradient-backwards);
+    align-items: center;
-    border-radius: 0 0 var(--s) 0;
 }
 .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 {
+.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;
 }
 
-.note-complementary:last-of-type {
+.note-complementary-info span {
-    margin-bottom: var(--s);
+    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) {

templates/cards/blocks/note.html.twig

@@ -27,14 +27,13 @@
 
     {% if replies is defined and replies is not empty %}
         <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">
                 {% 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 %}

templates/cards/macros/note.html.twig

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