GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

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

This commit is contained in:
rainydaysavings 2020-07-20 00:22:41 +01:00 committed by Hugo Sales
parent 0b0bd31a4b
commit 63a443e78e
Signed by: someonewithpc
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;
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 {

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

@ -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;

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

@ -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;

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

@ -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);
}
}

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

@ -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);
}
}

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

@ -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);
}
}

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

@ -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(),
]);
}
}

4
src/Routes/Main.php
View File

@ -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);
}
}

9
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)">
{% endblock %}
{% block title %}Profile Settings{% endblock %}
{% block nav %}
<div class='content'>
<nav class='set-nav'>
<ul>
<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>
</li>
</ul>
<hr>
</nav>
</div>
{% endblock %}
{% block body %}
<div class='content'>
<div class='form'>
{{ form(prof) }}
</div>
{% endblock %}
{% endblock %}