[UI] Finalizing timeline structure and CSS

This commit is contained in:
rainydaysavings 2020-08-20 04:26:12 +01:00 committed by Hugo Sales
parent 33832297bd
commit 2c59dcefcf
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
11 changed files with 344 additions and 154 deletions

View File

@ -5,7 +5,7 @@
/* font and margin sizes */ /* font and margin sizes */
--main-size: 1.2em; --main-size: 1.2em;
--medium-size: 0.8em; --medium-size: 0.75em;
--small-size: 0.65em; --small-size: 0.65em;
--unit-size: 1em; --unit-size: 1em;
--side-margin: 2em; --side-margin: 2em;
@ -14,17 +14,19 @@
/* colours and shadows */ /* colours and shadows */
--fg: #eceff4; --fg: #eceff4;
--accent: #81a1c1; --accent: #81a1c1;
--accent-low: #81a1c140;
--bg1: #2e3440; --bg1: #2e3440;
--bg2: #3b4252; --bg2: #3b4252;
--bg3: #434c5e; --bg3: #434c5e;
--bg4: #4c566a; --bg4: #4c566a;
--shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); --bg5: #d8dee9;
--shadow: 0px 0px 20px 0px rgba(46,52,64,0.95);
} }
/* DEFAULTS */ /* DEFAULTS */
body, body,
html { html {
background: var(--bg4); background: var(--bg1);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
color: var(--fg); color: var(--fg);
@ -36,7 +38,7 @@ html {
hr { hr {
margin: 0; margin: 0;
color: var(--accent); color: var(--accent-low);
} }
ul { ul {
@ -83,9 +85,12 @@ b {
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--bg1); background-color: var(--bg1);
box-shadow: var(--shadow);
padding: var(--main-size); padding: var(--main-size);
height: var(--main-size); height: var(--main-size);
margin-left: -1px;
margin-right: 1px;
margin-top: -1px;
border: solid 1px var(--accent-low);
} }
#top { #top {
@ -169,6 +174,7 @@ b {
background-color: var(--bg1); background-color: var(--bg1);
margin-top: calc(3 * var(--main-size)); margin-top: calc(3 * var(--main-size));
z-index: 0; z-index: 0;
border: solid 1px var(--accent-low);
} }
input.larger { input.larger {

View File

@ -5,7 +5,7 @@
/* font and margin sizes */ /* font and margin sizes */
--main-size: 1.2em; --main-size: 1.2em;
--medium-size: 0.85em; --medium-size: 0.75em;
--small-size: 0.65em; --small-size: 0.65em;
--unit-size: 1em; --unit-size: 1em;
--side-margin: 5em; --side-margin: 5em;
@ -14,17 +14,19 @@
/* colours and shadows */ /* colours and shadows */
--fg: #eceff4; --fg: #eceff4;
--accent: #81a1c1; --accent: #81a1c1;
--accent-low: #81a1c140;
--bg1: #2e3440; --bg1: #2e3440;
--bg2: #3b4252; --bg2: #3b4252;
--bg3: #434c5e; --bg3: #434c5e;
--bg4: #4c566a; --bg4: #4c566a;
--bg5: #d8dee9;
--shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); --shadow: 0px 0px 40px 0px rgba(46,52,64,0.95);
} }
/* DEFAULTS */ /* DEFAULTS */
body, body,
html { html {
background: var(--bg4); background: var(--bg1);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
color: var(--fg); color: var(--fg);
@ -34,11 +36,6 @@ html {
padding: 0; padding: 0;
} }
hr {
margin: 0;
color: var(--accent);
}
ul { ul {
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
@ -88,6 +85,10 @@ b {
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: var(--main-size); padding: var(--main-size);
height: var(--main-size); height: var(--main-size);
border: solid 1px var(--accent-low);
margin-left: -1px;
margin-right: 1px;
margin-top: -1px;
} }
#top { #top {
@ -199,6 +200,7 @@ b {
position: fixed; position: fixed;
background-color: var(--bg1); background-color: var(--bg1);
margin-top: calc(3 * var(--main-size)); margin-top: calc(3 * var(--main-size));
border: solid 1px var(--accent-low);
} }
input.larger { input.larger {

View File

@ -5,7 +5,7 @@
/* font and margin sizes */ /* font and margin sizes */
--main-size: 1.2em; --main-size: 1.2em;
--medium-size: 0.8em; --medium-size: 0.7em;
--small-size: 0.65em; --small-size: 0.65em;
--unit-size: 1em; --unit-size: 1em;
--side-margin: 2em; --side-margin: 2em;
@ -18,13 +18,14 @@
--bg2: #3b4252; --bg2: #3b4252;
--bg3: #434c5e; --bg3: #434c5e;
--bg4: #4c566a; --bg4: #4c566a;
--bg5: #d8dee9;
--shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); --shadow: 0px 0px 40px 0px rgba(46,52,64,0.95);
} }
/* DEFAULTS */ /* DEFAULTS */
body, body,
html { html {
background: var(--bg4); background: var(--bg1);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
color: var(--fg); color: var(--fg);

View File

@ -9,6 +9,8 @@
left: 0; left: 0;
top: 0; top: 0;
transition: 0.3s ease; transition: 0.3s ease;
border: solid 1px var(--accent-low);
margin-left: -1px;
} }
/* left navigation */ /* left navigation */
.navbar .left-nav { .navbar .left-nav {

View File

@ -6,6 +6,8 @@
position: fixed; position: fixed;
background-color: var(--bg1); background-color: var(--bg1);
margin-top: calc(3 * var(--main-size)); margin-top: calc(3 * var(--main-size));
margin-left: -1px;
border: solid 1px var(--accent-low);
} }
.navbar { .navbar {
left: -100%; left: -100%;

View File

@ -12,8 +12,10 @@
width: 100%; width: 100%;
margin-left: var(--unit-size); margin-left: var(--unit-size);
margin-right: var(--unit-size); margin-right: var(--unit-size);
box-shadow: var(--shadow); margin-top: var(--unit-size);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: var(--small-size);
background-color: var(--bg3);
border: solid 2px var(--accent-low);
} }
.main-nav { .main-nav {
@ -26,6 +28,7 @@
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--small-size) var(--small-size) 0 0;
} }
.main-nav ul { .main-nav ul {
@ -57,39 +60,32 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/* notices */
.notes { .notes {
display: flex; display: flex;
flex-wrap: wrap; 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: var(--small-size);
background-color: var(--bg4); background-color: var(--bg3);
padding: var(--unit-size); box-shadow: var(--shadow);
margin: var(--unit-size);
border: solid 2px var(--accent-low);
} }
.notes-wrap .timeline-nav { .notes-wrap .timeline {
order: 3; order: 3;
width: 100%; width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size);
margin-top: var(--unit-size);
} }
.notes-wrap .timeline-nav .notes > div { .notes-wrap .timeline .notes > div {
background-color: var(--bg2);
padding: var(--unit-size);
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--small-size);
width: 100%; width: 100%;
} }
.notes-wrap .timeline-nav .notes > div:last-child { .notes-wrap .timeline .notes > div:last-child {
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
} }
.notes-wrap .main-nav { .notes-wrap .main-nav {
@ -97,11 +93,71 @@
font-size: var(--unit-size); font-size: var(--unit-size);
} }
/* TODO FIX THIS */ .notice {
.notes-wrap .note-post { display: flex;
order: 2; flex-wrap: wrap;
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
.notice-info {
background-color: var(--bg1);
box-sizing: border-box;
padding: 5px;
border-radius: var(--small-size) var(--small-size) 0 0;
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 0;
width: 100%; width: 100%;
} }
.notice-info a img {
width: calc(2 * var(--unit-size));
height: auto;
}
.notice-content {
flex-grow: 1;
flex-shrink: 0;
padding: var(--small-size);
border-radius: 0 0 var(--small-size) var(--small-size);
}
/* posting form */
.note-post {
width: calc(100% - (6 * var(--unit-size)));
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
#form {
display: flex;
flex-wrap: wrap;
}
#form div {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
#form div:nth-of-type(2) {
display: flex;
justify-content: right;
}
textarea#form_content { textarea#form_content {
background-color: var(--bg3);
border-radius: var(--small-size) var(--small-size) 0 0;
color: var(--fg);
height: calc(8 * var(--unit-size));
width: 100%; width: 100%;
box-sizing: border-box;
padding: var(--unit-size);
word-wrap: break-word;
resize: vertical;
font-size: var(--unit-size);
} }
button#form_send {
color: var(--fg);
font-size: var(--small-size);
background-color: var(--bg1);
padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size);
border: solid 2px var(--accent-low);
border-radius: var(--main-size);
margin: var(--small-size);
}

