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

[CSS] Note attachments layout fix. Added a very small radius to avatars.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-23 16:18:08 +01:00
parent 3ef1077f90
commit b6d80003d8
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,11 @@ html {
scroll-margin-top: 4rem; scroll-margin-top: 4rem;
} }
* {
max-width: 100%;
max-height: 100%;
}
*:hover, *:hover,
*:active { *:active {
-webkit-box-shadow: unset; -webkit-box-shadow: unset;
@ -305,7 +310,7 @@ hr {
.note-sidebar * { .note-sidebar * {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: auto;hr margin-left: auto;
margin-right: auto; margin-right: auto;
max-height: 100%; max-height: 100%;
} }
@ -315,6 +320,7 @@ hr {
height: auto; height: auto;
background: unset; background: unset;
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
border-radius: 2px;
} }
.h-entry .replies .h-entry { .h-entry .replies .h-entry {
@ -408,20 +414,19 @@ hr {
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
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);
} }
figure { margin: unset; max-width: 100%; max-height: border-box;} figure {
.note-content > .note-attachments { margin: unset;
object-fit: cover;
}
.section-attachments {
display: grid; display: grid;
grid-template-columns: repeat(2, fit-content(100%)); grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, fit-content(100%)); grid-template-rows: repeat(3, auto);
border-radius: var(--unit-size); border-radius: var(--unit-size);
background-color: var(--translucent); background-color: var(--translucent);
@ -429,11 +434,12 @@ figure { margin: unset; max-width: 100%; max-height: border-box;}
align-self: flex-start; align-self: flex-start;
} }
.note-attachments:not(:only-child){
margin: 5px;
}
.note-attachments:not(:only-child) {
margin: var(--small-size);
}
.note-attachments > figure figcaption { .note-attachments > figure figcaption {
display: flex;
word-break: break-all; word-break: break-all;
} }
@ -441,7 +447,7 @@ figure { margin: unset; max-width: 100%; max-height: border-box;}
.section-widget { .section-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: fit-content;
background-color: var(--translucent); background-color: var(--translucent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
@ -817,6 +823,7 @@ input[type=file] {
width: 100%; width: 100%;
height: auto; height: auto;
margin-right: 5px; margin-right: 5px;
border-radius: 2px;
} }
/* MEDIA QUERIES */ /* MEDIA QUERIES */

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

@ -36,11 +36,11 @@
{% if hide_attachments is not defined %} {% if hide_attachments is not defined %}
{% if note.getAttachments() is not empty %} {% if note.getAttachments() is not empty %}
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}"> <section class="section-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> </section>
{% endif %} {% endif %}
{% endif %} {% endif %}