base container and build process, more django

app/common/context_processors.py

@@ -0,0 +1,7 @@
+from django.conf import settings
+
+
+def app_details(request):
+    return {
+        'app_version': str(settings.VERSION)
+    }

app/common/middleware.py

@@ -0,0 +1,21 @@
+from django.forms import BaseForm
+
+
+class MaterializeDefaultFieldsMiddleware:
+    '''
+        Adds 'browser-default' CSS attribute class to all form fields.
+    '''
+
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        response = self.get_response(request)
+        return response
+
+    def process_template_response(self, request, response):
+        for _, v in getattr(response, 'context_data', {}).items():
+            if isinstance(v, BaseForm):
+                for _, field in v.fields.items():
+                    field.widget.attrs.update({'class':'browser-default'})
+        return response

app/common/static/styles/_colours.scss

@@ -12,5 +12,10 @@ $text-colour: $colour-near-black;
 $header-background-colour: $colour-red;
 $header-text-colour: $colour-white;
 
+$nav-background-colour: $colour-near-black;
+$nav-text-colour: $colour-near-white;
+$nav-link-background-hover-colour: $colour-orange;
+
 $footer-background-colour: $colour-red;
 $footer-text-colour: $colour-white;
+$footer-link-colour: $colour-near-black;

app/common/static/styles/_template.scss

@@ -6,7 +6,7 @@ html {
 }
 
 header {
-    
+
     background-color: $header-background-colour;
     color: $header-text-colour;
     padding: 1.3rem 0 1.5rem 0;
@@ -35,6 +35,29 @@ header {
 
 }
 
+nav {
+
+    background-color: $nav-background-colour;
+    color: $nav-text-colour;
+    height: 3rem;
+
+    a {
+        font-size: 1.1rem !important;
+        color: $nav-text-colour;
+        text-decoration: none;
+        line-height: 3rem;
+        height: 3rem;
+        i {
+            font-size: 1.1rem !important;
+        }
+        &:hover {
+            background-color: $nav-link-background-hover-colour !important;
+        }
+    }
+
+
+}
+
 main {
     
     padding: 2rem 0 2rem 0;
@@ -45,6 +68,29 @@ footer {
 
     background-color: $footer-background-colour;
     color: $footer-text-colour;
-    padding: 1.5rem 0 1.5rem 0;
+    padding-top: 1.5rem;
+
+    p {
+        margin: 0;
+        padding-bottom: 1.5rem;
+    }
+
+    svg {
+        path {
+            fill: $footer-link-colour !important;
+        }
+    }
+
+    i {
+        font-size: 0.85rem !important;
+    }
+
+    a {
+        color: $footer-link-colour;
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 
 }

app/common/static/styles/tubesync.scss

@@ -4,6 +4,7 @@
 @import "fontawesome/fontawesome";
 @import "fontawesome/regular";
 @import "fontawesome/solid";
+@import "fontawesome/brands";
 
 @import "fonts";
 @import "variables";

app/common/templates/base.html

@@ -25,6 +25,16 @@
       </div>
     </header>
 
+    <nav>
+      <div class="container">
+        <ul>
+          <li><a href=""><i class="fas fa-fw fa-th-large"></i><span class="hide-on-med-and-down"> Dashboard</span></a></li>
+          <li><a href=""><i class="fas fa-fw fa-play"></i><span class="hide-on-med-and-down"> Sources</span></a></li>
+          <li><a href=""><i class="fas fa-fw fa-film"></i><span class="hide-on-med-and-down"> Media</span></a></li>
+          <li><a href=""><i class="fas fa-fw fa-clock"></i><span class="hide-on-med-and-down"> Tasks</span></a></li>
+        </ul>
+      </div>
+    </nav>
 
     <main>
       <div class="container">
@@ -34,7 +44,14 @@
 
     <footer>
       <div class="container">
-        footer
+        <p>
+          <a href="{% url 'sync:index' %}">{% include 'tubesync.svg' with width='0.8rem' height='0.8rem' %} TubeSync</a>
+          is an open source synchronisation tool to automatically download videos from online video platforms.
+          <br>
+          The original code under a GPLv3 licence is available at
+          <a href="https://github.com/meeb/tubesync"><i class="fab fa-github"></i> https://github.com/meeb/tubesync</a>.
+        </p>
+        <p>Version {{ app_version }}.</p>
       </div>
     </footer>