[TWIG][SETTINGS] WIP. Settings navigation early sketch.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -360,4 +360,16 @@ figcaption a:link {
         opacity: unset;
         transform: none;
     }
+}
+
+@keyframes fadeOut {
+    100% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    0% {
+        opacity: unset;
+        transform: none;
+    }
 }

public/assets/css/reset.css

@@ -61,7 +61,6 @@ details > summary::-webkit-details-marker {
 
 /* have IE ignore the detail elements altogether */
 @supports not (-ms-ime-align: auto) {
-
     details summary {
         cursor: pointer;
     }

public/assets/css/settings/settings.css

@@ -1,307 +1,87 @@
-.content {
+.main-nav {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(4 * var(--main-size));
-    justify-content: center;
-    align-items: center;
-    margin-left: var(--nav-size);
-    margin-right: var(--nav-size);
     margin-bottom: var(--unit-size);
+    font-size: var(--main-size);
+    border-radius: var(--unit-size);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+
+    background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    background-blend-mode: multiply;
 }
 
-.main {
+.main-nav ul {
-    width: 100%;
+    margin-top: var(--main-size);
-    margin-left: var(--unit-size);
-    margin-right: var(--unit-size);
-    box-shadow: var(--shadow);
-    border-radius: var(--small-size);
-    border: solid 2px var(--accent-low);
-    background-color: var(--bg3);
 }
 
-.set-nav {
+.main-nav ul li {
-    order: 1;
-    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-family: var(--head-font);
-    border-radius: var(--small-size) var(--small-size) 0 0;
-}
 
-.set-nav ul {
+    border-radius: var(--unit-size);
-    display: flex;
+    box-sizing: border-box;
-    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-nav li {
+    padding: var(--unit-size);
-    display: block;
+    margin-bottom: var(--small-size);
-    flex: 0 1 auto;
-    list-style-type: none;
-    font-weight: 700;
-}
 
-.set-nav a {
+    background-color: var(--translucent);
-    color: var(--accent);
-}
-
-.set-nav a:hover {
-    color: var(--fg);
-    transition: all 0.8s ease;
-}
-
-.active {
-    color: var(--fg) !important;
-    font-weight: 700;
-}
-
-.secondary {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: var(--bg3);
-    margin: var(--unit-size);
-    border: solid 2px var(--accent-low);
-    border-radius: var(--small-size);
-    box-shadow: var(--shadow);
 }
 
 .form {
-    order: 3;
+    font-size: var(--main-size);
-    padding: calc(2 * var(--unit-size));
-    height: 100%;
-    width: 100%;
-    border-radius: 0 0 var(--small-size) var(--small-size);
-}
-
-.form-single {
-    order: 2;
-    padding: calc(2 * var(--unit-size));
-    height: 100%;
-    width: 100%;
-    border-radius: var(--small-size);
-}
-
-.form label,
-.form-single label {
-    font-size: var(--medium-size);
-}
-
-/* FORMS ------------------------------*/
-label {
-    display: inline-block;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 700;
-    width: 100%;
-}
-
-input[type=text] {
-    margin-top: calc(var(--unit-size) * 0.5);
-    width: calc(100% - var(--unit-size));
-    background-color: var(--bg2);
-    box-shadow: var(--shadow);
-    border: solid 2px var(--accent-low);
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    color: var(--fg);
-    border-radius: calc(var(--unit-size) * 0.5);
-    font-size: var(--medium-size);
-}
-
-.form input[type=checkbox] {
-    float: left;
-    margin-right: calc(var(--unit-size) * 0.5);
-    margin-top: calc(var(--unit-size) * 0.2);
-}
-
-button[type=submit] {
-    background: var(--bg1);
-    padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
-    color: var(--fg);
-    border-style: solid;
-    border-color: var(--accent);
     border-radius: var(--unit-size);
-    border-width: 2px;
+    padding: var(--unit-size);
-    font-family: 'Montserrat', sans-serif;
+    box-sizing: border-box;
-    font-size: var(--small-size);
+
-    font-weight: 700;
+    background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    background-blend-mode: multiply;
 }
 
-#save_bio {
+.form #save {
-    margin-top: calc(var(--unit-size) * 0.5);
+    margin-top: var(--main-size);
-    width: calc(100% - var(--unit-size));
+
-    height: calc(10 * var(--unit-size));
-    box-shadow: var(--shadow);
-    background-color: var(--bg2);
-    border: solid 2px var(--accent-low);
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    color: var(--fg);
-    border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
-    word-wrap: break-word;
-    resize: vertical;
-}
-
-#save_phone_number {
-    margin-top: calc(var(--unit-size) * 0.5);
-    width: calc(100% - var(--unit-size));
-    background-color: var(--bg2);
-    box-shadow: var(--shadow);
-    border: solid 2px var(--accent-low);
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    color: var(--fg);
-    border-radius: calc(var(--unit-size) * 0.5);
-    font-size: var(--medium-size);
-}
-
-#save_language {
-    margin-top: calc(var(--unit-size) * 0.5);
-    background-color: var(--bg2);
-    box-shadow: var(--shadow);
-    border: solid 2px var(--accent-low);
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    color: var(--fg);
-    border-radius: calc(var(--unit-size) * 0.5);
-    font-size: var(--medium-size);
-}
-
-select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-image: url("../../icons/drop.svg");
-    background-size: var(--main-size);
-    background-position: 95% 50%;
-    background-repeat: no-repeat;
-}
-
-.help-text {
-    font-size: var(--medium-size);
-    font-style: italic;
-    color: var(--fg);
-    margin-bottom: var(--unit-size);
-}
-
-.form-single input[type=checkbox] {
-    margin-left: var(--unit-size);
-}
-
-/* JS CROPPING */
-#img-cropped {
-    display: block;
-    max-width: 100%;
-}
-
-#img-container {
-    margin: var(--main-size) auto;
-    max-width: 60%;
-}
-
-.cropper-view-box,
-.cropper-face {
-    border-radius: 50%;
-}
-
-/* NOTIFICATIONS TABS */
-/* visual feedback */
-ul input[type=radio] + label {
-    color: var(--accent);
-}
-
-ul input[type=radio]:checked + label {
-    color: var(--fg);
-}
-
-ul input[type=radio]:focus + label {
-    color: var(--fg);
-}
-
-/* show/hide each tab */
-ul input[type=radio]:not(:checked) + label + div {
-    display: none;
-}
-
-ul input[type=radio]:checked + label + div {
-    display: flex;
-}
-
-/* hide radio buttons */
-input[type=radio] {
-    position: absolute;
-    z-index: 1;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-}
-
-#form-tabs {
-    order: 2;
-    width: 100%;
-    font-size: var(--medium-size);
-}
-
-#form-tabs ul {
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    background-color: var(--bg1);
-    justify-content: space-evenly;
-    width: 100%;
-}
-
-#form-tabs ul label {
-    order: 1;
-    flex: 0;
-}
-
-#tabs {
-    padding: var(--medium-size);
-    text-transform: capitalize;
-}
-
-#form-tabs ul .form {
-    order: 2;
-    padding: calc(2 * var(--unit-size));
-    background-color: var(--bg3) !important;
-    height: 100%;
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    box-shadow: none;
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    font-size: var(--unit-size);
-}
-
-#form-tabs ul .form form {
-    width: 100%;
-}
-
-#form-tabs ul .form form div label {
-    margin-bottom: calc(var(--unit-size) * 0.5);
-}
-
-.secondary button[type=submit] {
-    background: var(--bg1);
-    padding: 0.6em 1.2em;
-    color: var(--fg);
-    border-style: solid;
-    border-color: var(--accent);
     border-radius: var(--unit-size);
-    border-width: 2px;
+    padding: var(--unit-size);
-    font-family: 'Montserrat', sans-serif;
+    box-sizing: border-box;
-    font-weight: 700;
+    background-color: var(--translucent);
 }
 
