[UI] Finalizing timeline structure and CSS
This commit is contained in:
rainydaysavings
parent
33832297bd
commit
2c59dcefcf
GPG Key ID:
7D0C7EAFC9D835A0
@ -5,7 +5,7 @@
|
||||
|
||||
/* font and margin sizes */
|
||||
--main-size: 1.2em;
|
||||
--medium-size: 0.8em;
|
||||
--medium-size: 0.75em;
|
||||
--small-size: 0.65em;
|
||||
--unit-size: 1em;
|
||||
--side-margin: 2em;
|
||||
@ -14,17 +14,19 @@
|
||||
/* colours and shadows */
|
||||
--fg: #eceff4;
|
||||
--accent: #81a1c1;
|
||||
--accent-low: #81a1c140;
|
||||
--bg1: #2e3440;
|
||||
--bg2: #3b4252;
|
||||
--bg3: #434c5e;
|
||||
--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 */
|
||||
body,
|
||||
html {
|
||||
background: var(--bg4);
|
||||
background: var(--bg1);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
color: var(--fg);
|
||||
@ -36,7 +38,7 @@ html {
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
color: var(--accent-low);
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -83,9 +85,12 @@ b {
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--bg1);
|
||||
box-shadow: var(--shadow);
|
||||
padding: var(--main-size);
|
||||
height: var(--main-size);
|
||||
margin-left: -1px;
|
||||
margin-right: 1px;
|
||||
margin-top: -1px;
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
#top {
|
||||
@ -169,6 +174,7 @@ b {
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
z-index: 0;
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
/* font and margin sizes */
|
||||
--main-size: 1.2em;
|
||||
--medium-size: 0.85em;
|
||||
--medium-size: 0.75em;
|
||||
--small-size: 0.65em;
|
||||
--unit-size: 1em;
|
||||
--side-margin: 5em;
|
||||
@ -14,17 +14,19 @@
|
||||
/* colours and shadows */
|
||||
--fg: #eceff4;
|
||||
--accent: #81a1c1;
|
||||
--accent-low: #81a1c140;
|
||||
--bg1: #2e3440;
|
||||
--bg2: #3b4252;
|
||||
--bg3: #434c5e;
|
||||
--bg4: #4c566a;
|
||||
--bg5: #d8dee9;
|
||||
--shadow: 0px 0px 40px 0px rgba(46,52,64,0.95);
|
||||
}
|
||||
|
||||
/* DEFAULTS */
|
||||
body,
|
||||
html {
|
||||
background: var(--bg4);
|
||||
background: var(--bg1);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
color: var(--fg);
|
||||
@ -34,11 +36,6 @@ html {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
ul {
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
@ -88,6 +85,10 @@ b {
|
||||
box-shadow: var(--shadow);
|
||||
padding: var(--main-size);
|
||||
height: var(--main-size);
|
||||
border: solid 1px var(--accent-low);
|
||||
margin-left: -1px;
|
||||
margin-right: 1px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
#top {
|
||||
@ -199,6 +200,7 @@ b {
|
||||
position: fixed;
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
/* font and margin sizes */
|
||||
--main-size: 1.2em;
|
||||
--medium-size: 0.8em;
|
||||
--medium-size: 0.7em;
|
||||
--small-size: 0.65em;
|
||||
--unit-size: 1em;
|
||||
--side-margin: 2em;
|
||||
@ -18,13 +18,14 @@
|
||||
--bg2: #3b4252;
|
||||
--bg3: #434c5e;
|
||||
--bg4: #4c566a;
|
||||
--bg5: #d8dee9;
|
||||
--shadow: 0px 0px 40px 0px rgba(46,52,64,0.95);
|
||||
}
|
||||
|
||||
/* DEFAULTS */
|
||||
body,
|
||||
html {
|
||||
background: var(--bg4);
|
||||
background: var(--bg1);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
color: var(--fg);
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
border: solid 1px var(--accent-low);
|
||||
margin-left: -1px;
|
||||
}
|
||||
/* left navigation */
|
||||
.navbar .left-nav {
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
position: fixed;
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
margin-left: -1px;
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
.navbar {
|
||||
left: -100%;
|
||||
|
||||
@ -12,8 +12,10 @@
|
||||
width: 100%;
|
||||
margin-left: var(--unit-size);
|
||||
margin-right: var(--unit-size);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
margin-top: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
@ -26,6 +28,7 @@
|
||||
padding: var(--medium-size);
|
||||
font-size: var(--medium-size);
|
||||
font-family: var(--head-font);
|
||||
border-radius: var(--small-size) var(--small-size) 0 0;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
@ -57,39 +60,32 @@
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* notices */
|
||||
.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(--bg4);
|
||||
padding: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
box-shadow: var(--shadow);
|
||||
margin: var(--unit-size);
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
.notes-wrap .timeline {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
.notes-wrap .timeline-nav .notes > div {
|
||||
background-color: var(--bg2);
|
||||
padding: var(--unit-size);
|
||||
.notes-wrap .timeline .notes > div {
|
||||
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
|
||||
border-radius: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
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);
|
||||
}
|
||||
.notes-wrap .main-nav {
|
||||
@ -97,11 +93,71 @@
|
||||
font-size: var(--unit-size);
|
||||
}
|
||||
|
||||
/* TODO FIX THIS */
|
||||
.notes-wrap .note-post {
|
||||
order: 2;
|
||||
.notice {
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.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 {
|
||||
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%;
|
||||
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);
|
||||
}
|
||||
@ -4,16 +4,18 @@
|
||||
margin-top: calc(4 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: var(--unit-size);
|
||||
margin-right: var(--unit-size);
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
.content .main {
|
||||
width: 100%;
|
||||
margin-left: var(--unit-size);
|
||||
margin-right: var(--unit-size);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-top: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
@ -26,6 +28,7 @@
|
||||
padding: var(--medium-size);
|
||||
font-size: var(--medium-size);
|
||||
font-family: var(--head-font);
|
||||
border-radius: var(--small-size) var(--small-size) 0 0;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
@ -33,8 +36,8 @@
|
||||
align-items: stretch;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
margin-left: calc(2 * var(--side-margin));
|
||||
margin-right: calc(2 * var(--side-margin));
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
padding: 0;
|
||||
}
|
||||
.main-nav li {
|
||||
@ -57,38 +60,32 @@
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
/* notices */
|
||||
.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(--bg4);
|
||||
padding: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
box-shadow: var(--shadow);
|
||||
margin: var(--unit-size);
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
.notes-wrap .timeline {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
.notes-wrap .timeline-nav .notes > div {
|
||||
background-color: var(--bg2);
|
||||
padding: var(--unit-size);
|
||||
.notes-wrap .timeline .notes > div {
|
||||
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
|
||||
border-radius: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
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);
|
||||
}
|
||||
.notes-wrap .main-nav {
|
||||
@ -96,11 +93,71 @@
|
||||
font-size: var(--unit-size);
|
||||
}
|
||||
|
||||
/* TODO FIX THIS */
|
||||
.notes-wrap .note-post {
|
||||
order: 2;
|
||||
.notice {
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.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 {
|
||||
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%;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size) + 2%);
|
||||
margin-top: calc(4 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 2%;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
.content .main {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 0 0 var(--unit-size) var(--unit-size);
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-top: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
@ -26,6 +28,7 @@
|
||||
padding: var(--medium-size);
|
||||
font-size: var(--medium-size);
|
||||
font-family: var(--head-font);
|
||||
border-radius: var(--small-size) var(--small-size) 0 0;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
@ -33,8 +36,8 @@
|
||||
align-items: stretch;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
margin-left: var(--unit-size);
|
||||
margin-right: var(--unit-size);
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
padding: 0;
|
||||
}
|
||||
.main-nav li {
|
||||
@ -57,50 +60,104 @@
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
/* notices */
|
||||
.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(--bg4);
|
||||
padding: var(--unit-size);
|
||||
border-radius: var(--small-size);
|
||||
background-color: var(--bg3);
|
||||
box-shadow: var(--shadow);
|
||||
margin: 2%;
|
||||
border: solid 2px var(--accent-low);
|
||||
}
|
||||
.notes-wrap .timeline-nav {
|
||||
.notes-wrap .timeline {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 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);
|
||||
.notes-wrap .timeline .notes > div {
|
||||
margin: 2% 2% 0 2%;
|
||||
border-radius: var(--small-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 .timeline .notes > div:last-child {
|
||||
margin: 2%;
|
||||
}
|
||||
.notes-wrap .main-nav {
|
||||
width: 100%;
|
||||
font-size: var(--unit-size);
|
||||
}
|
||||
|
||||
/* TODO FIX THIS */
|
||||
.notes-wrap .note-post {
|
||||
order: 2;
|
||||
.notice {
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.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 {
|
||||
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%;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -69,7 +69,6 @@
|
||||
<label for="toggle-right" id='right-panel'></label>
|
||||
</div>
|
||||
<div class='rss'>
|
||||
<hr>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<div class="left-nav">
|
||||
<hr>
|
||||
<div class='profile'>
|
||||
<a href="{{ path('settings_avatar') }}">
|
||||
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
|
||||
|
||||
@ -8,9 +8,12 @@
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ 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_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)">
|
||||
<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_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 %}
|
||||
|
||||
{% block header %}
|
||||
@ -23,6 +26,11 @@
|
||||
|
||||
{% block body %}
|
||||
<div class="content">
|
||||
{% if post_form is defined %}
|
||||
<div class="note-post">
|
||||
{{ form(post_form) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="main">
|
||||
<nav class='main-nav'>
|
||||
<ul>
|
||||
@ -37,7 +45,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<hr>
|
||||
<div class="notes-wrap">
|
||||
<nav class='main-nav'>
|
||||
<ul>
|
||||
@ -52,19 +59,19 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% if post_form is defined %}
|
||||
<div class="note-post">
|
||||
{{ form(post_form) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="timeline-nav">
|
||||
<div class="timeline">
|
||||
<div class="notes">
|
||||
{% if notes is defined and notes is not empty %}
|
||||
{% for note in notes %}
|
||||
<div>
|
||||
<img src="{{ note.getAvatarUrl() }}" alt="{{ note.getActorNickname() }}'s avatar" width="64px">
|
||||
<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>{{ note.getContent() }}</div>
|
||||
</div>
|
||||
<div class="notice-content">
|
||||
{{ note.getContent() }}
|
||||
{% set id = note.getId() - 1 %}
|
||||
{% for attachment in attachments[id] %}
|
||||
<div>
|
||||
@ -72,14 +79,16 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="notice-actions">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{{ 'No notes here.' | trans }}
|
||||
<h1>{% trans %}No notes here.{% endtrans %}</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</hr>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user