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

[UI] Polishing design, settings pages

Browse Source
This commit is contained in:
rainydaysavings 2020-08-15 00:39:32 +01:00 committed by Hugo Sales
parent 648a911055
commit 4d00a0f6dd
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">

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

@ -4,16 +4,19 @@
{% 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 %}

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

@ -23,27 +23,30 @@
{% endblock %} {% endblock %}
<div class="content"> <div class="content">
{% block primary_nav %} <div class="main">
<nav class='set-nav'> {% block primary_nav %}
<ul> <nav class='set-nav'>
<li> <ul>
<a href="{{ path('settings_personal_info') }}" class='hover-effect {{ active('settings_personal_info', 'settings_avatar') }}'>Profile</a> <li>
</li> <a href="{{ path('settings_personal_info') }}" class='hover-effect {{ active('settings_personal_info', 'settings_avatar') }}'>Profile</a>
<li> </li>
<a href="{{ path('settings_account') }}" class='hover-effect {{ active('settings_account') }}'>Account</a> <li>
</li> <a href="{{ path('settings_account') }}" class='hover-effect {{ active('settings_account') }}'>Account</a>
<li> </li>
<a href="{{ path('settings_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a> <li>
</li> <a href="{{ path('settings_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
</ul> </li>
</nav> </ul>
{% endblock primary_nav %} </nav>
<hr>
{% endblock primary_nav %}
{% block secundary_nav %} {% block secundary_nav %}
{% endblock secundary_nav %} {% endblock secundary_nav %}
{% block form %} {% block form %}
{% endblock form %} {% endblock form %}
</div>
</div> </div>
{% endblock body %} {% endblock body %}

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

@ -8,25 +8,29 @@
{% block body %} {% block body %}
<div class='content'> <div class='content'>
{% block primary_nav %} <div class="main">
{{ parent() }} {% block primary_nav %}
{% endblock primary_nav %} {{ parent() }}
{% endblock primary_nav %}
{% block form %} <div class="secundary">
<div id='form-tabs'> {% block form %}
<ul> <div id='form-tabs'>
{% for transport, form in tabbed_forms %} <ul>
<input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}> {% for transport, form in tabbed_forms %}
<label for="toggle-{{ transport }}" id='tabs'> <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
{{ transport }} <label for="toggle-{{ transport }}" id='tabs'>
</label> {{ transport }}
<div id="form_{{ transport }}" class='form'> </label>
{{ form(form) }} <div id="form_{{ transport }}" class='form'>
</div> {{ form(form) }}
{% endfor %} </div>
</ul> {% endfor %}
</ul>
</div>
{% endblock form %}
</div> </div>
{% endblock form %} </div>
</div> </div>
{% endblock body %} {% endblock body %}

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

@ -3,34 +3,36 @@
{% block title %}Profile Settings{% endblock %} {% block title %}Profile Settings{% endblock %}
{% block body %} {% block body %}
<div class='content'> <div class='content'>
{% block primary_nav %} <div class="main">
{{ parent() }} {% block primary_nav %}
{% endblock primary_nav %} {{ parent() }}
{% endblock primary_nav %}
{% block secundary_nav %} <div class="secundary">
<nav class='set-nav2'> {% block secundary_nav %}
<ul> <nav class='set-nav'>
{# {% for tab in tabs %} #} <ul>
{# {% endfor %} #} {# {% for tab in tabs %} #}
{# {% endfor %} #}
<li> <li>
<a href="{{ path('settings_personal_info') }}" <a href="{{ path('settings_personal_info') }}"
class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a> class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a>
</li> </li>
<li> <li>
<a href="{{ path('settings_avatar') }}" class='hover-effect {{ active('settings_avatar') }}'>Avatar</a> <a href="{{ path('settings_avatar') }}" class='hover-effect {{ active('settings_avatar') }}'>Avatar</a>
</li> </li>
</ul> </ul>
</nav> </nav>
{% endblock secundary_nav %} {% endblock secundary_nav %}
{% block form %} {% block form %}
<div class='form'> <div class='form'>
{{ form(prof) }} {{ form(prof) }}
</div>
{% endblock form %}
</div> </div>
{% endblock form %} </div>
</div> </div>
{% endblock body %} {% endblock body %}