[UI] Polishing design, settings pages
This commit is contained in:
rainydaysavings
parent
46eaccb4b0
commit
5f0ece177b
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue