[UI][CONTROLLER] Form help messages added, fixed checkbox trick hitbox

public/assets/css/base.css

@@ -135,7 +135,7 @@ b {
       height: calc(100vh - (3 * var(--unit-size)));
       position: fixed;
       background-color: rgba(0, 0, 0, 0.40);
-      margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em);
+      margin-top: calc(2 * var(--unit-size) + var(--main-size));
 }
 
 .navbar {

public/assets/css/base_mid.css

@@ -203,10 +203,14 @@ label {
       position: absolute;
       z-index: 2;
       cursor: pointer;
-      width: var(--unit-size);
-      height: var(--unit-size);
       opacity: 0;
 }
+input[type=checkbox] {
+    transform: scale(2);
+    -ms-transform: scale(2);
+    -webkit-transform: scale(2);
+    padding: 10px;
+}
 
 #toggle:checked~.navbar {
       display: block;

public/assets/css/base_small.css

@@ -207,6 +207,12 @@ label {
       height: var(--unit-size);
       opacity: 0;
 }
+input[type=checkbox] {
+    transform: scale(2);
+    -ms-transform: scale(2);
+    -webkit-transform: scale(2);
+    padding: 10px;
+}
 
 #toggle:checked~.navbar {
       display: block;

public/assets/css/settings/settings.css

@@ -6,6 +6,7 @@
       align-items: center;
       margin-left: var(--nav-size);
       margin-right: 0;
+      margin-bottom: var(--unit-size);
 }
 
 .set-nav {
@@ -133,10 +134,9 @@
     color: #F6F6F6;
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
-    margin-bottom: var(--unit-size);
 }
 
-button[type=submit] {
+.form button[type=submit] {
       background: rgba(0, 0, 0, 0.30);
       padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
       color: #F6F6F6;
@@ -148,3 +148,23 @@ button[type=submit] {
       font-size: var(--small-size);
       font-weight: 700;
 }
+
+#form_Bio {
+      margin-top: calc(var(--unit-size) * 0.5);
+      width: calc(100% - var(--unit-size));
+      background-color: rgba(0, 0, 0, 0.30);
+      border-style: none;
+      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+      color: #F6F6F6;
+      border-radius: calc(var(--unit-size) * 0.5);
+      font-size: var(--medium-size);
+      word-wrap: break-word;
+      resize: vertical;
+}
+
+.help-text {
+      font-size: var(--medium-size);
+      font-style: italic;
+      color: rgba(246, 246, 246, 0.8);
+      margin-bottom: var(--unit-size);
+}

public/assets/css/settings/settings_mid.css

@@ -6,6 +6,7 @@
       align-items: center;
       margin-left: 0;
       margin-right: 0;
+      margin-bottom: var(--unit-size);
 }
 
 .set-nav {
@@ -131,7 +132,6 @@ input[type=text] {
     color: #F6F6F6;
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
-    margin-bottom: var(--unit-size);
 }
 
 button[type=submit] {
@@ -146,3 +146,23 @@ button[type=submit] {
       font-size: var(--small-size);
       font-weight: 700;
 }
+
+#form_Bio {
+      margin-top: calc(var(--unit-size) * 0.5);
+      width: calc(100% - var(--unit-size));
+      background-color: rgba(0, 0, 0, 0.30);
+      border-style: none;
+      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+      color: #F6F6F6;
+      border-radius: calc(var(--unit-size) * 0.5);
+      font-size: var(--medium-size);
+      word-wrap: break-word;
+      resize: vertical;
+}
+
+.help-text {
+      font-size: var(--medium-size);
+      font-style: italic;
+      color: rgba(246, 246, 246, 0.8);
+      margin-bottom: var(--unit-size);
+}

public/assets/css/settings/settings_small.css

@@ -6,7 +6,7 @@
       align-items: center;
       margin-left: 0;
       margin-right: 0;
-      height: 100%;
+      margin-bottom: var(--unit-size);
 }
 
 .set-nav {
@@ -133,7 +133,6 @@ input[type=text] {
     color: #F6F6F6;
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
-    margin-bottom: var(--unit-size);
 }
 
 button[type=submit] {
@@ -148,3 +147,23 @@ button[type=submit] {
       font-size: var(--small-size);
       font-weight: 700;
 }
+
+#form_Bio {
+      margin-top: calc(var(--unit-size) * 0.5);
+      width: calc(100% - var(--unit-size));
+      background-color: rgba(0, 0, 0, 0.30);
+      border-style: none;
+      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+      color: #F6F6F6;
+      border-radius: calc(var(--unit-size) * 0.5);
+      font-size: var(--medium-size);
+      word-wrap: break-word;
+      resize: vertical;
+}
+
+.help-text {
+      font-size: var(--medium-size);
+      font-style: italic;
+      color: rgba(246, 246, 246, 0.8);
+      margin-bottom: var(--unit-size);
+}

src/Controller/UserPanel.php

@@ -38,6 +38,7 @@ use App\Core\Form;
 use function App\Core\I18n\_m;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\HttpFoundation\Request;
 
@@ -46,11 +47,12 @@ class UserPanel extends AbstractController
     public function __invoke(Request $request)
     {
         $prof = Form::create([
-            [_m('Nickname'),   TextType::class],
+            [_m('Nickname'),   TextType::class,   ['help' => '1-64 lowercase letters or numbers, no punctuation or spaces.']],
-            [_m('FullName'),   TextType::class],
+            [_m('FullName'),   TextType::class,    ['help' => 'A full name is required, if empty it will be set to your nickname.']],
-            [_m('Homepage'),   TextType::class],
+            [_m('Homepage'),   TextType::class,    ['help' => 'URL of your homepage, blog, or profile on another site.']],
-            [_m('Bio'),   TextType::class],
+            [_m('Bio'),   TextareaType::class,    ['help' => 'Describe yourself and your interests.']],
-            [_m('Location'),   TextType::class],
+            [_m('Location'),   TextType::class,    ['help' => 'Where you are, like "City, State (or Region), Country".']],
+            [_m('Tags'),   TextType::class,    ['help' => 'Tags for yourself (letters, numbers, -, ., and _), comma- or space- separated.']],
             ['save',        SubmitType::class, ['label' => _m('Save')]], ]);
 
         $prof->handleRequest($request);
@@ -58,7 +60,7 @@ class UserPanel extends AbstractController
             $data = $prof->getData();
             if ($prof->isValid()) {
                 $profile = DB::find('\App\Entity\Profile', ['id' => 2]);
-                foreach (['Nickname', 'FullName', 'Homepage', 'Bio', 'Location'] as $key) {
+                foreach (['Nickname', 'FullName', 'Homepage', 'Bio', 'Location', 'Tags'] as $key) {
                     $method = "set{$key}";
                     $profile->{$method}($data[_m($key)]);
                 }