[UI] Polishing design, settings pages

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

View File

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

View File

@ -16,8 +16,9 @@
</div>
<div class='navbar'>
<div class="left-nav">
<hr>
<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">
<b id="nick">{{ app.user.username }}</b>
<div class="tags">

View File

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

View File

@ -23,27 +23,30 @@
{% endblock %}
<div class="content">
{% block primary_nav %}
<nav class='set-nav'>
<ul>
<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_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
</li>
</ul>
</nav>
{% endblock primary_nav %}
<div class="main">
{% block primary_nav %}
<nav class='set-nav'>
<ul>
<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_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
</li>
</ul>
</nav>
<hr>
{% endblock primary_nav %}
{% block secundary_nav %}
{% endblock secundary_nav %}
{% block secundary_nav %}
{% endblock secundary_nav %}
{% block form %}
{% endblock form %}
{% block form %}
{% endblock form %}
</div>
</div>
{% endblock body %}

View File

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

View File

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