From 17ad7ab2d46ada532ae1e7e9a0d64a9b6ffe261a Mon Sep 17 00:00:00 2001
From: henu <henri.varjotie@aalto.fi>
Date: Wed, 25 Oct 2017 20:02:43 +0300
Subject: [PATCH] Fix navigation and add sticky footer which is shit

---
 static/css/footer.css            | 25 +++++-------
 templates/footer.html            | 56 ++++++++++++++++---------
 webapp/static/css/main_nav.css   |  3 ++
 webapp/templates/base.html       | 11 ++---
 webapp/templates/navigation.html | 70 ++++++++++++++++----------------
 5 files changed, 92 insertions(+), 73 deletions(-)
 create mode 100644 webapp/static/css/main_nav.css

diff --git a/static/css/footer.css b/static/css/footer.css
index 2ebad99..3432e11 100644
--- a/static/css/footer.css
+++ b/static/css/footer.css
@@ -2,20 +2,19 @@
     height:10vh;
 }
 
-.footer {
-    text-align: center;
+footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px; /* Set the fixed height of the footer here */
+    line-height: 60px; /* Vertically center the text there */
     margin-top: 2rem;
     margin-bottom: 1rem;
 }
 
-#fi-button {
-    background: url("/static/img/fi.png") no-repeat;
-    background-size: cover;
-}
-
-#en-button {
-    background: url("/static/img/en.png") no-repeat;
-    background-size: cover;
+footer .container .col .nav .nav-item {
+    display: inline-block;
+    margin-right: 3vh;
 }
 
 .lang-button {
@@ -30,8 +29,6 @@
     display: inline-block;
 }
 
-.lang-form {
-    margin-left: auto;
-    margin-right: auto;
+footer .lang-form {
     max-width: 10rem;
-}
\ No newline at end of file
+}
diff --git a/templates/footer.html b/templates/footer.html
index 31d263a..d4eb5b2 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -2,23 +2,41 @@
 {% load static %}
 {% load staticfiles %}
 <link rel="stylesheet" href="{% static "css/footer.css" %}">
-<div class="footer">
-    <div>
-        <form class="lang-form form" action="{% url 'set_language' %}" method="post">{% csrf_token %}
-            <span>
-                <input name="next" type="hidden" value="{{ redirect_to }}" />
-                <select onchange="this.form.submit()" class="lang-select form-control" name="language">
-                    {% get_current_language as LANGUAGE_CODE %}
-                    {% get_available_languages as LANGUAGES %}
-                    {% get_language_info_list for LANGUAGES as languages %}
-                    {% for language in languages %}
-                    <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
-                        {{ language.name_local }} ({{ language.code }})
-                    </option>
-                    {% endfor %}
-                </select>
-            </span>                
-        </form>
-        {% trans "Copyright Aalto-yliopiston Sähköinsinöörikilta ry" %} {% now 'Y' %}        
+
+<footer>
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col">
+                <form class="lang-form form" action="{% url 'set_language' %}" method="post">{% csrf_token %}
+                    <span>
+                        <input name="next" type="hidden" value="{{ redirect_to }}" />
+                        <select onchange="this.form.submit()" class="lang-select form-control" name="language">
+                            {% get_current_language as LANGUAGE_CODE %}
+                            {% get_available_languages as LANGUAGES %}
+                            {% get_language_info_list for LANGUAGES as languages %}
+                            {% for language in languages %}
+                            <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
+                                {{ language.name_local }} ({{ language.code }})
+                            </option>
+                            {% endfor %}
+                        </select>
+                    </span>
+                </form>
+                <span>{% trans "Copyright Aalto-yliopiston Sähköinsinöörikilta ry" %} {% now 'Y' %}</span>
+            </div>
+            <div class="col">
+                <ul class="nav">
+                    <li class="nav-item">
+                        <a href="/members"><i class="fa fa-group"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="/infoscreen"><i class="fa fa-info"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="/admin"><i class="fa fa-gears"></i></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
-</div>
+</footer>
diff --git a/webapp/static/css/main_nav.css b/webapp/static/css/main_nav.css
new file mode 100644
index 0000000..73402fc
--- /dev/null
+++ b/webapp/static/css/main_nav.css
@@ -0,0 +1,3 @@
+.main_navigation .navbar-border .navbar-nav .nav-item {
+    display: block;
+}
diff --git a/webapp/templates/base.html b/webapp/templates/base.html
index c8ce998..3fe75d4 100644
--- a/webapp/templates/base.html
+++ b/webapp/templates/base.html
@@ -18,7 +18,7 @@
         <script src="{% static "js/lib/jquery-3.1.0.min.js" %}"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">        
+        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
         <script src="{% static "js/lib/underscore-min.js" %}"></script>
 
         <script>
@@ -43,9 +43,10 @@
             {% block content %}
             {% endblock %}
         </div>
-
-        {% block footer %}    
-            {% include "footer.html" %}
-        {% endblock footer %}
+        <div class="footer">
+            {% block footer %}
+                {% include "footer.html" %}
+            {% endblock footer %}
+        </div>
     </body>
 </html>
diff --git a/webapp/templates/navigation.html b/webapp/templates/navigation.html
index 6ed4ce7..b49b4fb 100644
--- a/webapp/templates/navigation.html
+++ b/webapp/templates/navigation.html
@@ -1,36 +1,36 @@
 {% load i18n %}
-<nav class="navbar navbar-default sidebar" role="navigation">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-        </div>
-        <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
-            <ul class="nav navbar-nav">
-                <li class="active"><a href="/">SIK<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
-                <li><a href="/guild">{% trans "Guild" %}</a></li>
-                <li><a href="/freshmen">{% trans "Freshmen" %}</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{% trans "Corporate" %}<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
-                    <ul class="dropdown-menu forAnimate" role="menu">
-                        <li><a href="/jobs">{% trans "Jobs" %}</a></li>
-                        <li><a href="#">Yritysdadaa</a></li>
-                        <li><a href="#">Lisää yritysdadaa</a></li>
-                        <li class="divider"></li>
-                        <li><a href="#">Separated link</a></li>
-                        <li class="divider"></li>
-                        <li><a href="#">Informes</a></li>
-                    </ul>
-                </li>
-                <li ><a href="/event_calendar">{% trans "Event calendar" %}<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
-                <li ><a href="/international">{% trans "International" %}<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
-                <li ><a href="/sosso">{% trans "Sössö" %}</a></li>
-                <li ><a href="/contact">{% trans "Contact" %}<span class="pull-right hidden-xs showopacity glyphicon glyphicon-book"></span></a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
+<link rel="stylesheet" href="/static/css/main_nav.css">
+<div class="main_navigation">
+    <nav class="navbar-border navbar navbar-toggleable-md navbar-light bg-faded">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="/guild">{% trans "Guild" %}</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/freshmen">{% trans "Freshmen" %}</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/event_calendar">{% trans "Event calendar" %}</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/international">{% trans "International" %}</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/sosso">{% trans "Sössö" %}</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-item nav-link" href="/contact">{% trans "Contact" %}</a>
+            </li>
+            <li class="nav-item btn-group">
+                <a class="dropdown-toggle nav-link" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {% trans "Corporate" %}
+                </a>
+                <div class="dropdown-menu" aria-labelledby="corpDropdown">
+                    <a class="dropdown-item" href="/jobs">{% trans "Jobs" %}</a>
+                    <a class="dropdown-item" href="/">Yritysdadaa</a>
+                    <a class="dropdown-item" href="/">Something else here</a>
+                </div>
+            </li>
+        </ul>
+    </nav>
+</div>