forked from GNUsocial/gnu-social
		
	[UI][CONTROLLER] Settings page styling almost done.
This commit is contained in:
		| @@ -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-right: 10%; | ||||
|     margin-left: 5%; | ||||
|     margin-right: 5%; | ||||
|     padding: 0; | ||||
| } | ||||
|  | ||||
| @@ -47,23 +47,114 @@ | ||||
|  | ||||
| /*-------------------------------------*/ | ||||
| /*-------------------------------------*/ | ||||
| /* CONTENT ----------------------------*/ | ||||
| .content { | ||||
|     order: 3; | ||||
| .set-nav2 { | ||||
|     display: flex; | ||||
|     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); | ||||
|     padding: 0 1em 1em 1em; | ||||
|     border-radius: 1em; | ||||
|     font-size: 0.65em; | ||||
|     margin-top: 1em; | ||||
|     background-color: #00000080; | ||||
|     border-top-left-radius: 1em; | ||||
|     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 { | ||||
|     margin: 0; | ||||
|     padding-left: 2em; | ||||
|     list-style: disc; | ||||
| .set-nav2 ul { | ||||
|     display: flex; | ||||
|     align-items: stretch; | ||||
|     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; | ||||
| } | ||||
| @@ -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 { | ||||
|     margin: 0; | ||||
|     padding-left: 2em; | ||||
|     list-style: disc; | ||||
| /* 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; | ||||
| } | ||||
| @@ -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-right: 0; | ||||
|     margin-left: 5%; | ||||
|     margin-right: 5%; | ||||
|     padding: 0; | ||||
| } | ||||
|  | ||||
| @@ -47,23 +47,114 @@ | ||||
|  | ||||
| /*-------------------------------------*/ | ||||
| /*-------------------------------------*/ | ||||
| /* CONTENT ----------------------------*/ | ||||
| .content { | ||||
|     order: 3; | ||||
| .set-nav2 { | ||||
|     display: flex; | ||||
|     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); | ||||
|     padding: 0 1em 1em 1em; | ||||
|     border-radius: 1em; | ||||
|     font-size: 0.7em; | ||||
|     margin-top: 1em; | ||||
|     background-color: #00000080; | ||||
|     border-top-left-radius: 1em; | ||||
|     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 { | ||||
|     margin: 0; | ||||
|     padding-left: 2em; | ||||
|     list-style: disc; | ||||
| .set-nav2 ul { | ||||
|     display: flex; | ||||
|     align-items: stretch; | ||||
|     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; | ||||
| } | ||||
| @@ -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; | ||||
|         $options  = []; | ||||
|         foreach ($defaults as $key => $inner) { | ||||
|             $options[$key] = []; | ||||
|             foreach (array_keys($inner) as $inner_key) { | ||||
|                 $options[_m($key)][_m($inner_key)] = "{$key}:{$inner_key}"; | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         $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 | ||||
|             } | ||||
|         } | ||||
|         $form = Form::create([ | ||||
|             [_m('Nickname'),   TextType::class], | ||||
|             [_m('FullName'),   TextType::class], | ||||
|             [_m('Homepage'),   TextType::class], | ||||
|             [_m('Bio'),   TextType::class], | ||||
|             [_m('Location'),   TextType::class], | ||||
|             ['save',        SubmitType::class, ['label' => _m('Save')]], ]); | ||||
|  | ||||
|         foreach (['profile', 'avatar'] as $s) { | ||||
|             return $this->render('settings/' . $s . '.html.twig', [ | ||||
|   | ||||
| @@ -34,7 +34,24 @@ | ||||
| {% endblock %} | ||||
|  | ||||
| {% block body %} | ||||
|       <div class="content"> | ||||
|             {{ form(form) }} | ||||
|       <div class='content'> | ||||
|             <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 %} | ||||
		Reference in New Issue
	
	Block a user