View File

@ -4,16 +4,18 @@
margin-top: calc(4 * var(--main-size)); margin-top: calc(4 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: var(--unit-size); margin-left: 1%;
margin-right: var(--unit-size); margin-right: 1%;
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.content .main { .content .main {
width: 100%; width: 100%;
margin-left: var(--unit-size); margin-left: 1%;
margin-right: var(--unit-size); margin-right: 1%;
box-shadow: var(--shadow); margin-top: var(--unit-size);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: var(--small-size);
background-color: var(--bg3);
border: solid 2px var(--accent-low);
} }
.main-nav { .main-nav {
@ -26,6 +28,7 @@
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--small-size) var(--small-size) 0 0;
} }
.main-nav ul { .main-nav ul {
@ -33,8 +36,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(2 * var(--side-margin)); margin-left: 1%;
margin-right: calc(2 * var(--side-margin)); margin-right: 1%;
padding: 0; padding: 0;
} }
.main-nav li { .main-nav li {
@ -57,38 +60,32 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/* notices */
.notes { .notes {
display: flex; display: flex;
flex-wrap: wrap; 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: var(--small-size);
background-color: var(--bg4); background-color: var(--bg3);
padding: var(--unit-size); box-shadow: var(--shadow);
margin: var(--unit-size);
border: solid 2px var(--accent-low);
} }
.notes-wrap .timeline-nav { .notes-wrap .timeline {
order: 3; order: 3;
width: 100%; width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size);
margin-top: var(--unit-size);
} }
.notes-wrap .timeline-nav .notes > div { .notes-wrap .timeline .notes > div {
background-color: var(--bg2);
padding: var(--unit-size);
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--small-size);
width: 100%; width: 100%;
} }
.notes-wrap .timeline-nav .notes > div:last-child { .notes-wrap .timeline .notes > div:last-child {
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
} }
.notes-wrap .main-nav { .notes-wrap .main-nav {
@ -96,11 +93,71 @@
font-size: var(--unit-size); font-size: var(--unit-size);
} }
/* TODO FIX THIS */ .notice {
.notes-wrap .note-post { display: flex;
order: 2; flex-wrap: wrap;
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
.notice-info {
background-color: var(--bg1);
box-sizing: border-box;
padding: 5px;
border-radius: var(--small-size) var(--small-size) 0 0;
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 0;
width: 100%; width: 100%;
} }
.notice-info a img {
width: calc(2 * var(--unit-size));
height: auto;
}
.notice-content {
flex-grow: 1;
flex-shrink: 0;
padding: var(--small-size);
border-radius: 0 0 var(--small-size) var(--small-size);
}
/* posting form */
.note-post {
width: calc(100% - (6 * var(--unit-size)));
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
#form {
display: flex;
flex-wrap: wrap;
}
#form div {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
#form div:nth-of-type(2) {
display: flex;
justify-content: right;
}
textarea#form_content { textarea#form_content {
background-color: var(--bg3);
border-radius: var(--small-size) var(--small-size) 0 0;
color: var(--fg);
height: calc(8 * var(--unit-size));
width: 100%; width: 100%;
box-sizing: border-box;
padding: var(--unit-size);
word-wrap: break-word;
resize: vertical;
font-size: var(--unit-size);
}
button#form_send {
color: var(--fg);
font-size: var(--small-size);
background-color: var(--bg1);
padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size);
border: solid 2px var(--accent-low);
border-radius: var(--main-size);
margin: var(--small-size);
} }

