From fa613b70980af54e9822bc2c190d864ed0f0eeb3 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Fri, 24 Jul 2020 23:47:32 +0100 Subject: [PATCH] [UI][ROUTES] Footer links added --- .../assets/css/{faq/faq.css => doc/doc.css} | 0 .../css/{faq/faq_mid.css => doc/doc_mid.css} | 0 .../{faq/faq_small.css => doc/doc_small.css} | 0 public/assets/css/left/left.css | 33 +++++++++++---- public/assets/css/left/left_mid.css | 33 +++++++++++---- public/assets/css/left/left_small.css | 41 ++++++++++++------- src/Routes/Main.php | 6 ++- templates/{faq => doc}/base.html.twig | 6 +-- templates/{ => doc}/faq/contact.html.twig | 2 +- templates/{ => doc}/faq/faq.html.twig | 2 +- templates/{ => doc}/faq/groups.html.twig | 2 +- templates/{ => doc}/faq/openid.html.twig | 2 +- templates/{ => doc}/faq/tags.html.twig | 2 +- templates/left/left.html.twig | 16 +++++++- 14 files changed, 102 insertions(+), 43 deletions(-) rename public/assets/css/{faq/faq.css => doc/doc.css} (100%) rename public/assets/css/{faq/faq_mid.css => doc/doc_mid.css} (100%) rename public/assets/css/{faq/faq_small.css => doc/doc_small.css} (100%) rename templates/{faq => doc}/base.html.twig (68%) rename templates/{ => doc}/faq/contact.html.twig (95%) rename templates/{ => doc}/faq/faq.html.twig (98%) rename templates/{ => doc}/faq/groups.html.twig (98%) rename templates/{ => doc}/faq/openid.html.twig (98%) rename templates/{ => doc}/faq/tags.html.twig (98%) diff --git a/public/assets/css/faq/faq.css b/public/assets/css/doc/doc.css similarity index 100% rename from public/assets/css/faq/faq.css rename to public/assets/css/doc/doc.css diff --git a/public/assets/css/faq/faq_mid.css b/public/assets/css/doc/doc_mid.css similarity index 100% rename from public/assets/css/faq/faq_mid.css rename to public/assets/css/doc/doc_mid.css diff --git a/public/assets/css/faq/faq_small.css b/public/assets/css/doc/doc_small.css similarity index 100% rename from public/assets/css/faq/faq_small.css rename to public/assets/css/doc/doc_small.css diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index e37e1579de..512e011f99 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -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; diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css index b02fb97a5a..dbc28e47b9 100644 --- a/public/assets/css/left/left_mid.css +++ b/public/assets/css/left/left_mid.css @@ -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; diff --git a/public/assets/css/left/left_small.css b/public/assets/css/left/left_small.css index 8acf82bdd4..5d4004e02d 100644 --- a/public/assets/css/left/left_small.css +++ b/public/assets/css/left/left_small.css @@ -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); } diff --git a/src/Routes/Main.php b/src/Routes/Main.php index f498e865e5..580fce4e0b 100644 --- a/src/Routes/Main.php +++ b/src/Routes/Main.php @@ -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 diff --git a/templates/faq/base.html.twig b/templates/doc/base.html.twig similarity index 68% rename from templates/faq/base.html.twig rename to templates/doc/base.html.twig index 373a166f8a..5d2a240be9 100644 --- a/templates/faq/base.html.twig +++ b/templates/doc/base.html.twig @@ -8,9 +8,9 @@ {% block stylesheets %} {{ parent() }} - - - + + + {% endblock %} {% block header %} diff --git a/templates/faq/contact.html.twig b/templates/doc/faq/contact.html.twig similarity index 95% rename from templates/faq/contact.html.twig rename to templates/doc/faq/contact.html.twig index 3220ce6601..6e39a46213 100644 --- a/templates/faq/contact.html.twig +++ b/templates/doc/faq/contact.html.twig @@ -1,4 +1,4 @@ -{% extends 'faq/faq.html.twig' %} +{% extends 'doc/faq/faq.html.twig' %} {% block title %}Help{% endblock %} diff --git a/templates/faq/faq.html.twig b/templates/doc/faq/faq.html.twig similarity index 98% rename from templates/faq/faq.html.twig rename to templates/doc/faq/faq.html.twig index 0ee254037f..7e17dbbc5b 100644 --- a/templates/faq/faq.html.twig +++ b/templates/doc/faq/faq.html.twig @@ -1,4 +1,4 @@ -{% extends 'faq/base.html.twig' %} +{% extends 'doc/base.html.twig' %} {% block title %}FAQ{% endblock %} diff --git a/templates/faq/groups.html.twig b/templates/doc/faq/groups.html.twig similarity index 98% rename from templates/faq/groups.html.twig rename to templates/doc/faq/groups.html.twig index 961752fd40..07f3ade0b5 100644 --- a/templates/faq/groups.html.twig +++ b/templates/doc/faq/groups.html.twig @@ -1,4 +1,4 @@ -{% extends 'faq/faq.html.twig' %} +{% extends 'doc/faq/faq.html.twig' %} {% block title %}Help{% endblock %} {% block body %} diff --git a/templates/faq/openid.html.twig b/templates/doc/faq/openid.html.twig similarity index 98% rename from templates/faq/openid.html.twig rename to templates/doc/faq/openid.html.twig index a54aba9d83..3b51bc914c 100644 --- a/templates/faq/openid.html.twig +++ b/templates/doc/faq/openid.html.twig @@ -1,4 +1,4 @@ -{% extends 'faq/faq.html.twig' %} +{% extends 'doc/faq/faq.html.twig' %} {% block title %}Help{% endblock %} diff --git a/templates/faq/tags.html.twig b/templates/doc/faq/tags.html.twig similarity index 98% rename from templates/faq/tags.html.twig rename to templates/doc/faq/tags.html.twig index 02adf8f726..d139639f3e 100644 --- a/templates/faq/tags.html.twig +++ b/templates/doc/faq/tags.html.twig @@ -1,4 +1,4 @@ -{% extends 'faq/faq.html.twig' %} +{% extends 'doc/faq/faq.html.twig' %} {% block title %}Help{% endblock %} diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig index 97ded1c545..b98671ef05 100644 --- a/templates/left/left.html.twig +++ b/templates/left/left.html.twig @@ -52,8 +52,20 @@
- Login - Register +
+ Login + Register +
+
+ Help + About + FAQ + TOS + Privacy + Source + Version + Contact +
{% endif %}