forked from GNUsocial/gnu-social
[UI] Fixing timeline notice structure and CSS
This commit is contained in:
parent
3def39fed3
commit
1b350d51fc
@ -57,12 +57,22 @@
|
|||||||
transition: all 0.8s ease;
|
transition: all 0.8s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.notes div div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.notes-wrap {
|
.notes-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: var(--medium-size);
|
font-size: var(--medium-size);
|
||||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||||
background-color: var(--bg3);
|
background-color: var(--bg4);
|
||||||
padding: var(--unit-size);
|
padding: var(--unit-size);
|
||||||
}
|
}
|
||||||
.notes-wrap .timeline-nav {
|
.notes-wrap .timeline-nav {
|
||||||
@ -70,15 +80,18 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
}
|
|
||||||
.notes-wrap .timeline-nav .notes div {
|
|
||||||
background-color: var(--bg4);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
padding: var(--unit-size);
|
|
||||||
margin-top: var(--unit-size);
|
margin-top: var(--unit-size);
|
||||||
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div {
|
||||||
|
background-color: var(--bg2);
|
||||||
|
padding: var(--unit-size);
|
||||||
|
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div:last-child {
|
||||||
|
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
|
||||||
|
}
|
||||||
.notes-wrap .main-nav {
|
.notes-wrap .main-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: var(--unit-size);
|
font-size: var(--unit-size);
|
||||||
|
@ -57,28 +57,40 @@
|
|||||||
transition: all 0.8s ease;
|
transition: all 0.8s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.notes div div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.notes-wrap {
|
.notes-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: var(--medium-size);
|
font-size: var(--medium-size);
|
||||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||||
background-color: var(--bg3);
|
background-color: var(--bg4);
|
||||||
padding: var(--unit-size);
|
padding: var(--unit-size);
|
||||||
}
|
}
|
||||||
.notes-wrap .timeline-nav {
|
.notes-wrap .timeline-nav {
|
||||||
order: 2;
|
order: 3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
}
|
|
||||||
.notes-wrap .timeline-nav .notices div {
|
|
||||||
background-color: var(--bg4);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
padding: var(--unit-size);
|
|
||||||
margin-top: var(--unit-size);
|
margin-top: var(--unit-size);
|
||||||
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div {
|
||||||
|
background-color: var(--bg2);
|
||||||
|
padding: var(--unit-size);
|
||||||
|
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div:last-child {
|
||||||
|
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
|
||||||
|
}
|
||||||
.notes-wrap .main-nav {
|
.notes-wrap .main-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: var(--unit-size);
|
font-size: var(--unit-size);
|
||||||
|
@ -57,28 +57,40 @@
|
|||||||
transition: all 0.8s ease;
|
transition: all 0.8s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.notes div div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.notes-wrap {
|
.notes-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: var(--medium-size);
|
font-size: var(--medium-size);
|
||||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||||
background-color: var(--bg3);
|
background-color: var(--bg4);
|
||||||
padding: 2%;
|
padding: var(--unit-size);
|
||||||
}
|
}
|
||||||
.notes-wrap .timeline-nav {
|
.notes-wrap .timeline-nav {
|
||||||
order: 2;
|
order: 3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
}
|
|
||||||
.notes-wrap .timeline-nav .notices div {
|
|
||||||
background-color: var(--bg4);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
padding: var(--unit-size);
|
|
||||||
margin-top: var(--unit-size);
|
margin-top: var(--unit-size);
|
||||||
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div {
|
||||||
|
background-color: var(--bg2);
|
||||||
|
padding: var(--unit-size);
|
||||||
|
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.notes-wrap .timeline-nav .notes > div:last-child {
|
||||||
|
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
|
||||||
|
}
|
||||||
.notes-wrap .main-nav {
|
.notes-wrap .main-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: var(--unit-size);
|
font-size: var(--unit-size);
|
||||||
|
@ -59,11 +59,10 @@
|
|||||||
<div class="notes">
|
<div class="notes">
|
||||||
{% if notes is defined %}
|
{% if notes is defined %}
|
||||||
{% for note in notes %}
|
{% for note in notes %}
|
||||||
<div>
|
<div>
|
||||||
{{ note.getContent() }}
|
<b>{{ note.getActorNickname() }}</b>
|
||||||
<br>
|
<div>{{ note.getContent() }}</div>
|
||||||
{{ note.getActorNickname() }}
|
</div>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ 'No notes here.' | trans }}
|
{{ 'No notes here.' | trans }}
|
||||||
|
Loading…
Reference in New Issue
Block a user