[TWIG][UI] Settings: removed unnecessary pages, responsive CSS work

public/assets/css/settings/settings.css

@@ -10,7 +10,7 @@
     margin-right: 20%;
     background-color: #00000080;
     padding: 1em 1em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -49,7 +49,7 @@
 /*-------------------------------------*/
 .set-nav2 {
     display: flex;
-    justify-content: space-between;
+    position: relative;
     flex-wrap: wrap;
     order: 2;
     width: 100%;
@@ -60,7 +60,7 @@
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
     padding: 0.8em 0.8em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -90,6 +90,16 @@
 
 }
 
+hr {
+    position: absolute;
+    margin-bottom: 0;
+    bottom: 0;
+    left: 0;
+    width: 80%;
+    margin-left: 10%;
+    color: #91b9d088;
+}
+
 /* CONTENT ----------------------------*/
 .content {
     display: flex;
@@ -103,7 +113,7 @@
     padding: 1em 1em 1em 1em;
     border-bottom-left-radius: 1em;
     border-bottom-right-radius: 1em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 

public/assets/css/settings/settings_mid.css

@@ -10,7 +10,7 @@
     margin-right: 5%;
     background-color: #00000080;
     padding: 1em 1em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -49,7 +49,7 @@
 /*-------------------------------------*/
 .set-nav2 {
     display: flex;
-    justify-content: space-between;
+    position: relative;
     flex-wrap: wrap;
     order: 2;
     width: 100%;
@@ -60,7 +60,7 @@
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
     padding: 0.8em 0.8em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -90,6 +90,16 @@
 
 }
 
+hr {
+    position: absolute;
+    margin-bottom: 0;
+    bottom: 0;
+    left: 0;
+    width: 80%;
+    margin-left: 10%;
+    color: #91b9d088;
+}
+
 /* CONTENT ----------------------------*/
 .content {
     display: flex;
@@ -103,7 +113,7 @@
     padding: 1em 1em 1em 1em;
     border-bottom-left-radius: 1em;
     border-bottom-right-radius: 1em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 

public/assets/css/settings/settings_small.css

@@ -48,8 +48,8 @@
 /*-------------------------------------*/
 /*-------------------------------------*/
 .set-nav2 {
+    position: relative;
     display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
     order: 2;
     width: 100%;
@@ -60,7 +60,7 @@
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
     padding: 0.8em 0.8em;
-    font-size: 0.8em;
+    font-size: 0.7em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -69,8 +69,6 @@
     align-items: stretch;
     justify-content: space-evenly;
     width: 100%;
-    margin-left: 10%;
-    margin-right: 10%;
     padding: 0;
 }
 
@@ -90,6 +88,16 @@
 
 }
 
+hr {
+    position: absolute;
+    margin-bottom: 0;
+    bottom: 0;
+    left: 0;
+    width: 80%;
+    margin-left: 10%;
+    color: #91b9d088;
+}
+
 /* CONTENT ----------------------------*/
 .content {
     display: flex;

src/Controller/UserAdminPanel.php

@@ -43,7 +43,7 @@ class UserAdminPanel extends AbstractController
 {
     public function __invoke(Request $request)
     {
-        $form = Form::create([
+        $prof = Form::create([
             [_m('Nickname'),   TextType::class],
             [_m('FullName'),   TextType::class],
             [_m('Homepage'),   TextType::class],
@@ -51,16 +51,31 @@ class UserAdminPanel extends AbstractController
             [_m('Location'),   TextType::class],
             ['save',        SubmitType::class, ['label' => _m('Save')]], ]);
 
-        foreach (['profile', 'avatar'] as $s) {
+        $prof->handleRequest($request);
-            return $this->render('settings/' . $s . '.html.twig', [
+        if ($prof->isSubmitted()) {
-                'form' => $form->createView(),
+            $data = $prof->getData();
-            ]);
+            if ($prof->isValid() && array_key_exists(_m('Setting'), $data)) {
+                list($section, $setting) = explode(':', $data[_m('Setting')]);
+                $value                   = $data[_m('Value')];
+                $default                 = $defaults[$section][$setting];
+                if (gettype($default) === gettype($value)) {
+                    $conf      = DB::find('\App\Entity\Config', ['section' => $section, 'setting' => $setting]);
+                    $old_value = $conf->getValue();
+                    $conf->setValue(serialize($value));
+                    DB::flush();
+                }
+                return $this->render('config/admin.html.twig', [
+                    'prof'      => $prof->createView(),
+                    'old_value' => unserialize($old_value),
+                    'default'   => $default,
+                ]);
+            } else {
+                // Display error
+            }
         }
 
-        foreach (['email', 'pass', 'bak'] as $s) {
+        return $this->render('settings/profile.html.twig', [
-            return $this->render('settings/account' . $s . '.html.twig', [
+            'prof' => $prof->createView(),
-                'form' => $form->createView(),
+        ]);
-            ]);
-        }
     }
 }

src/Routes/Main.php

@@ -46,12 +46,11 @@ abstract class Main
             $r->connect('doc_' . $s, 'doc/' . $s, TemplateController::class, [], ['defaults' => ['template' => 'faq/' . $s . '.html.twig']]);
         }
 
+        // Settings pages
         foreach (['profile', 'avatar'] as $s) {
             $r->connect('settings_' . $s, 'settings/' . $s, C\UserAdminPanel::class);
         }
 
-        foreach (['email', 'pass', 'bak'] as $s) {
+        $r->connect('account_settings', 'settings/account', C\UserAdminPanel::class);
-            $r->connect('account_' . $s, 'settings/account/' . $s, C\UserAdminPanel::class);
-        }
     }
 }

templates/settings/account.html.twig

@@ -13,27 +13,13 @@
                         <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
                   </li>
                   <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
+                        <a href="{{ path('account_settings') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_settings' %}active{% endif %}'>Account</a>
                   </li>
                   <li>
                         <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
                   </li>
             </ul>
       </nav>
-
-      <nav class='set-nav2'>
-            <ul>
-                  <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_pass') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_bak') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup and Restore</a>
-                  </li>
-            </ul>
-      </nav>
 {% endblock %}
 
 {% block body %}

templates/settings/account/email.html.twig

@@ -1,43 +0,0 @@
-{% extends 'base.html.twig' %}
-{% block stylesheets %}
-      {{ parent() }}
-      <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 nav %}
-      <nav class='set-nav'>
-            <ul>
-                  <li>
-                        <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
-                  </li>
-            </ul>
-      </nav>
-
-      <nav class='set-nav2'>
-            <ul>
-                  <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_pass') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_bak') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup and Restore</a>
-                  </li>
-            </ul>
-      </nav>
-{% endblock %}
-
-{% block body %}
-      <div class="content">
-            {{ form(form) }}
-      </div>
-{% endblock %}

