From f6b19d2a0fc73719a1e7143f8dbc2fc3badd3bbd Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 8 Feb 2022 16:13:46 +0000
Subject: [PATCH] [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 | 52 ++++++++++-----
 templates/cards/blocks/note.html.twig       | 73 +++++++++++----------
 templates/cards/macros/note.html.twig       |  3 +-
 3 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/public/assets/default_theme/pages/feeds.css b/public/assets/default_theme/pages/feeds.css
index d17bcb3bd4..66f13ce665 100644
--- a/public/assets/default_theme/pages/feeds.css
+++ b/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;
-    background: var(--gradient-backwards);
-    border-radius: 0 0 var(--s) 0;
+    flex: 1;
+    align-items: center;
 }
 .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 {
-    background: var(--gradient) !important;
-    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-end {
+    display: flex;
 }
 
-.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 {
-    margin-bottom: var(--s);
+.note-complementary-info span {
+    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) {
diff --git a/templates/cards/blocks/note.html.twig b/templates/cards/blocks/note.html.twig
index d7572de13c..6faf455d43 100644
--- a/templates/cards/blocks/note.html.twig
+++ b/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"
-                  tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</div>
+            <div class="note-replies-start" tabindex="0" title="{{ '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,39 +124,43 @@
     </span>
 {% endblock note_info %}
 
-{% block 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'] %}
-                {% 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>
-                        {% if counter == actor_count - 2 %}
-                            {{ ' and ' | trans }}
+{% 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 }) %}
+                {% 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>
+                            {% if counter == actor_count - 2 %}
+                                {{ ' and ' | trans }}
+                            {% endif %}
+                            {% set counter = counter + 1 %}
                         {% endif %}
-                        {% set counter = counter + 1 %}
-                    {% endif %}
-                {% else %}
-                    {% if complementary_info_actor is defined %}
-                        <a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a>
-                        {% if counter == actor_count - 2 %}
-                            {{ ' and ' | trans }}
+                    {% else %}
+                        {% if complementary_info_actor is defined %}
+                            <a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a>
+                            {% if counter == actor_count - 2 %}
+                                {{ ' and ' | trans }}
+                            {% endif %}
+                            {% set counter = counter + 1 %}
                         {% endif %}
-                        {% set counter = counter + 1 %}
                     {% 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 %}
-            {% 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 %}
-        </aside>
-    {% endfor %}
-{% endblock note_complementary_info %}
\ No newline at end of file
+        </div>
+    {{ block('note_actions', 'cards/blocks/note.html.twig') }}
+    </aside>
+{% endblock note_complementary %}
\ No newline at end of file
diff --git a/templates/cards/macros/note.html.twig b/templates/cards/macros/note.html.twig
index 65491f925d..c5d4e2b59e 100644
--- a/templates/cards/macros/note.html.twig
+++ b/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') }}