-.secondary button[type=submit]:focus,
+.icon-details-open {
-.secondary button[type=submit]:hover {
+    fill: var(--white);
-    border-radius: var(--unit-size);
+}
-    box-shadow: 0 0 8px var(--accent);
+
+.section-title-settings summary:focus,
+.section-title-settings summary:hover {
+    border-radius: var(--unit-size) !important;
+    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
+    background: var(--white) !important;
+    color: var(--bg1) !important;
+    transition: all 0.4s ease;
+}
+
+.section-title-settings summary:focus .icon-details-open,
+.section-title-settings summary:hover .icon-details-open {
+    fill: var(--bg1);
+    transition: all 0.4s ease;
+}
+
+/* SECTION DETAILS OPENED */
+.section-title-settings[open] svg {
+    transform: rotate(180deg);
+    animation: fadeOut 300ms;
+}
+
+.section-title-settings[open] .set-nav li:first-of-type {
+    margin-top: var(--unit-size);
+}
+
+.section-title-settings[open] .set-nav li:last-of-type {
+    margin-bottom: 0;
+}
+
+/* SECTION DETAILS CLOSED */
+.section-title-settings:not([open]) svg {
+    transform: initial;
+    animation: fadeIn 300ms;
 }

public/assets/icons/arrow-down.svg.twig

@@ -0,0 +1,7 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <title>arrow-down</title>
+    <path fill-rule="evenodd"
+          d="M13.03 8.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.47 9.28a.75.75 0 011.06-1.06l2.97 2.97V3.75a.75.75 0 011.5 0v7.44l2.97-2.97a.75.75 0 011.06 0z"></path>
+</svg>

public/assets/icons/plus-circle.svg.twig

@@ -0,0 +1,7 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <title>plus-circle</title>
+    <path fill-rule="evenodd"
+          d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path>
+</svg>

templates/settings/account.html.twig

@@ -1,22 +1,12 @@
 {% extends 'settings/base.html.twig' %}
 
-{% block title %}Notification Settings{% endblock %}
+{% block title %}Account Settings{% endblock %}
 
-{% block body %}
+{% block page_name %}Account{% endblock %}
 
-    <div class='content'>
+{% block form %}
-        <div class="main">
+    <div class='form-single'>
-            {% block primary_nav %}
+        <h1>Settings / Profile</h1>
-                {{ parent() }}
+        {{ form(acc) }}
-            {% endblock primary_nav %}
-            <div class="secondary">
-                {% block form %}
-                    <div class='form-single'>
-                        {{ form(acc) }}
-                    </div>
-                {% endblock form %}
-            </div>
-        </div>
     </div>
-
+{% endblock form %}
-{% endblock body %}

templates/settings/avatar.html.twig

@@ -8,12 +8,9 @@
     <script src="{{ asset('assets/javascript/cropperjs/cropper.js') }}"></script>
 {% endblock %}
 
-{% block body %}
-    {{ parent() }}
-{% endblock body %}
-
 {% block form %}
     <div class='form'>
+        <h1>Settings / Profile</h1>
         {{ form(avatar) }}
         <div id="img-container">
             <img id="img-cropped">

templates/settings/base.html.twig

@@ -2,18 +2,14 @@
 
 {% block meta %}
     {{ parent() }}
+    <link href="{{ asset('assets/icons/arrow-down.svg.twig') }}" rel="icon"/>
 {% endblock %}
 
 {% block title %}{% endblock %}
 
 {% block stylesheets %}
     {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}">
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
-          media="screen and (max-width: 750px)">
 {% endblock %}
 
 {% block header %}
@@ -21,37 +17,83 @@
 {% endblock %}
 
 {% block body %}
-    {% block left %}
-        {{ parent() }}
-    {% endblock %}
-
     <div class="content">
-        <div class="main">
+        <nav class='main-nav'>
-            {% block primary_nav %}
+            <h1>Settings</h1>
-                <nav class='set-nav'>
+            <ul>
-                    <ul>
+                <li>
-                        <li>
+                    <details class="section-title-settings">
-                            <a href="{{ path('settings_personal_info') }}"
+                        <summary>
-                               class='hover-effect {{ active('settings_personal_info', 'settings_avatar', 'settings_profile_') }}'>Profile</a>
+                            <h1>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
-                        </li>
+
-                        <li>
+                            <em>Personal Information, Avatar and Profile</em>
+                        </summary>
+
+                        <section>
+                            <nav class='set-nav'>
+                                <ul>
+                                    <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>
+                                    {% for tab in profile_tabs %}
+                                        <li>
+                                            <a href="{{ path(tab['route']) }}"
+                                               class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </nav>
+                        </section>
+                    </details>
+                    {# <a href="{{ path('settings_personal_info') }}" #}
+                    {# class='hover-effect {{ active('settings_personal_info', 'settings_avatar', 'settings_profile_') }}'>Profile</a> #}
+                </li>
+
+                <li>
+                    <details class="section-title-settings">
+                        <summary>
                             <a href="{{ path('settings_account') }}"
-                               class='hover-effect {{ active('settings_account') }}'>Account</a>
+                               class='hover-effect {{ active('settings_account') }}'>
-                        </li>
+                                <h1>Account</h1>
-                        <li>
+                                <em>Email, Password and Language</em>
+                            </a>
+                        </summary>
+
+                        <section>
+
+                        </section>
+                    </details>
+                </li>
+
+                <li>
+                    <details class="section-title-settings">
+                        <summary>
                             <a href="{{ path('settings_notifications') }}"
-                               class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
+                               class='hover-effect {{ active('settings_notifications') }}'>
-                        </li>
+                                <h1>Notifications</h1>
-                    </ul>
+                                <em>Enable/disable notifications (Email, XMPP, Replies...)</em>
-                </nav>
+                            </a>
-            {% endblock primary_nav %}
+                        </summary>
 
-            {% block secundary_nav %}
+                        <section>
-            {% endblock secundary_nav %}
 
-            {% block form %}
+                        </section>
-            {% endblock form %}
+                    </details>
-        </div>
+                    {# <a href="{{ path('settings_notifications') }}"
+                       class='hover-effect {{ active('settings_notifications') }}'>Notifications</a> #}
+                </li>
+            </ul>
+        </nav>
+
+        <hr>
+
+        {% block form %}
+        {% endblock %}
     </div>
 {% endblock body %}
 

templates/settings/notifications.html.twig

@@ -6,32 +6,21 @@
     {{ parent() }}
 {% endblock %}
 
-{% block body %}
+{% block form %}
-    <div class='content'>
+    <div id='form-tabs'>
-        <div class="main">
+        <h1>Settings / Notifications </h1>
-            {% block primary_nav %}
-                {{ parent() }}
-            {% endblock primary_nav %}
 
-            <div class="secondary">
+        <ul>
-                {% block form %}
+            {% for transport, form in tabbed_forms %}
-                    <div id='form-tabs'>
+                <input type="radio" id="toggle-{{ transport }}" name="tabs"
-                        <ul>
+                       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"
+                    {{ transport }}
-                                       value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
+                </label>
-                                <label for="toggle-{{ transport }}" id='tabs'>
+                <div id="form_{{ transport }}" class='form'>
-                                    {{ transport }}
+                    {{ form(form) }}
-                                </label>
+                </div>
-                                <div id="form_{{ transport }}" class='form'>
+            {% endfor %}
-                                    {{ form(form) }}
+        </ul>
-                                </div>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                {% endblock form %}
-            </div>
-        </div>
     </div>
-
+{% endblock form %}
-{% endblock body %}

templates/settings/profile.html.twig

@@ -2,41 +2,11 @@
 
 {% block title %}Profile Settings{% endblock %}
 
-{% block body %}
+{% block form %}
-    <div class='content'>
+    <div class='form'>
-        <div class="main">
+        <h1>Settings / Profile</h1>
-            {% block primary_nav %}
-                {{ parent() }}
-            {% endblock primary_nav %}
 
-            <div class="secondary">
+        {{ form(prof) }}
-                {% block secundary_nav %}
-                    <nav class='set-nav'>
-                        <ul>
-                            <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>
-                            {% for tab in profile_tabs %}
-                                <li>
-                                    <a href="{{ path(tab['route']) }}"
-                                       class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </nav>
-                {% endblock secundary_nav %}
-
-                {% block form %}
-                    <div class='form'>
-                        {{ form(prof) }}
-                    </div>
-                {% endblock form %}
-            </div>
-        </div>
     </div>
-{% endblock body %}
+{% endblock form %}
+