[UI][ROUTES] Footer links added

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 .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);
 }
-
 .navbar a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;

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

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

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

templates/doc/base.html.twig

@@ -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/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 %}
 
 {% block header %}

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 %}
 

templates/doc/faq/faq.html.twig

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

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 %}

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 %}
 

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 %}
 

templates/left/left.html.twig

@@ -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>
+                <div class="left-nav">
-                <a href='#'>Register</a>
+                    <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 %}