Simple footer finished

konova/static/css/konova.css

@@ -3,18 +3,40 @@ Declare some basic colours
 */
 :root{
     --rlp-red: #871d33;
-    --rlp-grey-dark: #8e8e8e;
+    --rlp-gray-dark: #8e8e8e;
-    --rlp-grey-light: #c6c6c6;
+    --rlp-gray-light: #c6c6c6;
+}
+
+html {
+  position: relative;
+  min-height: 100%;
 }
 
 body{
     font-family: Arial;
     letter-spacing: 0.2px;
+    margin-bottom: 40px; /* Margin bottom by footer height */
 }
 
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40px; /* Set the fixed height of the footer here */
+    line-height: 40px; /* Vertically center the text there */
+    background-color: #f5f5f5;
+    border-top: 1px solid var(--rlp-gray-light);
+    color: var(--rlp-gray-dark);
+}
+
+.footer-link a{
+    color: var(--rlp-gray-dark);
+    text-decoration: none;
+}
 
 .nav{
     background-color: var(--rlp-red);
+    height: 50px;
 }
 .nav-icon{
     color: white;
@@ -30,9 +52,16 @@ body{
 }
 
 .menu-elem:hover{
-    background-color: var(--rlp-grey-light);
+    /*
+    background-color: var(--rlp-gray-light);
+    */
 }
 
 .nav-btn{
     color: white;
+    padding: 0.5rem;
+    margin: 0 0.5rem 0 0;
+}
+.nav-btn:hover{
+
 }

konova/sub_settings/context_settings.py

@@ -6,6 +6,6 @@ Created on: 16.11.20
 
 """
 
-BASE_TITLE = "KSP"
+BASE_TITLE = "KSP - Kompensationsverzeichnis Service Portal"
 BASE_FRONTEND_TITLE = "Kompensationsverzeichnis Service Portal"
 WIKI_URL = "https://dienste.naturschutz.rlp.de/doku/doku.php?id=ksp:start"

templates/base.html

@@ -22,13 +22,9 @@
 
     </div>
 
-    <footer>
+    {% block footer %}
-        {% block footer %}
+        {% include 'footer.html' %}
-
+    {% endblock %}
-        {% endblock %}
-
-    </footer>
-
 </body>
 
 

templates/footer.html

@@ -0,0 +1,17 @@
+{% load i18n fontawesome_5 %}
+<footer class="footer">
+    <div class="container">
+        <div class="d-flex justify-content-center">
+            <span class="col-sm-auto footer-link">
+                <a href="{% url 'home' %}">{% trans 'Help' %}</a>
+            </span>
+            <span class="col-sm-auto footer-link">
+                <a href="{% url 'home' %}">{% trans 'Impressum' %}</a>
+            </span>
+            <span class="col-sm-auto footer-link">
+                <a href="{% url 'home' %}">{% trans 'Contact' %}</a>
+            </span>
+        </div>
+    </div>
+
+</footer>

templates/navbar.html

@@ -3,47 +3,46 @@
     <div class="d-flex align-items-center nav-icon ml-2" title="{% trans 'Kompensationsverzeichnis Service Portal' %}">
         <strong class="">{% trans 'KSP' %}</strong>
     </div>
-    <div class="justify-content-center">
+    <div class="d-flex align-items-center justify-content-center">
-    <a class="nav-item menu-elem" href="{% url 'home' %}">
+        <a class="nav-item menu-elem" href="{% url 'home' %}">
-        <div class="btn nav-btn">
+            <div class="btn nav-btn">
-            {% fa5_icon 'home' %}
+                {% fa5_icon 'home' %}
-            {% trans 'Home' %}
+                {% trans 'Home' %}
+            </div>
+        </a>
+        <a class="nav-item menu-elem" href="{% url 'home' %}">
+            <div class="btn nav-btn">
+                {% fa5_icon 'pencil-ruler' %}
+                {% trans 'Intervention' %}
+            </div>
+        </a>
+        <a class="nav-item menu-elem" href="{% url 'home' %}">
+            <div class="btn nav-btn">
+                {% fa5_icon 'leaf' %}
+                {% trans 'Compensation' %}
+            </div>
+        </a>
+        <a class="nav-item menu-elem" href="{% url 'home' %}">
+            <div class="btn nav-btn">
+                {% fa5_icon 'tree' %}
+                {% trans 'Eco-account' %}
+            </div>
+        </a>
+        <div class="nav-item menu-elem dropdown">
+            <div class="btn nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                {% fa5_icon 'ellipsis-v' %}
+                {% trans 'More' %}
+            </div>
+            <div class="dropdown-menu">
+                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'euro-sign' %}  {% trans 'EMA' %}</a>
+                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-import' %}  {% trans 'Import...' %}</a>
+                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-export' %}  {% trans 'Export...' %}</a>
+                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-alt' %}  {% trans 'Reports' %}</a>
+            </div>
         </div>
-    </a>
-    <a class="nav-item menu-elem" href="{% url 'home' %}">
-        <div class="btn nav-btn">
-            {% fa5_icon 'pencil-ruler' %}
-            {% trans 'Intervention' %}
-        </div>
-    </a>
-    <a class="nav-item menu-elem" href="{% url 'home' %}">
-        <div class="btn nav-btn">
-            {% fa5_icon 'leaf' %}
-            {% trans 'Compensation' %}
-        </div>
-    </a>
-    <a class="nav-item menu-elem" href="{% url 'home' %}">
-        <div class="btn nav-btn">
-            {% fa5_icon 'tree' %}
-            {% trans 'Eco-account' %}
-        </div>
-    </a>
-    <div class="nav-item menu-elem dropdown">
-        <div class="btn nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-            {% fa5_icon 'ellipsis-v' %}
-            {% trans 'More' %}
-        </div>
-        <div class="dropdown-menu">
-            <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'euro-sign' %}  {% trans 'EMA' %}</a>
-            <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-import' %}  {% trans 'Import...' %}</a>
-            <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-export' %}  {% trans 'Export...' %}</a>
-            <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-alt' %}  {% trans 'Reports' %}</a>
-        </div>
-    </div>
-
     </div>
-    <div class="nav-item ">
+    <div class="d-flex align-items-center nav-item ">
-        <div class="btn nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+        <div class="nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
             {% fa5_icon 'user-circle' %}
             {{ user.username }}
         </div>