[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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.notes div div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notes-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--medium-size);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
background-color: var(--bg3);
|
||||
background-color: var(--bg4);
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
@ -70,15 +80,18 @@
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
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);
|
||||
}
|
||||
.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);
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: var(--unit-size);
|
||||
|
@ -57,28 +57,40 @@
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.notes div div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notes-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--medium-size);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
background-color: var(--bg3);
|
||||
background-color: var(--bg4);
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
order: 2;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
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);
|
||||
}
|
||||
.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);
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: var(--unit-size);
|
||||
|
@ -57,28 +57,40 @@
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.notes div div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notes-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--medium-size);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
background-color: var(--bg3);
|
||||
padding: 2%;
|
||||
background-color: var(--bg4);
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
order: 2;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
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);
|
||||
}
|
||||
.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);
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: var(--unit-size);
|
||||
|
@ -59,11 +59,10 @@
|
||||
<div class="notes">
|
||||
{% if notes is defined %}
|
||||
{% for note in notes %}
|
||||
<div>
|
||||
{{ note.getContent() }}
|
||||
<br>
|
||||
{{ note.getActorNickname() }}
|
||||
</div>
|
||||
<div>
|
||||
<b>{{ note.getActorNickname() }}</b>
|
||||
<div>{{ note.getContent() }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{{ 'No notes here.' | trans }}
|
||||
|
Loading…
Reference in New Issue
Block a user