[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">
<header>
<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(),
@ -9,10 +14,9 @@
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">
<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>

View File

@ -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,

View File

@ -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;

View File

@ -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 %}

View File

@ -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 %}