[CARDS][Note] Fix structure to break content in a controlled manner

[CSS] Responsive feed styling work

Note info content will now break as expected, useless space trimmed down to accomodate smaller screens.

public/assets/default_theme/css/base.css

@@ -61,14 +61,13 @@ html {
 }
 .page-header {
     z-index: 1;
-    font-family: 'Poppins',sans-serif;
+    display: inline-flex;
-    height: var(--xxl);
-    display: flex;
     justify-content: center;
     position: fixed;
     top: 0;
-    align-self: center;
+    align-items: baseline;
-    align-items: center;
+    font-family: 'Poppins',sans-serif;
+    height: var(--xxl);
     padding: var(--s);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
@@ -149,6 +148,7 @@ html {
     display: flex;
     justify-content: space-evenly;
 }
+/* < 720p */
 @media only screen and (max-width:1280px) {
     .page-header {
         width: 100%;

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

@@ -9,7 +9,7 @@
     margin-left: var(--s);
 }
 .feed-header .feed-actions a:not(.active) {
-    opacity: 0.4;
+    opacity: 0.33;
 }
 .notes hr {
     margin-top: var(--s);
@@ -20,25 +20,21 @@
     border-radius: var(--s) var(--s) 0 0;
 }
 .note-sidebar {
-    padding: var(--s);
-}
-.note-sidebar * {
     display: flex;
     flex-direction: column;
-    margin-left: auto;
+    align-items: center;
-    margin-right: auto;
+    padding: var(--s);
-    max-height: 100%;
 }
-.note-sidebar .avatar {
+.note-sidebar > * {
     max-width: 4rem;
     max-height: 4rem;
-    min-width: var(--xxl);
     width: 100%;
     height: auto;
-    background: unset;
-    margin-bottom: var(--s);
     border-radius: 2px;
 }
+.note-sidebar img {
+    background: unset !important;
+}
 .h-entry:not(:first-child) {
     margin-top: var(--s);
 }
@@ -100,42 +96,58 @@
 }
 .h-entry .replies {
     margin-bottom: var(--m);
-    padding: var(--s) var(--s) 0 0;
+    padding: 0 var(--s) 0 var(--s);
-    padding-left: var(--m);
+    border-left: 1px solid var(--border);
-    border-left: 2px solid var(--border);
+}
+.replies small {
+    opacity: 0.5;
 }
 .note-info,
 embed header {
     display: flex;
-    align-items: center;
-    max-height: var(--xxl);
     border-bottom: unset;
     border-radius: var(--s) var(--s) 0 0;
-    padding: 4px var(--s) 4px 0;
+    line-height: initial;
+    padding: 8px var(--s) 8px 0;
 }
 .note-info {
     background: var(--gradient-backwards);
 }
+.note-info > * {
+    align-items: center;
+}
+.note-info-start {
+    display: flex;
+    flex-wrap: wrap;
+}
+.note-info-start > * {
+    word-break: break-all;
+}
+.note-conversation-info {
+    margin-left: 4px;
+}
+.note-author-url,
+.note-conversation-url,
 .note-url {
+    font-style: italic;
     opacity: 0.5;
-    margin-left: var(--s);
 }
 embed header {
     justify-content: space-between;
 }
 .note-author-url {
+    float: left;
     margin-left: 4px;
 }
+.note-author-url::before {
+    content: '@';
+}
 .note-author-fullname {
     font-weight: bold;
 }
-.note-author-nickname {
-    opacity: 0.5;
-}
-.note-author-nickname::before {
-    content: '@';
-}
 .note-actions {
+    display: flex;
+    align-items: center;
     margin-left: auto;
 }
 .note-actions ul {
@@ -149,7 +161,8 @@ embed header {
 .note-actions-extra-details summary {
     display: block;
     opacity: 0.33;
-    vertical-align: middle;
+    width: var(--unit);
+    height: var(--unit);
 }
 .note-actions-extra-details[open] > summary {
     opacity: 1 !important;
@@ -220,7 +233,7 @@ embed header {
     display: flex;
     flex-direction: column;
     border-radius: 0 0 var(--s) var(--s);
-    padding-right: var(--s);
+    padding: 0 var(--s) var(--s) 0;
 }
 .note-text a {
     text-decoration: underline !important;
@@ -268,3 +281,17 @@ embed header {
     color: var(--foreground);
     border-radius: 0 0 var(--s) 0;
 }
+
+/* < 720p */
+@media only screen and (max-width:1280px) {
+    .note-sidebar {
+        padding: 8px 2px 0 2px;
+    }
+    .note-sidebar .avatar {
+        width: 60%;
+    }
+    .button-container {
+        width: 0.937rem;
+        height: 0.937rem;
+    }
+}

templates/cards/note/view.html.twig

@@ -1,6 +1,6 @@
 {% block note_actions %}
     {% if app.user or note_actions_hide is defined %}
-        <div class="note-actions">
+        <div class="note-actions note-info-end">
             <ul>
                 <li class="note-actions-extra">
                     <details class="note-actions-extra-details">
@@ -31,7 +31,7 @@
 {% block note_replies %}
     {% if replies is defined and replies is not empty %}
         <div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }}{{ nickname }}{{ '\'s note!' | trans }}">
-            <strong>{{ 'Replies to ' | trans }}{{ nickname }}</strong>
+            <strong><small>{{ 'Replies to ' | trans }}{{ nickname }}</small></strong>
             {% for conversation in replies %}
                 {{ _self.macro_note(conversation['note'], conversation['replies']) }}
                 <hr tabindex="0" title="{{ 'End of reply' | trans }}">
@@ -79,9 +79,10 @@
             {{ nickname }}
         {% endif %}
     </header>
-    <a href="{{ actor_url }}" class="note-author-url u-url">
+
-        <em class="note-author-nickname">{{ nickname }}</em>
+    <small class="note-author-nickname">
-    </a>
+        <a href="{{ actor_url }}" class="note-author-url u-url">{{ nickname }}</a>
+    </small>
 {% endblock note_author %}
 
 {% block note_sidebar %}
@@ -92,10 +93,13 @@
 
 {% block note_info %}
     <div class="note-info">
+        <div class="note-info-start">
             {{ block('note_author') }}
-        <em>
+            <small class="note-conversation-info">
-            <a href="{{ note.getConversationUrl() }}" class="note-url">{{ 'in conversation' | trans }}</a> <a href="{{ note.getUrl() }}" class="note-url">{{ note.getModified() | ago }}</a>
+                <a href="{{ note.getConversationUrl() }}" class="note-conversation-url">{{ 'in conversation' | trans }}</a>
-        </em>
+                <a href="{{ note.getUrl() }}" class="note-url">{{ note.getModified() | ago }}</a>
+            </small>
+        </div>
 
         {{ block('note_actions') }}
     </div>