[UI][CONTROLLER] Settings page styling almost done.

public/assets/css/settings/settings.css

@@ -10,7 +10,7 @@
     margin-right: 20%;
     background-color: #00000080;
     padding: 1em 1em;
-    font-size: 0.7em;
+    font-size: 0.8em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -19,8 +19,8 @@
     align-items: stretch;
     justify-content: space-evenly;
     width: 100%;
-    margin-left: 10%;
+    margin-left: 5%;
-    margin-right: 10%;
+    margin-right: 5%;
     padding: 0;
 }
 
@@ -47,23 +47,114 @@
 
 /*-------------------------------------*/
 /*-------------------------------------*/
-/* CONTENT ----------------------------*/
+.set-nav2 {
-.content {
+    display: flex;
-    order: 3;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    order: 2;
     width: 100%;
-    margin-top: 1em;
-    margin-bottom: 1em;
     margin-left: 20%;
     margin-right: 20%;
-    background-color: rgba(0, 0, 0, 0.40);
+    margin-top: 1em;
-    padding: 0 1em 1em 1em;
+    background-color: #00000080;
-    border-radius: 1em;
+    border-top-left-radius: 1em;
-    font-size: 0.65em;
+    border-top-right-radius: 1em;
+    padding: 0.8em 0.8em;
+    font-size: 0.8em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
-.content ul {
+.set-nav2 ul {
-    margin: 0;
+    display: flex;
-    padding-left: 2em;
+    align-items: stretch;
-    list-style: disc;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-left: 10%;
+    margin-right: 10%;
+    padding: 0;
+}
+
+.set-nav2 li {
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+}
+
+.set-nav2 a {
+    color: #91B9D0;
+}
+
+.set-nav2 a:hover {
+    color: #F6F6F6;
+    transition: all 0.8s ease;
+
+}
+
+/* CONTENT ----------------------------*/
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    order: 3;
+    width: 100%;
+    margin-bottom: 1em;
+    margin-left: 20%;
+    margin-right: 20%;
+    background-color: rgba(0, 0, 0, 0.30);
+    padding: 1em 1em 1em 1em;
+    border-bottom-left-radius: 1em;
+    border-bottom-right-radius: 1em;
+    font-size: 0.8em;
+    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+/* FORMS ------------------------------*/
+.label {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 800;
+}
+
+#nickname {
+    order: 1;
+    width: 98%;
+}
+
+#name {
+    order: 2;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#homepage {
+    order: 3;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#bio {
+    order: 4;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#location {
+    order: 5;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#save {
+    order: 6;
+    margin-top: 1em;
+    margin-left: auto;
+}
+
+input[type=text] {
+    margin-top: 0.5em;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.30);
+    border-style: none;
+    padding: 0.5em 0.5em;
+    color: #F6F6F6;
+    border-radius: 0.5em;
+    font-size: 0.9em;
 }

public/assets/css/settings/settings_mid.css

@@ -59,7 +59,7 @@
     background-color: #00000080;
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
-    padding: 1em 1em;
+    padding: 0.8em 0.8em;
     font-size: 0.8em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
@@ -92,6 +92,8 @@
 
 /* CONTENT ----------------------------*/
 .content {
+    display: flex;
+    flex-wrap: wrap;
     order: 3;
     width: 100%;
     margin-bottom: 1em;
@@ -105,8 +107,54 @@
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
-.content ul {
+/* FORMS ------------------------------*/
-    margin: 0;
+.label {
-    padding-left: 2em;
+    font-family: 'Montserrat', sans-serif;
-    list-style: disc;
+    font-weight: 800;
+}
+
+#nickname {
+    order: 1;
+    width: 98%;
+}
+
+#name {
+    order: 2;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#homepage {
+    order: 3;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#bio {
+    order: 4;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#location {
+    order: 5;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#save {
+    order: 6;
+    margin-top: 1em;
+    margin-left: auto;
+}
+
+input[type=text] {
+    margin-top: 0.5em;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.30);
+    border-style: none;
+    padding: 0.5em 0.5em;
+    color: #F6F6F6;
+    border-radius: 0.5em;
+    font-size: 0.9em;
 }

public/assets/css/settings/settings_small.css

@@ -10,7 +10,7 @@
     margin-right: 0;
     background-color: #00000080;
     padding: 1em 1em;
-    font-size: 0.7em;
+    font-size: 0.8em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
@@ -19,8 +19,8 @@
     align-items: stretch;
     justify-content: space-evenly;
     width: 100%;
-    margin-left: 0;
+    margin-left: 5%;
-    margin-right: 0;
+    margin-right: 5%;
     padding: 0;
 }
 
@@ -47,23 +47,114 @@
 
 /*-------------------------------------*/
 /*-------------------------------------*/
