[UI][ROUTES] Footer links added

This commit is contained in:
rainydaysavings 2020-07-24 23:47:32 +01:00 committed by Hugo Sales
parent 6d4f6b5109
commit fa613b7098
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
14 changed files with 102 additions and 43 deletions

View File

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

View File

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

View File

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

View File

@ -53,7 +53,11 @@ abstract class Main
// FAQ static pages // FAQ static pages
foreach (['faq', 'contact', 'tags', 'groups', 'openid'] as $s) { 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 // Settings pages

View File

@ -8,9 +8,9 @@
{% block stylesheets %} {% block stylesheets %}
{{ parent() }} {{ 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/doc/doc.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/doc/doc_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_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %} {% endblock %}
{% block header %} {% block header %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -52,9 +52,21 @@
<label for="toggle" id='menu'></label> <label for="toggle" id='menu'></label>
</div> </div>
<div class='navbar'> <div class='navbar'>
<div class="left-nav">
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a> <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<a href='#'>Register</a> <a href='#'>Register</a>
</div> </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> </div>
{% endif %} {% endif %}