View File

@ -1,19 +1,21 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(3 * var(--main-size) + 2%); margin-top: calc(4 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 2%; margin-left: 1%;
margin-right: 2%; margin-right: 1%;
margin-bottom: 2%; margin-bottom: var(--unit-size);
} }
.content .main { .content .main {
width: 100%; width: 100%;
margin-left: 0; margin-left: 1%;
margin-right: 0; margin-right: 1%;
box-shadow: var(--shadow); margin-top: var(--unit-size);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: var(--small-size);
background-color: var(--bg3);
border: solid 2px var(--accent-low);
} }
.main-nav { .main-nav {
@ -26,6 +28,7 @@
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--small-size) var(--small-size) 0 0;
} }
.main-nav ul { .main-nav ul {
@ -33,8 +36,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: var(--unit-size); margin-left: 1%;
margin-right: var(--unit-size); margin-right: 1%;
padding: 0; padding: 0;
} }
.main-nav li { .main-nav li {
@ -57,50 +60,104 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/* notices */
.notes { .notes {
display: flex; display: flex;
flex-wrap: wrap; 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: var(--small-size);
background-color: var(--bg4); background-color: var(--bg3);
padding: var(--unit-size); box-shadow: var(--shadow);
margin: 2%;
border: solid 2px var(--accent-low);
} }
.notes-wrap .timeline-nav { .notes-wrap .timeline {
order: 3; order: 3;
width: 100%; width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size);
margin-top: var(--unit-size);
} }
.notes-wrap .timeline-nav .notes > div { .notes-wrap .timeline .notes > div {
background-color: var(--bg2); margin: 2% 2% 0 2%;
padding: var(--unit-size); border-radius: var(--small-size);
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
border-radius: var(--unit-size);
width: 100%; width: 100%;
} }
.notes-wrap .timeline-nav .notes > div:last-child { .notes-wrap .timeline .notes > div:last-child {
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); margin: 2%;
} }
.notes-wrap .main-nav { .notes-wrap .main-nav {
width: 100%; width: 100%;
font-size: var(--unit-size); font-size: var(--unit-size);
} }
/* TODO FIX THIS */ .notice {
.notes-wrap .note-post { display: flex;
order: 2; flex-wrap: wrap;
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
.notice-info {
background-color: var(--bg1);
box-sizing: border-box;
padding: 5px;
border-radius: var(--small-size) var(--small-size) 0 0;
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 0;
width: 100%; width: 100%;
} }
.notice-info a img {
width: calc(2 * var(--unit-size));
height: auto;
}
.notice-content {
flex-grow: 1;
flex-shrink: 0;
padding: var(--small-size);
border-radius: 0 0 var(--small-size) var(--small-size);
}
/* posting form */
.note-post {
width: calc(100% - (2 * var(--unit-size)));
border: solid 2px var(--accent-low);
border-radius: var(--small-size);
}
#form {
display: flex;
flex-wrap: wrap;
}
#form div {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
#form div:nth-of-type(2) {
display: flex;
justify-content: right;
}
textarea#form_content { textarea#form_content {
background-color: var(--bg3);
border-radius: var(--small-size) var(--small-size) 0 0;
color: var(--fg);
height: calc(8 * var(--unit-size));
width: 100%; width: 100%;
box-sizing: border-box;
padding: var(--unit-size);
word-wrap: break-word;
resize: vertical;
font-size: var(--unit-size);
}
button#form_send {
color: var(--fg);
font-size: var(--small-size);
background-color: var(--bg1);
padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size);
border: solid 2px var(--accent-low);
border-radius: var(--main-size);
margin: var(--small-size);
} }

