GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[CSS] Note attachments uses a grid layout now.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-23 15:38:56 +01:00
parent af3531f1c7
commit be8610a7a1
2 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/assets/css/base.css
View File

@ -33,6 +33,7 @@ html {
--main-size: 1.5rem; --main-size: 1.5rem;
--medium-size: 1.2rem; --medium-size: 1.2rem;
--small-size: 1rem; --small-size: 1rem;
--smaller-size: 0.8rem;
/* transitions and animations */ /* transitions and animations */
@ -122,7 +123,7 @@ a:hover {
} }
figcaption a:link { figcaption a:link {
font-size: var(--small-size); font-size: var(--smaller-size);
color: var(--white); color: var(--white);
} }
@ -402,38 +403,38 @@ hr {
} }
.note-content { .note-content {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
height: max-content;
padding: var(--small-size); padding: var(--small-size);
} }
.note-content * {
max-width: 100%;
max-height: 100%;
}
.note-text { .note-text {
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.note-attachments * { figure { margin: unset; max-width: 100%; max-height: border-box;}
display: flex; .note-content > .note-attachments {
max-width: 100%; display: grid;
} grid-template-columns: repeat(2, fit-content(100%));
grid-template-rows: repeat(2, fit-content(100%));
.note-attachments > figure {
display: flex;
flex-direction: column;
margin: 0;
border-radius: var(--unit-size); border-radius: var(--unit-size);
background-color: var(--translucent); background-color: var(--translucent);
padding: var(--small-size); padding: var(--smaller-size);
}
.note-attachments > figure * { align-self: flex-start;
width: max-content; }
height: auto; .note-attachments:not(:only-child){
margin: 5px;
} }
.note-attachments > figure figcaption { .note-attachments > figure figcaption {
word-break: break-all; word-break: break-all;
padding-top: var(--small-size);
} }
/* SECTIONS */ /* SECTIONS */

2
templates/note/view.html.twig
View File

@ -35,12 +35,14 @@
</div> </div>
{% if hide_attachments is not defined %} {% if hide_attachments is not defined %}
{% if note.getAttachments() is not empty %}
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}"> <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
{% for attachment in note.getAttachments() %} {% for attachment in note.getAttachments() %}
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%} {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% endif %}
{% if note.getLinks() is not empty %} {% if note.getLinks() is not empty %}
<div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}"> <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">