Refactor footer

static/css/footer.css

@@ -1,18 +1,10 @@
-#footer-div {
-    height:10vh;
-}
-
 footer {
-    /* position: absolute; */
+    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;
+    background-color: #f5f5f5;
 }
 
-footer .container .col .nav .nav-item {
+/*footer .container .col .nav .nav-item {
     display: inline-block;
     margin-right: 3vh;
 }
@@ -31,4 +23,4 @@ footer .container .col .nav .nav-item {
 
 footer .lang-form {
     margin: 1rem auto 0;
-}
+}*/

templates/footer.html

@@ -3,9 +3,46 @@
 {% load staticfiles %}
 <link rel="stylesheet" href="{% static "css/footer.css" %}">
 
-<footer style="text-align: center">
-    <div>
+<footer class="footer">
+    <div class="container">
+        <div class="d-flex align-items-center justify-content-end">
+            <div class="p-2">
+                <span>{% trans "Copyright Aalto-yliopiston Sähköinsinöörikilta ry" %} {% now 'Y' %}</span>
+            </div>
+            <div class="p-2">
                 <form class="lang-form form" action="{% url 'set_language' %}" method="post">{% csrf_token %}
+                    <span class="form-group">
+                        <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>
+            </div>
+            <div class="ml-auto p-2">
+                <span class="nav-item">
+                    <a href="/members"><i class="fa fa-group"></i></a>
+                </span>
+                <span class="nav-item">
+                    <a href="/infoscreen"><i class="fa fa-info"></i></a>
+                </span>
+                <span class="nav-item">
+                    <a href="/admin"><i class="fa fa-gears"></i></a>
+                </span>
+            </div>
+        </div>
+
+    </div>
+</footer>
+
+<!-- <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">
@@ -21,9 +58,9 @@
     </span>
 </form>
 <span>{% trans "Copyright Aalto-yliopiston Sähköinsinöörikilta ry" %} {% now 'Y' %}</span>
-    </div>
-        <div>
-            <span class="nav-item">
+-->
+
+<!-- <span class="nav-item">
     <a href="/members"><i class="fa fa-group"></i></a>
 </span>
 <span class="nav-item">
@@ -31,7 +68,4 @@
 </span>
 <span class="nav-item">
     <a href="/admin"><i class="fa fa-gears"></i></a>
-            </span>
-        </div>
-    </div>
-</footer>
+</span> -->

webapp/static/css/sik_header.css

@@ -11,27 +11,3 @@
     height: auto;
     margin: auto;
 }
-
-.kaehmy-banner {
-    max-width: 1000px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@media screen and (min-width: 1000px) {
-    .kaehmy_header-content {
-        position: absolute;
-        left: 0;
-        top: 0;
-        background-color: #052f5f;
-        width: 100%;
-    }
-
-    .kaehmy_header {
-        margin-bottom: 331px;
-    }
-}
-
-.kaehmy-banner-image {
-    width: 100%;
-}

webapp/static/css/webapp.css

@@ -1,26 +1,9 @@
-.page-content {
-    margin-top: 1vh;
-    width: 90%;
-    margin-left: auto;
-    margin-right: auto;
+html {
+    position: relative;
+    min-height: 100%;
 }
 
 body {
-    max-width: 1000px;
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-div.tooltip-inner {
-    max-width: 25rem;
-}
-
-.tooltip {
-    margin-left: 1rem;
-}
-
-.role-filter-form {
-    max-width: 30rem;
-    width: auto;
-    margin-bottom: 1rem;
+    /*Margin bottom by footer hight*/
+    margin-bottom: 60px;
 }