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

[CSS] Note attachments uses a grid layout now.

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

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

@ -21,7 +21,7 @@ html {
:root { :root {
/* FONTS */ /* FONTS */
--display-font: 'Poppins', sans-serif; --display-font: 'Poppins', sans-serif;
--main-font: 'Open Sans', sans-serif; --main-font: 'Open Sans', sans-serif;
/* UNITS /* UNITS
* unit size - every element should be a multiplier of this * unit size - every element should be a multiplier of this
@ -29,16 +29,17 @@ html {
* medium size - same as above, except that the element in question is contained in something else * medium size - same as above, except that the element in question is contained in something else
* small size - used in common text, borders * small size - used in common text, borders
*/ */
--unit-size: 0.5rem; --unit-size: 0.5rem;
--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 */
--cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1); --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
--fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); --fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
@ -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 */

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

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