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

[UI] Feed structure done, feed CSS work

This commit is contained in:
rainydaysavings 2020-08-15 00:40:32 +01:00 committed by Hugo Sales
parent 5f0ece177b
commit ccd6667e2c
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 115 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,85 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(5 * 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(--nav-size); margin-left: var(--nav-size);
margin-right: 0; margin-right: var(--nav-size);
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);
} }
.content div { .main-nav {
background-color: #00000050; order: 1;
padding: calc(2*var(--unit-size)); display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
flex: 1;
background-color: var(--bg1);
padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; font-family: var(--head-font);
}
.main-nav ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%; width: 100%;
margin-top: var(--unit-size); margin-left: calc(2 * var(--side-margin));
margin-left: var(--side-margin); margin-right: calc(2 * var(--side-margin));
margin-right: var(--side-margin); padding: 0;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); }
.main-nav li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
}
.active {
color: var(--fg) !important;
font-weight: 700;
}
.main-nav a {
color: var(--accent);
}
.main-nav a:hover {
color: var(--fg);
transition: all 0.8s ease;
}
.notices {
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: var(--unit-size);
}
.notices .timeline-nav {
order: 2;
width: 100%;
box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
}
.notices .timeline-nav .notices div {
background-color: var(--bg4);
box-shadow: var(--shadow);
padding: var(--unit-size);
margin-top: var(--unit-size);
border-radius: var(--unit-size);
width: 100%;
}
.notices .main-nav {
width: 100%;
font-size: var(--unit-size);
} }

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

@ -21,13 +21,48 @@
{% block body %} {% block body %}
<div class="content"> <div class="content">
{% if notices is defined %} <div class="main">
{% for notice in notices %} <nav class='main-nav'>
<div> {{notice}} </div> <ul>
{% endfor %} <li>
{% else %} <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
No notices here. </li>
{% endif %} <li>
<a href="#">Groups</a>
</li>
<li>
<a href="#">People</a>
</li>
</ul>
</nav>
<hr>
<div class="notices">
<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-nav">
<div class="notices">
{% if notices is defined %}
{% for notice in notices %}
<div> {{notice}} </div>
{% endfor %}
{% else %}
No notices here.
{% endif %}
</div>
</div>
</div>
</div>
</div> </div>
{% endblock body %} {% endblock body %}