View File

@ -69,7 +69,6 @@
<label for="toggle-right" id='right-panel'></label> <label for="toggle-right" id='right-panel'></label>
</div> </div>
<div class='rss'> <div class='rss'>
<hr>
<div> <div>
</div> </div>
</div> </div>

View File

@ -16,7 +16,6 @@
</div> </div>
<div class='navbar'> <div class='navbar'>
<div class="left-nav"> <div class="left-nav">
<hr>
<div class='profile'> <div class='profile'>
<a href="{{ path('settings_avatar') }}"> <a href="{{ path('settings_avatar') }}">
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar"> <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">

View File

@ -8,9 +8,12 @@
{% block stylesheets %} {% block stylesheets %}
{{ parent() }} {{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}" media="screen and (min-width: 1300px)"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}" media="screen and (max-width: 1300px)"> media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}" media="screen and (max-width: 750px)"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %} {% endblock %}
{% block header %} {% block header %}
@ -22,66 +25,72 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="content"> <div class="content">
<div class="main">
<nav class='main-nav'>
<ul>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
</li>
<li>
<a href="#">Groups</a>
</li>
<li>
<a href="#">People</a>
</li>
</ul>
</nav>
<hr>
<div class="notes-wrap">
<nav class='main-nav'>
<ul>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Network</a>
</li>
</ul>
</nav>
{% if post_form is defined %} {% if post_form is defined %}
<div class="note-post"> <div class="note-post">
{{ form(post_form) }} {{ form(post_form) }}
</div> </div>
{% endif %} {% endif %}
<div class="timeline-nav"> <div class="main">
<div class="notes"> <nav class='main-nav'>
{% if notes is defined and notes is not empty %} <ul>
{% for note in notes %} <li>
<div> <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
<img src="{{ note.getAvatarUrl() }}" alt="{{ note.getActorNickname() }}'s avatar" width="64px"> </li>
<b>{{ note.getActorNickname() }}</b> <li>
<div>{{ note.getContent() }}</div> <a href="#">Groups</a>
{% set id = note.getId() - 1 %} </li>
{% for attachment in attachments[id] %} <li>
<div> <a href="#">People</a>
<i> {{ attachment.getTitle() }} </i> </li>
</ul>
</nav>
<div class="notes-wrap">
<nav class='main-nav'>
<ul>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Network</a>
</li>
</ul>
</nav>
<div class="timeline">
<div class="notes">
{% if notes is defined and notes is not empty %}
{% for note in notes %}
<div class="notice">
<div class="notice-info">
<a href="{{ path('settings_avatar') }}">
<img src="{{ note.getAvatarUrl() }}" alt="{{ note.getActorNickname() }}'s avatar">
</a>
<b>{{ note.getActorNickname() }}</b>
</div>
<div class="notice-content">
{{ note.getContent() }}
{% set id = note.getId() - 1 %}
{% for attachment in attachments[id] %}
<div>
<i> {{ attachment.getTitle() }} </i>
</div>
{% endfor %}
</div>
<div class="notice-actions">
</div>
</div>
{% endfor %}
{% else %}
<h1>{% trans %}No notes here.{% endtrans %}</h1>
{% endif %}
</div> </div>
{% endfor %}
</div> </div>
{% endfor %} </div>
{% else %}
{{ 'No notes here.' | trans }}
{% endif %}
</div>
</div> </div>
</div> </div>
</hr>
</div>
</div>
{% endblock body %} {% endblock body %}
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}