From 45f65baf96bb52ba45aca680fd4518d7bd49f3e2 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Sun, 24 Oct 2021 22:45:38 +0100
Subject: [PATCH] [PLUGINS][Embed] Polished embed template in order to better
 utilize space. [CSS][Feed] Embed related additions.

---
 .../Embed/templates/embed/embedView.html.twig | 35 +++++-----
 public/assets/default_theme/css/colors.css    |  6 +-
 .../assets/default_theme/css/pages/feeds.css  | 65 ++++++++++++-------
 templates/cards/attachments/view.html.twig    |  4 +-
 templates/cards/note/view.html.twig           |  2 +-
 5 files changed, 68 insertions(+), 44 deletions(-)

diff --git a/plugins/Embed/templates/embed/embedView.html.twig b/plugins/Embed/templates/embed/embedView.html.twig
index 2d0956cf2f..624b02b93d 100644
--- a/plugins/Embed/templates/embed/embedView.html.twig
+++ b/plugins/Embed/templates/embed/embedView.html.twig
@@ -1,18 +1,22 @@
+<hr>
+
 <article class="h-entry embed">
     <header>
-        {% if attributes['has_attachment'] != false %}
-            {% set thumbnail_parameters = {
-                'id': embed.getAttachmentId(),
-                'size': 'medium'
-            } %}
-            <img alt="{{embed.getTitle() | escape}}" class="{{attributes['class']}}"
-                 width="{{attributes['width']}}" height="{{attributes['height']}}"
-                 src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" />
-        {% endif %}
-        <h5 class="p-name embed">
-            <a class="u-url" href="{{link.getUrl()}}">{{embed.getTitle() | escape}}</a>
-        </h5>
-        <div class="p-author embed">
+        <a class="p-name u-url" href="{{link.getUrl()}}">{{embed.getTitle() | escape}}</a>
+    </header>
+
+    {% if attributes['has_attachment'] != false %}
+        {% set thumbnail_parameters = {
+            'id': embed.getAttachmentId(),
+            'size': 'medium'
+        } %}
+        <img alt="{{embed.getTitle() | escape}}" class="{{attributes['class']}}"
+             width="{{attributes['width']}}" height="{{attributes['height']}}"
+             src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" />
+    {% endif %}
+
+    <div class="p-summary">
+        <div class="p-author">
             {% if embed.getAuthorName() is not null %}
                 <div class="fn vcard author">
                     {% if embed.getAuthorUrl() is null %}
@@ -32,8 +36,9 @@
                 </div>
             {% endif %}
         </div>
-    </header>
-    <div class="p-summary embed">
+
+        <hr>
+
         {{ embed.getDescription() | escape }}
     </div>
 </article>
diff --git a/public/assets/default_theme/css/colors.css b/public/assets/default_theme/css/colors.css
index dc81add238..f2f7ae3a4d 100644
--- a/public/assets/default_theme/css/colors.css
+++ b/public/assets/default_theme/css/colors.css
@@ -43,7 +43,7 @@ input[type=checkbox] {
 .markdown-blocks,
 .profile,
 .section-title-details,
-.section-attachments,
+.note-attachments-unit,
 .section-settings,
 .section-settings ul,
 .section-widget,
@@ -114,7 +114,7 @@ select {
 }
 
 .doc-navigation,
-.h-entry,
+.h-entry:not(.embed),
 .markdown-blocks,
 .section-settings,
 .section-settings ul,
@@ -128,7 +128,7 @@ textarea {
 }
 
 #header,
-.h-entry,
+.h-entry:not(.embed),
 .header-extra-forms-open,
 .profile,
 .set-shadow-dark,
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 5a40c5028b..ed207c86bc 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -49,22 +49,50 @@
     background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
 
-.h-entry .embed {
+.embed {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -moz-box-orient: vertical;
-    -moz-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
+    flex-wrap: wrap;
     padding: var(--smaller);
     border: unset;
-    width: 100%
+}
+
+.embed header {
+    width: 100%;
+    margin-bottom: var(--small);
+}
+
+.embed img {
+    width: 25%;
+    height: auto;
+    margin-right: var(--smaller);
+}
+
+.embed .p-summary {
+    width: 60%;
+}
+
+.embed .p-name,
+.embed .p-author {
+    font-weight: bold;
+}
+
+.embed img {
+    padding: unset;
+    max-width: -webkit-min-content;
+    max-width: -moz-min-content;
+    max-width: min-content;
+    max-height: -webkit-min-content;
+    max-height: -moz-min-content;
+    max-height: min-content
+}
+
+.embed .p-summary hr {
+    margin-top: var(--smaller);
+    margin-bottom: var(--smaller);
 }
 
 .h-entry .embed[class*="p-"] {
@@ -75,16 +103,6 @@
     text-decoration: underline
 }
 
-.h-entry .embed header img {
-    padding: unset;
-    max-width: -webkit-min-content;
-    max-width: -moz-min-content;
-    max-width: min-content;
-    max-height: -webkit-min-content;
-    max-height: -moz-min-content;
-    max-height: min-content
-}
-
 .h-entry {
     display: -webkit-box;
     display: -webkit-flex;
@@ -108,7 +126,8 @@
     margin-left: var(--small)
 }
 
-.note-info {
+.note-info,
+embed header {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
@@ -240,7 +259,7 @@
     margin-bottom: var(--smaller)
 }
 
-.section-attachments {
+.note-attachments-unit {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
@@ -261,11 +280,11 @@
     align-self: flex-start
 }
 
-.note-attachments:not(:only-child) {
+.note-attachments-unit:not(:only-child) {
     margin-right: var(--smaller)
 }
 
-.note-attachments>figure figcaption {
+.note-attachments-unit>figure figcaption {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
diff --git a/templates/cards/attachments/view.html.twig b/templates/cards/attachments/view.html.twig
index 1ba86ffc92..a4858a918c 100644
--- a/templates/cards/attachments/view.html.twig
+++ b/templates/cards/attachments/view.html.twig
@@ -1,12 +1,12 @@
 {% set handled = false %}
 {% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %}
     {% set handled = true %}
-    <div class="note-attachments">
+    <div class="note-attachments-unit">
         {{ block | raw }}
     </div>
 {% endfor %}
 {% if not handled %}
-    <div>
+    <div class="note-attachments-unit">
         <i> <a href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getBestTitle(note) }}</a> </i>
     </div>
 {% endif %}
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index 70c7a2b517..79ab47f647 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -37,7 +37,7 @@
 
             {% if hide_attachments is not defined %}
                 {% if note.getAttachments() is not empty %}
-                    <section class="section-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
+                    <section class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
                         {% for attachment in note.getAttachments() %}
                             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
                         {% endfor %}