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

[UI][ROUTES] Footer links added

Browse Source
This commit is contained in:
rainydaysavings 2020-07-24 23:47:32 +01:00 committed by Hugo Sales
parent 6d4f6b5109
commit fa613b7098
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
14 changed files with 102 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/assets/css/faq/faq.css → public/assets/css/doc/doc.css
View File

0
public/assets/css/faq/faq_mid.css → public/assets/css/doc/doc_mid.css
View File

0
public/assets/css/faq/faq_small.css → public/assets/css/doc/doc_small.css
View File

33
public/assets/css/left/left.css
View File

@ -1,34 +1,49 @@
.navbar {
display: flex;
flex-direction: column;
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(3 * var(--main-size));
}
.navbar .left-nav {
flex: 1;
margin-left: var(--unit-size);
}
.navbar .footer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: var(--medium-size);
padding: var(--unit-size);
margin-bottom: var(--unit-size);
}
.navbar .footer a {
margin-right: var(--unit-size);
}
.navbar {
left: -15em;
top: 0;
transition: 0.3s ease;
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
z-index: 1;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
.navbar .left-nav a {
margin-bottom: var(--unit-size);
}
.navbar .left-nav a:last-child {
margin-bottom: 0;
}
.navbar .left-nav a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;

33
public/assets/css/left/left_mid.css
View File

@ -1,4 +1,6 @@
.navbar {
display: flex;
flex-direction: column;
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
@ -9,26 +11,39 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar .left-nav {
flex: 1;
margin-left: var(--unit-size);
}
.navbar .footer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: var(--medium-size);
padding: var(--unit-size);
}
.navbar .footer a {
margin-right: var(--unit-size);
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
z-index: 2147483647;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
.navbar .left-nav a {
margin-bottom: var(--unit-size);
}
.navbar .left-nav a:last-child {
margin-bottom: 0;
}
.navbar .left-nav a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
@ -53,7 +68,7 @@
}
#toggle:checked~.navbar {
display: block;
display: flex;
left: 0;
top: 0;
transition: 0.3s ease;

41
public/assets/css/left/left_small.css
View File

@ -1,5 +1,7 @@
.navbar {
width: 100%;
display: flex;
flex-direction: column;
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background: rgb(51,61,71);
@ -9,41 +11,53 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar .left-nav {
flex: 1;
margin-left: var(--unit-size);
}
.navbar .footer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: var(--medium-size);
padding: var(--unit-size);
}
.navbar .footer a {
margin-right: var(--unit-size);
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
.navbar .left-nav a {
margin-bottom: var(--unit-size);
}
.navbar .left-nav a:last-child {
margin-bottom: 0;
}
.navbar .left-nav a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
label {
.icon-menu label {
display: block;
cursor: pointer
cursor: pointer;
}
#toggle {
position: absolute;
z-index: 2;
cursor: pointer;
width: var(--unit-size);
height: var(--unit-size);
opacity: 0;
}
.left-panel input[type=checkbox] {
@ -54,7 +68,7 @@ label {
}
#toggle:checked~.navbar {
display: block;
display: flex;
left: 0;
top: 0;
transition: 0.3s ease;
@ -73,7 +87,6 @@ label {
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}

6
src/Routes/Main.php
View File

@ -53,7 +53,11 @@ abstract class Main
// FAQ static pages
foreach (['faq', 'contact', 'tags', 'groups', 'openid'] as $s) {
$r->connect('doc_' . $s, '/doc/' . $s, TemplateController::class, [], ['defaults' => ['template' => 'faq/' . $s . '.html.twig']]);
$r->connect('doc_' . $s, '/doc/' . $s, TemplateController::class, [], ['defaults' => ['template' => 'doc/faq/' . $s . '.html.twig']]);
}
foreach (['help', 'about', 'tos', 'privacy', 'source'] as $s) {
$r->connect('doc_' . $s, '/doc/' . $s, TemplateController::class, [], ['defaults' => ['template' => 'doc/' . $s . '.html.twig']]);
}
// Settings pages

6
templates/faq/base.html.twig → templates/doc/base.html.twig
View File

@ -8,9 +8,9 @@
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc.css/') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}
{% block header %}

2
templates/faq/contact.html.twig → templates/doc/faq/contact.html.twig
View File

@ -1,4 +1,4 @@
{% extends 'faq/faq.html.twig' %}
{% extends 'doc/faq/faq.html.twig' %}
{% block title %}Help{% endblock %}

2
templates/faq/faq.html.twig → templates/doc/faq/faq.html.twig
View File

@ -1,4 +1,4 @@
{% extends 'faq/base.html.twig' %}
{% extends 'doc/base.html.twig' %}
{% block title %}FAQ{% endblock %}

2
templates/faq/groups.html.twig → templates/doc/faq/groups.html.twig
View File

@ -1,4 +1,4 @@
{% extends 'faq/faq.html.twig' %}
{% extends 'doc/faq/faq.html.twig' %}
{% block title %}Help{% endblock %}
{% block body %}

2
templates/faq/openid.html.twig → templates/doc/faq/openid.html.twig
View File

@ -1,4 +1,4 @@
{% extends 'faq/faq.html.twig' %}
{% extends 'doc/faq/faq.html.twig' %}
{% block title %}Help{% endblock %}

2
templates/faq/tags.html.twig → templates/doc/faq/tags.html.twig
View File

@ -1,4 +1,4 @@
{% extends 'faq/faq.html.twig' %}
{% extends 'doc/faq/faq.html.twig' %}
{% block title %}Help{% endblock %}

16
templates/left/left.html.twig
View File

@ -52,8 +52,20 @@
<label for="toggle" id='menu'></label>
</div>
<div class='navbar'>
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<a href='#'>Register</a>
<div class="left-nav">
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<a href='#'>Register</a>
</div>
<div class="footer">
<a href="#">Help</a>
<a href="#">About</a>
<a href="#">FAQ</a>
<a href="#">TOS</a>
<a href="#">Privacy</a>
<a href="#">Source</a>
<a href="#">Version</a>
<a href="#">Contact</a>
</div>
</div>
</div>
{% endif %}