[CONTROLLER][UI] Fixing controller display errors, Settings CSS fixes

public/assets/css/network/public.css

@@ -0,0 +1,9 @@
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(3 * var(--main-size));
+    justify-content: center;
+    align-items: center;
+    margin-left: var(--nav-size);
+    margin-right: 0;
+}

public/assets/css/settings/settings.css

@@ -131,8 +131,10 @@
 
 /* FORMS ------------------------------*/
 label {
+      display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
+      width: 100%;
 }
 
 label:nth-child() {
@@ -163,9 +165,10 @@ button[type=submit] {
       font-weight: 700;
 }
 
-#form_Bio {
+#form_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
+      height: calc(10 * 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);
@@ -176,6 +179,36 @@ button[type=submit] {
       resize: vertical;
 }
 
+#form_phone_number {
+      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);
+}
+
+#form_language{
+      margin-top: calc(var(--unit-size) * 0.5);
+      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);
+}
+select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-image: url("../../icons/drop.svg");
+      background-size: var(--main-size);
+      background-position: center right;
+      background-repeat: no-repeat;
+}
+
 .help-text {
       font-size: var(--medium-size);
       font-style: italic;

public/assets/css/settings/settings_mid.css

@@ -129,8 +129,10 @@
 
 /* FORMS ------------------------------*/
 label {
+      display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
+      width: 100%;
 }
 
 label:nth-child() {
@@ -161,9 +163,10 @@ button[type=submit] {
       font-weight: 700;
 }
 
-#form_Bio {
+#form_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
+      height: calc(10 * 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);
@@ -174,6 +177,36 @@ button[type=submit] {
       resize: vertical;
 }
 
+#form_phone_number {
+      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);
+}
+
+#form_language{
+      margin-top: calc(var(--unit-size) * 0.5);
+      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);
+}
+select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-image: url("../../icons/drop.svg");
+      background-size: var(--main-size);
+      background-position: center right;
+      background-repeat: no-repeat;
+}
+
 .help-text {
       font-size: var(--medium-size);
       font-style: italic;

public/assets/css/settings/settings_small.css

@@ -129,9 +129,10 @@
 
 /* FORMS ------------------------------*/
 label {
+      display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
-    font-size: var(--medium-size);
+      width: 100%;
 }
 
 label:nth-child() {
@@ -162,9 +163,10 @@ button[type=submit] {
       font-weight: 700;
 }
 
-#form_Bio {
+#form_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
+      height: calc(5 * 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);
@@ -175,6 +177,36 @@ button[type=submit] {
       resize: vertical;
 }
 
+#form_phone_number {
+      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);
+}
+
+#form_language{
+      margin-top: calc(var(--unit-size) * 0.5);
+      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);
+}
+select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-image: url("../../icons/drop.svg");
+      background-size: var(--main-size);
+      background-position: center right;
+      background-repeat: no-repeat;
+}
+
 .help-text {
       font-size: var(--medium-size);
       font-style: italic;

public/assets/icons/drop.svg

@@ -1,5 +1,56 @@
-<!-- Generated by IcoMoon.io -->
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<svg
-<title>drop</title>
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
-<path d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z"></path>
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="drop.svg"
+   id="svg6"
+   viewBox="0 0 32 32"
+   height="32"
+   width="32"
+   version="1.1">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg6"
+     inkscape:window-maximized="1"
+     inkscape:window-y="30"
+     inkscape:window-x="0"
+     inkscape:cy="16.019032"
+     inkscape:cx="16.050301"
+     inkscape:zoom="27.75"
+     showgrid="false"
+     id="namedview8"
+     inkscape:window-height="1022"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <title
+     id="title2">drop</title>
+  <path
+     style="fill:#f6f6f6;fill-opacity:1"
+     id="path4"
+     d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z" />
 </svg>

src/Controller/UserPanel.php

@@ -113,7 +113,7 @@ class UserPanel extends AbstractController
     public function avatar(Request $request)
     {
         $avatar = Form::create([
-            ['avatar',   FileType::class,   ['label' => _m('avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 10MB.')]],
+            ['avatar',   FileType::class,   ['label' => _m('Avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 10MB.')]],
             ['save',     SubmitType::class, ['label' => _m('Submit')]],
         ]);