diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index b3d961eeee..6e740bcd6c 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -66,7 +66,7 @@ b { right: 0; background-color: #272E36; box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); - padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size); + padding: var(--medium-size); } #top { diff --git a/public/assets/css/faq/faq_mid.css b/public/assets/css/faq/faq_mid.css index 241c243254..10445f3138 100644 --- a/public/assets/css/faq/faq_mid.css +++ b/public/assets/css/faq/faq_mid.css @@ -2,7 +2,6 @@ display: flex; flex-wrap: wrap; margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); - ; justify-content: center; align-items: center; margin-left: 0; diff --git a/public/assets/css/faq/faq_small.css b/public/assets/css/faq/faq_small.css index 6bafe64d7d..6229d56a06 100644 --- a/public/assets/css/faq/faq_small.css +++ b/public/assets/css/faq/faq_small.css @@ -2,7 +2,6 @@ display: flex; flex-wrap: wrap; margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); - ; justify-content: center; align-items: center; margin-left: 0; diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index 8003bdfbf3..cdbf260b49 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -1,122 +1,110 @@ -/*-------------------------------------*/ -/* PAGES ------------------------------*/ +.content { + display: flex; + flex-wrap: wrap; + margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em); + justify-content: center; + align-items: center; + margin-left: calc(var(--nav-size)); + margin-right: 0; + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); + height: 100%; +} + .set-nav { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: var(--side-margin); - margin-right: var(--side-margin); - background-color: #00000080; - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 1; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #2A323B; + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); } .set-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.25); - margin-right: calc(var(--side-margin) * 0.25); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: calc(2 * var(--side-margin)); + margin-right: calc(2 * var(--side-margin)); + padding: 0; } .set-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; } .active { - color: #F6F6F6 !important; - font-weight: 700; + color: #F6F6F6 !important; + font-weight: 700; } .set-nav a { - color: #91B9D0; + color: #91B9D0; } .set-nav a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -/*-------------------------------------*/ -/*-------------------------------------*/ .set-nav2 { - display: flex; - position: relative; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: var(--side-margin); - margin-right: var(--side-margin); - margin-top: var(--unit-size); - background-color: #00000080; - border-top-left-radius: var(--unit-size); - border-top-right-radius: var(--unit-size); - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 2; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #2A323B; + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); } .set-nav2 ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.5); - margin-right: calc(var(--side-margin) * 0.5); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: calc(2 * var(--side-margin)); + margin-right: calc(2 * var(--side-margin)); + padding: 0; } .set-nav2 li { - display: block; - flex: 0 1 auto; - list-style-type: none; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; +} + +.active { + color: #F6F6F6 !important; + font-weight: 700; } .set-nav2 a { - color: #91B9D0; + color: #91B9D0; } .set-nav2 a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -hr { - position: absolute; - margin-bottom: 0; - bottom: 0; - left: 0; - width: 80%; - margin-left: 10%; - color: #91b9d088; +.form { + order: 3; + background-color: #00000040; + font-size: var(--small-size); + padding: calc(3*var(--unit-size)); + padding-top: var(--unit-size); + height: 100%; } -/* CONTENT ----------------------------*/ -.content { - display: flex; - flex-wrap: wrap; - order: 3; - width: 100%; - margin-bottom: var(--unit-size); - margin-left: var(--side-margin); - margin-right: var(--side-margin); - background-color: rgba(0, 0, 0, 0.30); - padding: var(--unit-size); - border-bottom-left-radius: var(--unit-size); - border-bottom-right-radius: var(--unit-size); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); -} /* FORMS ------------------------------*/ label { @@ -139,4 +127,4 @@ input[type=text] { border-radius: calc(var(--unit-size) * 0.5); font-size: var(--medium-size); margin-bottom: var(--unit-size); -} \ No newline at end of file +} diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css index 8003bdfbf3..25cbf09d64 100644 --- a/public/assets/css/settings/settings_mid.css +++ b/public/assets/css/settings/settings_mid.css @@ -1,128 +1,121 @@ -/*-------------------------------------*/ -/* PAGES ------------------------------*/ +.content { + display: flex; + flex-wrap: wrap; + margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); + justify-content: center; + align-items: center; + margin-left: 0; + margin-right: 0; + height: 100%; +} + .set-nav { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: var(--side-margin); - margin-right: var(--side-margin); - background-color: #00000080; - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 1; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #2A323B; + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); } .set-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.25); - margin-right: calc(var(--side-margin) * 0.25); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + padding: 0; } .set-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; -} - -.active { - color: #F6F6F6 !important; - font-weight: 700; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; + font-size: var(--medium-size); } .set-nav a { - color: #91B9D0; + color: #91B9D0; } .set-nav a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -/*-------------------------------------*/ -/*-------------------------------------*/ .set-nav2 { - display: flex; - position: relative; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: var(--side-margin); - margin-right: var(--side-margin); - margin-top: var(--unit-size); - background-color: #00000080; - border-top-left-radius: var(--unit-size); - border-top-right-radius: var(--unit-size); - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 2; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #00000030; + padding: var(--medium-size); + margin-top: calc(2 * var(--unit-size)); + margin-left: var(--side-margin); + margin-right: var(--side-margin); + font-size: var(--medium-size); + font-family: var(--head-font); + border-radius: var(--unit-size) var(--unit-size) 0 0; + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); } .set-nav2 ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.5); - margin-right: calc(var(--side-margin) * 0.5); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + padding: 0; } .set-nav2 li { - display: block; - flex: 0 1 auto; - list-style-type: none; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; + font-size: var(--medium-size); } .set-nav2 a { - color: #91B9D0; + color: #91B9D0; } .set-nav2 a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -hr { - position: absolute; - margin-bottom: 0; - bottom: 0; - left: 0; - width: 80%; - margin-left: 10%; - color: #91b9d088; + +.active { + color: #F6F6F6 !important; + font-weight: 700; } -/* CONTENT ----------------------------*/ -.content { - display: flex; - flex-wrap: wrap; - order: 3; - width: 100%; - margin-bottom: var(--unit-size); - margin-left: var(--side-margin); - margin-right: var(--side-margin); - background-color: rgba(0, 0, 0, 0.30); - padding: var(--unit-size); - border-bottom-left-radius: var(--unit-size); - border-bottom-right-radius: var(--unit-size); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); +.form { + order: 3; + background-color: #00000040; + padding: calc(2*var(--unit-size)); + font-size: var(--medium-size); + height: 100%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); + border-radius: 0 0 var(--unit-size) var(--unit-size); } + /* FORMS ------------------------------*/ label { font-family: 'Montserrat', sans-serif; font-weight: 800; - font-size: var(--medium-size); } label:nth-child() { @@ -139,4 +132,4 @@ input[type=text] { border-radius: calc(var(--unit-size) * 0.5); font-size: var(--medium-size); margin-bottom: var(--unit-size); -} \ No newline at end of file +} diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css index 0f02fdb8ae..62c7b374a6 100644 --- a/public/assets/css/settings/settings_small.css +++ b/public/assets/css/settings/settings_small.css @@ -1,128 +1,122 @@ -/*-------------------------------------*/ -/* PAGES ------------------------------*/ +.content { + display: flex; + flex-wrap: wrap; + margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); + justify-content: center; + align-items: center; + margin-left: 0; + margin-right: 0; + height: 100%; +} + .set-nav { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: var(--side-margin); - margin-right: var(--side-margin); - background-color: #00000080; - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 1; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #2A323B; + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); } .set-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.25); - margin-right: calc(var(--side-margin) * 0.25); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + padding: 0; } .set-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; -} - -.active { - color: #F6F6F6 !important; - font-weight: 700; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; + font-size: var(--medium-size); } .set-nav a { - color: #91B9D0; + color: #91B9D0; } .set-nav a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -/*-------------------------------------*/ -/*-------------------------------------*/ .set-nav2 { - display: flex; - position: relative; - flex-wrap: wrap; - order: 2; - width: 100%; - margin-left: calc(var(--side-margin) + 1%); - margin-right: calc(var(--side-margin) + 1%); - margin-top: var(--unit-size); - background-color: #00000080; - border-top-left-radius: var(--unit-size); - border-top-right-radius: var(--unit-size); - padding: var(--medium-size) var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); + order: 2; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: #00000030; + padding: var(--medium-size); + margin-top: var(--unit-size); + margin-left: 1%; + margin-right: 1%; + font-size: var(--medium-size); + font-family: var(--head-font); + border-radius: var(--unit-size) var(--unit-size) 0 0; + box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); } .set-nav2 ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(var(--side-margin) * 0.5); - margin-right: calc(var(--side-margin) * 0.5); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + padding: 0; } .set-nav2 li { - display: block; - flex: 0 1 auto; - list-style-type: none; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; + font-size: var(--medium-size); } .set-nav2 a { - color: #91B9D0; + color: #91B9D0; } .set-nav2 a:hover { - color: #F6F6F6; - transition: all 0.8s ease; - + color: #F6F6F6; + transition: all 0.8s ease; } -hr { - position: absolute; - margin-bottom: 0; - bottom: 0; - left: 0; - width: 80%; - margin-left: 10%; - color: #91b9d088; + +.active { + color: #F6F6F6 !important; + font-weight: 700; } -/* CONTENT ----------------------------*/ -.content { - display: flex; - flex-wrap: wrap; - order: 3; - width: 100%; - margin-bottom: var(--unit-size); - margin-left: calc(var(--side-margin) + 1%); - margin-right: calc(var(--side-margin) + 1%); - background-color: rgba(0, 0, 0, 0.30); - padding: var(--unit-size); - border-bottom-left-radius: var(--unit-size); - border-bottom-right-radius: var(--unit-size); - box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); +.form { + order: 3; + background-color: #00000040; + padding: calc(2*var(--unit-size)); + font-size: var(--medium-size); + height: 100%; + margin-left: 1%; + margin-right: 1%; + margin-top: 0; + box-shadow: 0; + border-radius: 0 0 var(--unit-size) var(--unit-size); } + /* FORMS ------------------------------*/ label { font-family: 'Montserrat', sans-serif; font-weight: 800; - font-size: var(--medium-size); } label:nth-child() { @@ -139,4 +133,4 @@ input[type=text] { border-radius: calc(var(--unit-size) * 0.5); font-size: var(--medium-size); margin-bottom: var(--unit-size); -} \ No newline at end of file +} diff --git a/src/Controller/UserAdminPanel.php b/src/Controller/UserPanel.php similarity index 85% rename from src/Controller/UserAdminPanel.php rename to src/Controller/UserPanel.php index 2f9250e06b..409ea5c32c 100644 --- a/src/Controller/UserAdminPanel.php +++ b/src/Controller/UserPanel.php @@ -31,28 +31,27 @@ namespace App\Controller; -use App\Core\Controller; // use App\Core\Event; // use App\Util\Common; use App\Core\DB\DB; 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\TextType; use Symfony\Component\HttpFoundation\Request; -class UserAdminPanel extends Controller +class UserPanel extends AbstractController { - public function handle(Request $request) + public function __invoke(Request $request) { $prof = Form::create([ [_m('Nickname'), TextType::class], [_m('FullName'), TextType::class], [_m('Homepage'), TextType::class], - [_m('Bio'), TextType::class], + [_m('Bio'), TextType::class], [_m('Location'), TextType::class], - ['save', SubmitType::class, ['label' => _m('Save')]], - ]); + ['save', SubmitType::class, ['label' => _m('Save')]], ]); $prof->handleRequest($request); if ($prof->isSubmitted()) { @@ -69,9 +68,8 @@ class UserAdminPanel extends Controller } } - return [ - '_template' => 'settings/profile.html.twig', - 'prof' => $prof->createView(), - ]; + return $this->render('settings/profile.html.twig', [ + 'prof' => $prof->createView(), + ]); } } diff --git a/src/Routes/Main.php b/src/Routes/Main.php index 4c604f8fba..a934622c22 100644 --- a/src/Routes/Main.php +++ b/src/Routes/Main.php @@ -49,9 +49,9 @@ abstract class Main // Settings pages foreach (['profile', 'avatar'] as $s) { - $r->connect('settings_' . $s, 'settings/' . $s, C\UserAdminPanel::class); + $r->connect('settings_' . $s, 'settings/' . $s, C\UserPanel::class); } - $r->connect('settings_account', 'settings/account', C\UserAdminPanel::class); + $r->connect('settings_account', 'settings/account', C\UserPanel::class); } } diff --git a/templates/settings/profile.html.twig b/templates/settings/profile.html.twig index 2cb9764b6a..51bc8efc50 100644 --- a/templates/settings/profile.html.twig +++ b/templates/settings/profile.html.twig @@ -6,7 +6,10 @@ {% endblock %} +{% block title %}Profile Settings{% endblock %} + {% block nav %} +
+
{% endblock %} {% block body %} -
+
{{ form(prof) }}
-{% endblock %} \ No newline at end of file +{% endblock %}