[PLUGINS][Embed] Polished embed template in order to better utilize space.

[CSS][Feed] Embed related additions.
This commit is contained in:
Eliseu Amaro 2021-10-24 22:45:38 +01:00 committed by Diogo Peralta Cordeiro
parent 0407ac38cf
commit 45f65baf96
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
5 changed files with 68 additions and 44 deletions

View File

@ -1,5 +1,10 @@
<hr>
<article class="h-entry embed"> <article class="h-entry embed">
<header> <header>
<a class="p-name u-url" href="{{link.getUrl()}}">{{embed.getTitle() | escape}}</a>
</header>
{% if attributes['has_attachment'] != false %} {% if attributes['has_attachment'] != false %}
{% set thumbnail_parameters = { {% set thumbnail_parameters = {
'id': embed.getAttachmentId(), 'id': embed.getAttachmentId(),
@ -9,10 +14,9 @@
width="{{attributes['width']}}" height="{{attributes['height']}}" width="{{attributes['width']}}" height="{{attributes['height']}}"
src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" /> src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" />
{% endif %} {% endif %}
<h5 class="p-name embed">
<a class="u-url" href="{{link.getUrl()}}">{{embed.getTitle() | escape}}</a> <div class="p-summary">
</h5> <div class="p-author">
<div class="p-author embed">
{% if embed.getAuthorName() is not null %} {% if embed.getAuthorName() is not null %}
<div class="fn vcard author"> <div class="fn vcard author">
{% if embed.getAuthorUrl() is null %} {% if embed.getAuthorUrl() is null %}
@ -32,8 +36,9 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
</header>
<div class="p-summary embed"> <hr>
{{ embed.getDescription() | escape }} {{ embed.getDescription() | escape }}
</div> </div>
</article> </article>

View File

@ -43,7 +43,7 @@ input[type=checkbox] {
.markdown-blocks, .markdown-blocks,
.profile, .profile,
.section-title-details, .section-title-details,
.section-attachments, .note-attachments-unit,
.section-settings, .section-settings,
.section-settings ul, .section-settings ul,
.section-widget, .section-widget,
@ -114,7 +114,7 @@ select {
} }
.doc-navigation, .doc-navigation,
.h-entry, .h-entry:not(.embed),
.markdown-blocks, .markdown-blocks,
.section-settings, .section-settings,
.section-settings ul, .section-settings ul,
@ -128,7 +128,7 @@ textarea {
} }
#header, #header,
.h-entry, .h-entry:not(.embed),
.header-extra-forms-open, .header-extra-forms-open,
.profile, .profile,
.set-shadow-dark, .set-shadow-dark,

View File

@ -49,22 +49,50 @@
background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
} }
.h-entry .embed { .embed {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-wrap: wrap;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: var(--smaller); padding: var(--smaller);
border: unset; 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-"] { .h-entry .embed[class*="p-"] {
@ -75,16 +103,6 @@
text-decoration: underline 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 { .h-entry {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -108,7 +126,8 @@
margin-left: var(--small) margin-left: var(--small)
} }
.note-info { .note-info,
embed header {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;
@ -240,7 +259,7 @@
margin-bottom: var(--smaller) margin-bottom: var(--smaller)
} }
.section-attachments { .note-attachments-unit {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;
@ -261,11 +280,11 @@
align-self: flex-start align-self: flex-start
} }
.note-attachments:not(:only-child) { .note-attachments-unit:not(:only-child) {
margin-right: var(--smaller) margin-right: var(--smaller)
} }
.note-attachments>figure figcaption { .note-attachments-unit>figure figcaption {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;

View File

@ -1,12 +1,12 @@
{% set handled = false %} {% set handled = false %}
{% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %} {% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %}
{% set handled = true %} {% set handled = true %}
<div class="note-attachments"> <div class="note-attachments-unit">
{{ block | raw }} {{ block | raw }}
</div> </div>
{% endfor %} {% endfor %}
{% if not handled %} {% if not handled %}
<div> <div class="note-attachments-unit">
<i> <a href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getBestTitle(note) }}</a> </i> <i> <a href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getBestTitle(note) }}</a> </i>
</div> </div>
{% endif %} {% endif %}

View File

@ -37,7 +37,7 @@
{% if hide_attachments is not defined %} {% if hide_attachments is not defined %}
{% if note.getAttachments() is not empty %} {% 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() %} {% for attachment in note.getAttachments() %}
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%} {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
{% endfor %} {% endfor %}