wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI][CONTROLLER][ROUTES] Corrected core action name, UserPanel CSS work

Browse Source
This commit is contained in:
rainydaysavings 2020-07-20 00:22:41 +01:00 committed by Hugo Sales
parent 0b0bd31a4b
commit 63a443e78e
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
9 changed files with 253 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/base_small.css
View File

@ -66,7 +66,7 @@ b {
right: 0; right: 0;
background-color: #272E36; background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); 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 { #top {

1
public/assets/css/faq/faq_mid.css
View File

@ -2,7 +2,6 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;

1
public/assets/css/faq/faq_small.css
View File

@ -2,7 +2,6 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;

88
public/assets/css/settings/settings.css
View File

@ -1,18 +1,25 @@
/*-------------------------------------*/ .content {
/* PAGES ------------------------------*/ 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 { .set-nav {
order: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
order: 2;
width: 100%; width: 100%;
margin-left: var(--side-margin); background-color: #2A323B;
margin-right: var(--side-margin); padding: var(--medium-size);
background-color: #00000080;
padding: var(--medium-size) var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
} }
.set-nav ul { .set-nav ul {
@ -20,8 +27,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.25); margin-left: calc(2 * var(--side-margin));
margin-right: calc(var(--side-margin) * 0.25); margin-right: calc(2 * var(--side-margin));
padding: 0; padding: 0;
} }
@ -29,6 +36,7 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700;
} }
.active { .active {
@ -43,27 +51,18 @@
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/*-------------------------------------*/
/*-------------------------------------*/
.set-nav2 { .set-nav2 {
display: flex;
position: relative;
flex-wrap: wrap;
order: 2; order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%; width: 100%;
margin-left: var(--side-margin); background-color: #2A323B;
margin-right: var(--side-margin); padding: var(--medium-size);
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-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
} }
.set-nav2 ul { .set-nav2 ul {
@ -71,8 +70,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.5); margin-left: calc(2 * var(--side-margin));
margin-right: calc(var(--side-margin) * 0.5); margin-right: calc(2 * var(--side-margin));
padding: 0; padding: 0;
} }
@ -80,6 +79,12 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700;
}
.active {
color: #F6F6F6 !important;
font-weight: 700;
} }
.set-nav2 a { .set-nav2 a {
@ -89,35 +94,18 @@
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
hr { .form {
position: absolute;
margin-bottom: 0;
bottom: 0;
left: 0;
width: 80%;
margin-left: 10%;
color: #91b9d088;
}
/* CONTENT ----------------------------*/
.content {
display: flex;
flex-wrap: wrap;
order: 3; order: 3;
width: 100%; background-color: #00000040;
margin-bottom: var(--unit-size); font-size: var(--small-size);
margin-left: var(--side-margin); padding: calc(3*var(--unit-size));
margin-right: var(--side-margin); padding-top: var(--unit-size);
background-color: rgba(0, 0, 0, 0.30); height: 100%;
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 ------------------------------*/ /* FORMS ------------------------------*/
label { label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;

91
public/assets/css/settings/settings_mid.css
View File

@ -1,18 +1,25 @@
/*-------------------------------------*/ .content {
/* PAGES ------------------------------*/ 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 { .set-nav {
order: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
order: 2;
width: 100%; width: 100%;
margin-left: var(--side-margin); background-color: #2A323B;
margin-right: var(--side-margin); padding: var(--medium-size);
background-color: #00000080;
padding: var(--medium-size) var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav ul { .set-nav ul {
@ -20,8 +27,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.25); margin-left: var(--side-margin);
margin-right: calc(var(--side-margin) * 0.25); margin-right: var(--side-margin);
padding: 0; padding: 0;
} }
@ -29,11 +36,8 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
}
.active {
color: #F6F6F6 !important;
font-weight: 700; font-weight: 700;
font-size: var(--medium-size);
} }
.set-nav a { .set-nav a {
@ -43,27 +47,23 @@
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/*-------------------------------------*/
/*-------------------------------------*/
.set-nav2 { .set-nav2 {
display: flex;
position: relative;
flex-wrap: wrap;
order: 2; order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #00000030;
padding: var(--medium-size);
margin-top: calc(2 * var(--unit-size));
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: 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-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); 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 { .set-nav2 ul {
@ -71,8 +71,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.5); margin-left: var(--side-margin);
margin-right: calc(var(--side-margin) * 0.5); margin-right: var(--side-margin);
padding: 0; padding: 0;
} }
@ -80,6 +80,8 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700;
font-size: var(--medium-size);
} }
.set-nav2 a { .set-nav2 a {
@ -89,40 +91,31 @@
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
hr {
position: absolute; .active {
margin-bottom: 0; color: #F6F6F6 !important;
bottom: 0; font-weight: 700;
left: 0;
width: 80%;
margin-left: 10%;
color: #91b9d088;
} }
/* CONTENT ----------------------------*/ .form {
.content {
display: flex;
flex-wrap: wrap;
order: 3; order: 3;
width: 100%; background-color: #00000040;
margin-bottom: var(--unit-size); padding: calc(2*var(--unit-size));
font-size: var(--medium-size);
height: 100%;
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: var(--side-margin); margin-right: var(--side-margin);
background-color: rgba(0, 0, 0, 0.30); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--unit-size); border-radius: 0 0 var(--unit-size) 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 ------------------------------*/ /* FORMS ------------------------------*/
label { label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 800; font-weight: 800;
font-size: var(--medium-size);
} }
label:nth-child() { label:nth-child() {

98
public/assets/css/settings/settings_small.css
View File

@ -1,18 +1,25 @@
/*-------------------------------------*/ .content {
/* PAGES ------------------------------*/ 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 { .set-nav {
order: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
order: 2;
width: 100%; width: 100%;
margin-left: var(--side-margin); background-color: #2A323B;
margin-right: var(--side-margin); padding: var(--medium-size);
background-color: #00000080;
padding: var(--medium-size) var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav ul { .set-nav ul {
@ -20,8 +27,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.25); margin-left: var(--side-margin);
margin-right: calc(var(--side-margin) * 0.25); margin-right: var(--side-margin);
padding: 0; padding: 0;
} }
@ -29,11 +36,8 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
}
.active {
color: #F6F6F6 !important;
font-weight: 700; font-weight: 700;
font-size: var(--medium-size);
} }
.set-nav a { .set-nav a {
@ -43,27 +47,23 @@
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/*-------------------------------------*/
/*-------------------------------------*/
.set-nav2 { .set-nav2 {
display: flex;
position: relative;
flex-wrap: wrap;
order: 2; order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) + 1%); background-color: #00000030;
margin-right: calc(var(--side-margin) + 1%); padding: var(--medium-size);
margin-top: var(--unit-size); margin-top: var(--unit-size);
background-color: #00000080; margin-left: 1%;
border-top-left-radius: var(--unit-size); margin-right: 1%;
border-top-right-radius: var(--unit-size);
padding: var(--medium-size) var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); 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 { .set-nav2 ul {
@ -71,8 +71,8 @@
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(var(--side-margin) * 0.5); margin-left: var(--side-margin);
margin-right: calc(var(--side-margin) * 0.5); margin-right: var(--side-margin);
padding: 0; padding: 0;
} }
@ -80,6 +80,8 @@
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700;
font-size: var(--medium-size);
} }
.set-nav2 a { .set-nav2 a {
@ -89,40 +91,32 @@
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
hr {
position: absolute; .active {
margin-bottom: 0; color: #F6F6F6 !important;
bottom: 0; font-weight: 700;
left: 0;
width: 80%;
margin-left: 10%;
color: #91b9d088;
} }
/* CONTENT ----------------------------*/ .form {
.content {
display: flex;
flex-wrap: wrap;
order: 3; order: 3;
width: 100%; background-color: #00000040;
margin-bottom: var(--unit-size); padding: calc(2*var(--unit-size));
margin-left: calc(var(--side-margin) + 1%); font-size: var(--medium-size);
margin-right: calc(var(--side-margin) + 1%); height: 100%;
background-color: rgba(0, 0, 0, 0.30); margin-left: 1%;
padding: var(--unit-size); margin-right: 1%;
border-bottom-left-radius: var(--unit-size); margin-top: 0;
border-bottom-right-radius: var(--unit-size); box-shadow: 0;
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 800; font-weight: 800;
font-size: var(--medium-size);
} }
label:nth-child() { label:nth-child() {

14
src/Controller/UserAdminPanel.php → src/Controller/UserPanel.php
View File

@ -31,19 +31,19 @@
namespace App\Controller; namespace App\Controller;
use App\Core\Controller;
// use App\Core\Event; // use App\Core\Event;
// use App\Util\Common; // use App\Util\Common;
use App\Core\DB\DB; use App\Core\DB\DB;
use App\Core\Form; use App\Core\Form;
use function App\Core\I18n\_m; 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\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\HttpFoundation\Request; 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([ $prof = Form::create([
[_m('Nickname'), TextType::class], [_m('Nickname'), TextType::class],
@ -51,8 +51,7 @@ class UserAdminPanel extends Controller
[_m('Homepage'), TextType::class], [_m('Homepage'), TextType::class],
[_m('Bio'), TextType::class], [_m('Bio'), TextType::class],
[_m('Location'), TextType::class], [_m('Location'), TextType::class],
['save', SubmitType::class, ['label' => _m('Save')]], ['save', SubmitType::class, ['label' => _m('Save')]], ]);
]);
$prof->handleRequest($request); $prof->handleRequest($request);
if ($prof->isSubmitted()) { if ($prof->isSubmitted()) {
@ -69,9 +68,8 @@ class UserAdminPanel extends Controller
} }
} }
return [ return $this->render('settings/profile.html.twig', [
'_template' => 'settings/profile.html.twig',
'prof' => $prof->createView(), 'prof' => $prof->createView(),
]; ]);
} }
} }

4
src/Routes/Main.php
View File

@ -49,9 +49,9 @@ abstract class Main
// Settings pages // Settings pages
foreach (['profile', 'avatar'] as $s) { 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);
} }
} }

7
templates/settings/profile.html.twig
View File

@ -6,7 +6,10 @@
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}" media="screen and (max-width: 750px)"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %} {% endblock %}
{% block title %}Profile Settings{% endblock %}
{% block nav %} {% block nav %}
<div class='content'>
<nav class='set-nav'> <nav class='set-nav'>
<ul> <ul>
<li> <li>
@ -29,12 +32,12 @@
<a href="{{ path('settings_avatar') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_avatar' %}active{% endif %}'>Avatar</a> <a href="{{ path('settings_avatar') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_avatar' %}active{% endif %}'>Avatar</a>
</li> </li>
</ul> </ul>
<hr>
</nav> </nav>
</div>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class='content'> <div class='form'>
{{ form(prof) }} {{ form(prof) }}
</div> </div>
{% endblock %} {% endblock %}