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

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

16
public/assets/css/base_mid.css
View File

@ -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
public/assets/css/base_small.css
View File

@ -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);

2
public/assets/css/left/left.css
View File

@ -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 {

2
public/assets/css/left/left_mid.css
View File

@ -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%;

100
public/assets/css/network/public.css
View File

@ -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);
}

111
public/assets/css/network/public_mid.css
View File

@ -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);
}

119
public/assets/css/network/public_small.css
View File

@ -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);
}

1
templates/base.html.twig
View File

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

1
templates/left/left.html.twig
View File

@ -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">

125
templates/network/public.html.twig
View File

@ -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 %}
@ -22,66 +25,72 @@
{% endblock %}
{% block body %}
<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>
<div class="content">
{% if post_form is defined %}
<div class="note-post">
{{ form(post_form) }}
</div>
<div class="note-post">
{{ form(post_form) }}
</div>
{% endif %}
<div class="timeline-nav">
<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">
<b>{{ note.getActorNickname() }}</b>
<div>{{ note.getContent() }}</div>
{% set id = note.getId() - 1 %}
{% for attachment in attachments[id] %}
<div>
<i> {{ attachment.getTitle() }} </i>
<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>
<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>
{% endfor %}
</div>
{% endfor %}
{% else %}
{{ 'No notes here.' | trans }}
{% endif %}
</div>
</div>
</div>
</div>
</hr>
</div>
</div>
</div>
{% endblock body %}
{% block javascripts %}{% endblock %}