templates/settings/account/pass.html.twig

@@ -1,43 +0,0 @@
-{% extends 'base.html.twig' %}
-{% block stylesheets %}
-      {{ parent() }}
-      <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 nav %}
-      <nav class='set-nav'>
-            <ul>
-                  <li>
-                        <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
-                  </li>
-            </ul>
-      </nav>
-
-      <nav class='set-nav2'>
-            <ul>
-                  <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_pass') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-                  </li>
-                  <li>
-                        <a href="{{ path('account_bak') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup and Restore</a>
-                  </li>
-            </ul>
-      </nav>
-{% endblock %}
-
-{% block body %}
-      <div class="content">
-            {{ form(form) }}
-      </div>
-{% endblock %}

templates/settings/avatar.html.twig

@@ -13,14 +13,13 @@
                         <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
                   </li>
                   <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
+                        <a href="{{ path('account_settings') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_settings' %}active{% endif %}'>Account</a>
                   </li>
                   <li>
                         <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
                   </li>
             </ul>
       </nav>
-
       <nav class='set-nav2'>
             <ul>
                   <li>
@@ -30,11 +29,29 @@
                         <a href="{{ path('settings_avatar') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_avatar' %}active{% endif %}'>Avatar</a>
                   </li>
             </ul>
+            <hr>
       </nav>
 {% endblock %}
 
 {% block body %}
-      <div class="content">
+      <div class='content'>
-            {{ form(form) }}
+            <div id='nickname'>
+                  <div class='label'> {{ form_label(prof.Nickname) }} </div> {{ form_widget(prof.Nickname) }}
+            </div>
+            <div id='name'>
+                  <div class='label'> {{ form_label(prof.FullName) }} </div> {{ form_widget(prof.FullName) }}
+            </div>
+            <div id='homepage'>
+                  <div class='label'> {{ form_label(prof.Homepage) }} </div> {{ form_widget(prof.Homepage) }}
+            </div>
+            <div id='bio'>
+                  <div class='label'> {{ form_label(prof.Bio) }} </div> {{ form_widget(prof.Bio) }}
+            </div>
+            <div id='location'>
+                  <div class='label'> {{ form_label(prof.Location) }} </div> {{ form_widget(prof.Location) }}
+            </div>
+            <div id='save'>
+                  {{ form_widget(prof.save) }}
+            </div>
       </div>
 {% endblock %}

templates/settings/profile.html.twig

@@ -13,14 +13,13 @@
                         <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
                   </li>
                   <li>
-                        <a href="{{ path('account_email') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
+                        <a href="{{ path('account_settings') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_settings' %}active{% endif %}'>Account</a>
                   </li>
                   <li>
                         <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
                   </li>
             </ul>
       </nav>
-
       <nav class='set-nav2'>
             <ul>
                   <li>
@@ -30,28 +29,29 @@
                         <a href="{{ path('settings_avatar') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_avatar' %}active{% endif %}'>Avatar</a>
                   </li>
             </ul>
+            <hr>
       </nav>
 {% endblock %}
 
 {% block body %}
       <div class='content'>
             <div id='nickname'>
-                  <div class='label'> {{ form_label(form.Nickname) }} </div> {{ form_widget(form.Nickname) }}
+                  <div class='label'> {{ form_label(prof.Nickname) }} </div> {{ form_widget(prof.Nickname) }}
             </div>
             <div id='name'>
-                  <div class='label'> {{ form_label(form.FullName) }} </div> {{ form_widget(form.FullName) }}
+                  <div class='label'> {{ form_label(prof.FullName) }} </div> {{ form_widget(prof.FullName) }}
             </div>
             <div id='homepage'>
-                  <div class='label'> {{ form_label(form.Homepage) }} </div> {{ form_widget(form.Homepage) }}
+                  <div class='label'> {{ form_label(prof.Homepage) }} </div> {{ form_widget(prof.Homepage) }}
             </div>
             <div id='bio'>
-                  <div class='label'> {{ form_label(form.Bio) }} </div> {{ form_widget(form.Bio) }}
+                  <div class='label'> {{ form_label(prof.Bio) }} </div> {{ form_widget(prof.Bio) }}
             </div>
             <div id='location'>
-                  <div class='label'> {{ form_label(form.Location) }} </div> {{ form_widget(form.Location) }}
+                  <div class='label'> {{ form_label(prof.Location) }} </div> {{ form_widget(prof.Location) }}
             </div>
             <div id='save'>
-                  {{ form_widget(form.save) }}
+                  {{ form_widget(prof.save) }}
             </div>
       </div>
 {% endblock %}