From 180c8efcf4ec5bf0216b81de40709f0b9b2760b1 Mon Sep 17 00:00:00 2001
From: Tom Teichler <tom.teichler@teckids.org>
Date: Wed, 29 May 2019 19:24:40 +0200
Subject: [PATCH] Migrate to bootstrap4.
---
biscuit/core/settings.py | 23 +++++++++++----
.../templates/bootstrap4-navbar-submenu.html | 13 +++++++++
biscuit/core/templates/bootstrap4-navbar.html | 22 ++++++++++++++
biscuit/core/templates/core/base.html | 29 +++++++++----------
biscuit/core/templates/core/index.html | 2 +-
.../core/templates/registration/login.html | 2 +-
local.cfg | 8 ++++-
setup.py | 3 +-
8 files changed, 77 insertions(+), 25 deletions(-)
create mode 100644 biscuit/core/templates/bootstrap4-navbar-submenu.html
create mode 100644 biscuit/core/templates/bootstrap4-navbar.html
diff --git a/biscuit/core/settings.py b/biscuit/core/settings.py
index 87eb91c7b..95f1095f6 100644
--- a/biscuit/core/settings.py
+++ b/biscuit/core/settings.py
@@ -26,7 +26,8 @@ INSTALLED_APPS = [
'django.contrib.messages',
'django.contrib.staticfiles',
'easyaudit',
- 'bootstrap3',
+ 'bootstrap4',
+ 'fa',
'menu',
'biscuit.core'
]
@@ -108,10 +109,6 @@ USE_L10N = True
USE_TZ = True
-BOOTSTRAP3 = {
- 'include_jquery': True
-}
-
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
@@ -127,5 +124,21 @@ LOGOUT_REDIRECT_URL = 'index'
STATIC_ROOT = LocalSetting()
MEDIA_ROOT = LocalSetting()
+FONT_AWESOME = {'url': LocalSetting(default="/javascript/font-awesome/css/font-awesome.min.css")}
+
+BOOTSTRAP4 = {
+ "css_url": LocalSetting(default="/javascript/bootstrap4/css/bootstrap.min.css"),
+ "javascript_url": LocalSetting(default="/javascript/bootstrap4/js/bootstrap.min.js"),
+ "jquery_url": LocalSetting(default="/javascript/jquery/jquery.min.js"),
+ "popper_url": LocalSetting(default="/javascript/popper.js/popper.min.js"),
+ "include_jquery": True
+}
+
+DATATABLES = {
+ "css_url": LocalSetting(default="/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"),
+ "js_url": LocalSetting("/javascript/jquery-datatables/dataTables.bootstrap4.min.js"),
+}
+
+
_settings = load_and_check_settings(globals())
globals().update(_settings)
diff --git a/biscuit/core/templates/bootstrap4-navbar-submenu.html b/biscuit/core/templates/bootstrap4-navbar-submenu.html
new file mode 100644
index 000000000..dace83349
--- /dev/null
+++ b/biscuit/core/templates/bootstrap4-navbar-submenu.html
@@ -0,0 +1,13 @@
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+ {% for item in items %}
+ {% if item.visible %}
+ <a class="dropdown-item {% if item.selected %} active{% endif %}{% if item.children %} dropdown-submenu{% endif %}" href="{{ item.url }}">{{ item.title }}
+ {% if item.children %}
+ {% with items=item.children template_name='bootstrap-navbar-submenu.html' %}
+ {% include template_name %}
+ {% endwith %}
+ {% endif %}
+ </a>
+ {% endif %}
+ {% endfor %}
+</div>
diff --git a/biscuit/core/templates/bootstrap4-navbar.html b/biscuit/core/templates/bootstrap4-navbar.html
new file mode 100644
index 000000000..a6cb7136f
--- /dev/null
+++ b/biscuit/core/templates/bootstrap4-navbar.html
@@ -0,0 +1,22 @@
+{% for item in menu %}
+ {% if item.visible %}
+ {% if item.separator %}
+ <li class="divider-vertical"></li>
+ {% endif %}
+
+ <li class="nav-item {% if item.selected %} active{% endif %}{% if item.children %} dropdown{% endif %}" id="top-menu-{{ item.slug }}">
+ <a href="{{ item.url }}" {% if not item.children %}class=nav-link {% endif%} {% if item.children %} class="nav-link dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"{% endif %}>
+ {% if item.icon %}
+ <i class="icon-{{ item.icon }} icon-white"></i>
+ {% endif %}
+ <span>{{ item.title }}</span>
+ {% if item.children %}
+ <b class="caret"></b>
+ {% endif %}
+ </a>
+ {% if item.children %}
+ {% include 'bootstrap4-navbar-submenu.html' with items=item.children %}
+ {% endif %}
+ </li>
+ {% endif %}
+{% endfor %}
diff --git a/biscuit/core/templates/core/base.html b/biscuit/core/templates/core/base.html
index b8b60ee8e..d6f1106e4 100644
--- a/biscuit/core/templates/core/base.html
+++ b/biscuit/core/templates/core/base.html
@@ -1,26 +1,23 @@
-{% extends "bootstrap3/bootstrap3.html" %}
-{% load bootstrap3 menu staticfiles %}
+{% extends "bootstrap4/bootstrap4.html" %}
+{% load bootstrap4 menu staticfiles font_awesome %}
-{% block bootstrap3_title %}BiscuIT School Information System{% endblock %}
+{% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
-{% block bootstrap3_extra_head %}
+{% block bootstrap4_extra_head %}
<link rel="stylesheet" href="{% static 'style.css' %}" />
- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
+ <link rel="stylesheet" type="text/css" href="/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"/>
<link rel="shortcut icon" href="#" />
{% endblock %}
-{% block bootstrap3_extra_script %}
- <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.js"></script>
+{% block bootstrap4_extra_script %}
+ <script type="text/javascript" src="/javascript/jquery-datatables/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}" /></script>
{% endblock %}
-{% block bootstrap3_content %}
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- <div class="navbar-header page-scroll">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
- <span class="sr-only">Toggle navigation</span>
- <span class="glyphicon glyphicon-th-list"></span>
+{% block bootstrap4_content %}
+ <nav class="navbar navbar-light bg-light navbar-expand-md">
+ <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main">
+ {% fa 'fa-align-justify' %}
</button>
<a class="navbar-brand" href="{% url "index" %}">
<span class="glyphicon glyphicon-briefcase"></span> BiscuIT School Information System
@@ -29,8 +26,8 @@
<div class="collapse navbar-collapse" id="navbar-main">
{% generate_menu %}
- <ul class="nav navbar-nav navbar-right">
- {% with menu=menus.main %}{% include "bootstrap-navbar.html" %}{% endwith %}
+ <ul class="nav navbar-nav ml-auto">
+ {% with menu=menus.main %}{% include "bootstrap4-navbar.html" %}{% endwith %}
</ul>
</div>
</div>
diff --git a/biscuit/core/templates/core/index.html b/biscuit/core/templates/core/index.html
index a2ecc73cf..71946560d 100644
--- a/biscuit/core/templates/core/index.html
+++ b/biscuit/core/templates/core/index.html
@@ -1,5 +1,5 @@
{% extends "core/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
{% block page_title %}BiscuIT School Information System (SIS){% endblock %}
diff --git a/biscuit/core/templates/registration/login.html b/biscuit/core/templates/registration/login.html
index 542acd501..42d7edb16 100644
--- a/biscuit/core/templates/registration/login.html
+++ b/biscuit/core/templates/registration/login.html
@@ -1,5 +1,5 @@
{% extends "core/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
{% block content %}
{% if next %}
diff --git a/local.cfg b/local.cfg
index e31c7f40f..59b3f82c5 100644
--- a/local.cfg
+++ b/local.cfg
@@ -8,4 +8,10 @@ DEBUG = true
LANGUAGE_CODE = "de-de"
SECRET_KEY = "DO_NOT_USE_waabah0uGu9okahtee2UbaijahS0cuJo"
TIME_ZONE = "Europe/Berlin"
-
+FONT_AWESOME.url = "/javascript/font-awesome/css/font-awesome.min.css"
+BOOTSTRAP4.css_url = "/javascript/bootstrap4/css/bootstrap.min.css"
+BOOTSTRAP4.javascript_url = "/javascript/bootstrap4/js/bootstrap.min.js"
+BOOTSTRAP4.jquery_url = "/javascript/jquery/jquery.min.js"
+BOOTSTRAP4.popper_url = "/javascript/popper.js/popper.min.js"
+DATATABLES.css_url = "/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"
+DATATABLES.js_url = "/javascript/jquery-datatables/dataTables.bootstrap4.min.js"
diff --git a/setup.py b/setup.py
index 023382e57..48c0a720c 100755
--- a/setup.py
+++ b/setup.py
@@ -17,7 +17,8 @@ setup(
include_package_data=True,
install_requires=[
'Django >= 2.0',
- 'django-bootstrap3',
+ 'django-bootstrap4',
+ 'django-fa',
'django-easy-audit',
'django-local-settings',
'django-simple-menu',
--
GitLab