eliseuamaro
/
gnu-social
forked from GNUsocial/gnu-social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[UI] Polishing design, settings pages

This commit is contained in:
rainydaysavings 2020-08-15 00:39:32 +01:00 committed by Hugo Sales
parent 46eaccb4b0
commit 5f0ece177b
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
6 changed files with 114 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
public/assets/css/settings/settings.css
View File

@ -1,21 +1,29 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(3 * 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); margin-bottom: var(--unit-size);
} }
.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);
}
.set-nav { .set-nav {
order: 1; order: 1;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; flex: 1;
background-color: var(--bg5); background-color: var(--bg1);
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);
@ -52,81 +60,40 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.set-nav2 {
order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background-color: var(--bg5);
padding: var(--medium-size);
margin-top: calc(2 * var(--unit-size));
margin-left: var(--side-margin);
margin-right: var(--side-margin);
font-size: var(--medium-size);
font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0;
}
.set-nav2 ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: calc(2 * var(--side-margin));
margin-right: calc(2 * var(--side-margin));
padding: 0;
}
.set-nav2 li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
}
.active { .active {
color: var(--fg) !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.set-nav2 a { .secundary {
color: var(--accent); display: flex;
} flex-wrap: wrap;
border-radius: 0 0 var(--unit-size) var(--unit-size);
.set-nav2 a:hover { background-color: var(--bg3);
color: var(--fg); padding: var(--unit-size);
transition: all 0.8s ease;
} }
.form { .form {
order: 3; order: 3;
background-color: var(--bg5); background-color: var(--bg3);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
.form-single { .form-single {
order: 3; order: 2;
background-color: var(--bg5); background-color: var(--bg3);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
margin-top: calc(2 * var(--unit-size));
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { label {
display: inline-block; display: inline-block;
@ -138,7 +105,8 @@ label {
input[type=text] { input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -168,7 +136,8 @@ button[type=submit] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
height: calc(10 * var(--unit-size)); height: calc(10 * var(--unit-size));
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -181,7 +150,8 @@ button[type=submit] {
#form_phone_number { #form_phone_number {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -191,7 +161,8 @@ button[type=submit] {
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -273,17 +244,14 @@ input[type=radio] {
#form-tabs { #form-tabs {
order: 2; order: 2;
margin-top: var(--side-margin);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%; width: 100%;
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form-tabs ul { #form-tabs ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg5); background-color: var(--bg1);
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -300,7 +268,7 @@ input[type=radio] {
#form-tabs ul .form { #form-tabs ul .form {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
background-color: #00000000 !important; background-color: var(--bg3) !important;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;

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

@ -16,8 +16,9 @@
</div> </div>
<div class='navbar'> <div class='navbar'>
<div class="left-nav"> <div class="left-nav">
<hr>
<div class='profile'> <div class='profile'>
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar"> <img src='{{ asset('assets/default-avatar.svg') }}' alt="Your avatar." class="icon icon-avatar">
<div class="info"> <div class="info">
<b id="nick">{{ app.user.username }}</b> <b id="nick">{{ app.user.username }}</b>
<div class="tags"> <div class="tags">

5
templates/settings/account.html.twig
View File

@ -5,15 +5,18 @@
{% block body %} {% block body %}
<div class='content'> <div class='content'>
<div class="main">
{% block primary_nav %} {% block primary_nav %}
{{ parent() }} {{ parent() }}
{% endblock primary_nav %} {% endblock primary_nav %}
<div class="secundary">
{% block form %} {% block form %}
<div class='form-single'> <div class='form-single'>
{{ form(acc) }} {{ form(acc) }}
</div> </div>
{% endblock form %} {% endblock form %}
</div> </div>
</div>
</div>
{% endblock body %} {% endblock body %}

3
templates/settings/base.html.twig
View File

@ -23,6 +23,7 @@
{% endblock %} {% endblock %}
<div class="content"> <div class="content">
<div class="main">
{% block primary_nav %} {% block primary_nav %}
<nav class='set-nav'> <nav class='set-nav'>
<ul> <ul>
@ -37,6 +38,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<hr>
{% endblock primary_nav %} {% endblock primary_nav %}
{% block secundary_nav %} {% block secundary_nav %}
@ -45,6 +47,7 @@
{% block form %} {% block form %}
{% endblock form %} {% endblock form %}
</div> </div>
</div>
{% endblock body %} {% endblock body %}
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}

4
templates/settings/notifications.html.twig
View File

@ -8,10 +8,12 @@
{% block body %} {% block body %}
<div class='content'> <div class='content'>
<div class="main">
{% block primary_nav %} {% block primary_nav %}
{{ parent() }} {{ parent() }}
{% endblock primary_nav %} {% endblock primary_nav %}
<div class="secundary">
{% block form %} {% block form %}
<div id='form-tabs'> <div id='form-tabs'>
<ul> <ul>
@ -28,5 +30,7 @@
</div> </div>
{% endblock form %} {% endblock form %}
</div> </div>
</div>
</div>
{% endblock body %} {% endblock body %}

8
templates/settings/profile.html.twig
View File

@ -3,14 +3,15 @@
{% block title %}Profile Settings{% endblock %} {% block title %}Profile Settings{% endblock %}
{% block body %} {% block body %}
<div class='content'> <div class='content'>
<div class="main">
{% block primary_nav %} {% block primary_nav %}
{{ parent() }} {{ parent() }}
{% endblock primary_nav %} {% endblock primary_nav %}
<div class="secundary">
{% block secundary_nav %} {% block secundary_nav %}
<nav class='set-nav2'> <nav class='set-nav'>
<ul> <ul>
{# {% for tab in tabs %} #} {# {% for tab in tabs %} #}
{# {% endfor %} #} {# {% endfor %} #}
@ -31,6 +32,7 @@
{{ form(prof) }} {{ form(prof) }}
</div> </div>
{% endblock form %} {% endblock form %}
</div>
</div>
</div> </div>
{% endblock body %} {% endblock body %}