eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests 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 c2e69a06b0
commit 801399218f
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 %}