-/* CONTENT ----------------------------*/
+.set-nav2 {
-.content {
+    display: flex;
-    order: 3;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    order: 2;
     width: 100%;
-    margin-top: 1em;
-    margin-bottom: 1em;
     margin-left: 1%;
     margin-right: 1%;
-    background-color: rgba(0, 0, 0, 0.40);
+    margin-top: 1em;
-    padding: 0 1em 1em 1em;
+    background-color: #00000080;
-    border-radius: 1em;
+    border-top-left-radius: 1em;
-    font-size: 0.7em;
+    border-top-right-radius: 1em;
+    padding: 0.8em 0.8em;
+    font-size: 0.8em;
     box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
 }
 
-.content ul {
+.set-nav2 ul {
-    margin: 0;
+    display: flex;
-    padding-left: 2em;
+    align-items: stretch;
-    list-style: disc;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-left: 10%;
+    margin-right: 10%;
+    padding: 0;
+}
+
+.set-nav2 li {
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+}
+
+.set-nav2 a {
+    color: #91B9D0;
+}
+
+.set-nav2 a:hover {
+    color: #F6F6F6;
+    transition: all 0.8s ease;
+
+}
+
+/* CONTENT ----------------------------*/
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    order: 3;
+    width: 100%;
+    margin-bottom: 1em;
+    margin-left: 1%;
+    margin-right: 1%;
+    background-color: rgba(0, 0, 0, 0.30);
+    padding: 1em 1em 1em 1em;
+    border-bottom-left-radius: 1em;
+    border-bottom-right-radius: 1em;
+    font-size: 0.8em;
+    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+/* FORMS ------------------------------*/
+.label {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 800;
+}
+
+#nickname {
+    order: 1;
+    width: 98%;
+}
+
+#name {
+    order: 2;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#homepage {
+    order: 3;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#bio {
+    order: 4;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#location {
+    order: 5;
+    width: 98%;
+    margin-top: 1em;
+}
+
+#save {
+    order: 6;
+    margin-top: 1em;
+    margin-left: auto;
+}
+
+input[type=text] {
+    margin-top: 0.5em;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.30);
+    border-style: none;
+    padding: 0.5em 0.5em;
+    color: #F6F6F6;
+    border-radius: 0.5em;
+    font-size: 0.9em;
 }

src/Controller/UserAdminPanel.php

@@ -32,12 +32,9 @@ namespace App\Controller;
 
 // use App\Core\Event;
 // use App\Util\Common;
-use App\Core\DB\DB;
-use App\Core\DB\DefaultSettings;
 use App\Core\Form;
 use function App\Core\I18n\_m;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\HttpFoundation\Request;
@@ -46,41 +43,13 @@ class UserAdminPanel extends AbstractController
 {
     public function __invoke(Request $request)
     {
-        $defaults = DefaultSettings::$defaults;
+        $form = Form::create([
-        $options  = [];
+            [_m('Nickname'),   TextType::class],
-        foreach ($defaults as $key => $inner) {
+            [_m('FullName'),   TextType::class],
-            $options[$key] = [];
+            [_m('Homepage'),   TextType::class],
-            foreach (array_keys($inner) as $inner_key) {
+            [_m('Bio'),   TextType::class],
-                $options[_m($key)][_m($inner_key)] = "{$key}:{$inner_key}";
+            [_m('Location'),   TextType::class],
-            }
+            ['save',        SubmitType::class, ['label' => _m('Save')]], ]);
-        }
-
-        $form = Form::create([[_m('Setting'), ChoiceType::class, ['choices' => $options]],
-            [_m('Value'),   TextType::class],
-            ['save',        SubmitType::class, ['label' => _m('Set site setting')]], ]);
-
-        $form->handleRequest($request);
-        if ($form->isSubmitted()) {
-            $data = $form->getData();
-            if ($form->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', [
-                    'form'      => $form->createView(),
-                    'old_value' => unserialize($old_value),
-                    'default'   => $default,
-                ]);
-            } else {
-                // Display error
-            }
-        }
 
         foreach (['profile', 'avatar'] as $s) {
             return $this->render('settings/' . $s . '.html.twig', [

templates/settings/profile.html.twig

@@ -34,7 +34,24 @@
 {% endblock %}
 
 {% block body %}
-      <div class="content">
+      <div class='content'>
-            {{ form(form) }}
+            <div id='nickname'>
+                  <div class='label'> {{ form_label(form.Nickname) }} </div> {{ form_widget(form.Nickname) }}
+            </div>
+            <div id='name'>
+                  <div class='label'> {{ form_label(form.FullName) }} </div> {{ form_widget(form.FullName) }}
+            </div>
+            <div id='homepage'>
+                  <div class='label'> {{ form_label(form.Homepage) }} </div> {{ form_widget(form.Homepage) }}
+            </div>
+            <div id='bio'>
+                  <div class='label'> {{ form_label(form.Bio) }} </div> {{ form_widget(form.Bio) }}
+            </div>
+            <div id='location'>
+                  <div class='label'> {{ form_label(form.Location) }} </div> {{ form_widget(form.Location) }}
+            </div>
+            <div id='save'>
+                  {{ form_widget(form.save) }}
+            </div>
       </div>
 {% endblock %}