diff --git a/static/css/base.css b/static/css/base.css
index c1b8bcbc..14032f4e 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,3 +1,12 @@
+/* For the footer to be at the bottom*/
+body {
+ padding-top: 50px;
+}
+
+.content {
+ min-height: calc(100vh - 100px);
+}
+
/* Footer */
footer {
padding-top: 3rem;
@@ -70,10 +79,52 @@ a > i.fa {
}
/* Set gray background color */
-.sidenav {
- background-color: #f1f1f1;
- border: 1px solid #e0e0e0;
- border-radius: 0 0 5px 5px;
+@media (min-width: 768px) {
+ .sidenav-right {
+ position: fixed;
+ top:50px;
+ right:0;
+ }
+ .sidenav-left {
+ position: fixed;
+ top:50px;
+ left:0;
+ }
+ .dropdown-menu .dropdown-toggle:after {
+ border-top: .3em solid transparent;
+ border-right: 0;
+ border-bottom: .3em solid transparent;
+ border-left: .3em solid;
+ }
+
+ .dropdown-menu .dropdown-menu {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ .dropdown-menu li {
+ position: relative;
+ }
+
+ .nav-item .submenu {
+ display: none;
+ position: absolute;
+ left: 100%;
+ top: -7px;
+ }
+
+ .nav-item .submenu-left {
+ right: 100%;
+ left: auto;
+ }
+
+ .dropdown-menu>li:hover {
+ background-color: #f1f1f1
+ }
+
+ .dropdown-menu>li:hover>.submenu {
+ display: block;
+ }
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
vertical-align: middle;
@@ -148,3 +199,11 @@ dl.profile-info > div {
[data-toggle~="collapse"] {
cursor: pointer;
}
+
+/* Indent for submenu when collapsed */
+
+@media (max-width:767px) {
+ .submenu > li {
+ margin-left:20px;
+ }
+};
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 00000000..d3b82cca
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,42 @@
+function adjustHeader(){
+ /* This function is here to adjust the header if the header navbar
+ goes into two lines. This can't happen if the width is sm or less,
+ and we shouldn't adjust in this case. */
+ if ($(window).width() >= 768) {
+ $('body').css('padding-top', $("#navbar-header").height());
+ $('.sidenav-left').css('top', $("#navbar-header").height());
+ } else {
+ $('body').css('padding-top', '');
+ $('.sidenav-left').css('top', '');
+ }
+}
+
+function listenSubmenu() {
+ /* Add listeners on sm screen or less for submenus. */
+ if ($(window).width() < 767) {
+ $('.dropdown-menu a').click(function (e) {
+ if ($(this).next('.submenu').length) {
+ e.preventDefault();
+ $(this).next('.submenu').toggle();
+ }
+ $('.dropdown').on('hide.bs.dropdown', function () {
+ $(this).find('.submenu').hide();
+ })
+ });
+ }
+}
+
+/* We need to apply those functions at init and when the screen is resized. */
+
+$(window).resize(function () {
+ adjustHeader();
+ listenSubmenu();
+});
+
+adjustHeader();
+listenSubmenu();
+
+
+$(document).on('click', '.dropdown-menu', function (e) {
+ e.stopPropagation();
+});
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index e4bde7f3..d8a2f87b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,8 +3,8 @@ Re2o est un logiciel d'administration développé initiallement au rezometz. Il
se veut agnostique au réseau considéré, de manière à être installable en
quelques clics.
-Copyright © 2017 Lara Kermarec
-Copyright © 2017 Augustin Lemesle
+Copyright © 2017 Lara Kermarec
+Copyright © 2017 Augustin Lemesle
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@@ -13,7 +13,7 @@ the Free Software Foundation; either version 2 of the License, or
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License along
@@ -32,327 +32,82 @@ with this program; if not, write to the Free Software Foundation, Inc.,
{% self_adhesion as var_sa %}
-
- {# Open Graph for social media #}
-
-
-
-
-
-
-
- {# Preload JavaScript #}
- {% bootstrap_javascript %}
-
-
-
+
+ {# Open Graph for social media #}
+
+
+
+
+
+
+
- {% block custom_js %}{% endblock %}
+ {# Preload JavaScript #}
+ {% bootstrap_javascript %}
+
+
+
- {# Load CSS #}
- {% bootstrap_css %}
-
-
-
-
+ {% block custom_js %}{% endblock %}
- {# Favicon with iOS, Android, touchbar support #}
-
-
-
-
-
-
-
+ {# Load CSS #}
+ {% bootstrap_css %}
+
+
+
+
- {# Do not allow zooming on devices #}
-
+ {# Favicon with iOS, Android, touchbar support #}
+
+
+
+
+
+
+
-
{{ name_website }} : {% block title %}{% trans "Home" %}{% endblock %}
-
+ {# Do not allow zooming on devices #}
+
-
-