Migrate to material-design-icons. Closes #116.

biscuit/core/settings.py

@@ -57,7 +57,6 @@ INSTALLED_APPS = [
     "dbsettings",
     "django_cron",
     "bootstrap4",
-    "fa",
     "django_any_js",
     "django_yarnpkg",
     "django_tables2",
@@ -233,13 +232,11 @@ STATIC_ROOT = _settings.get("static.root", os.path.join(BASE_DIR, "static"))
 MEDIA_ROOT = _settings.get("media.root", os.path.join(BASE_DIR, "media"))
 NODE_MODULES_ROOT = _settings.get("node_modules.root", os.path.join(BASE_DIR, "node_modules"))
 
-YARN_INSTALLED_APPS = ["bootstrap", "font-awesome", "jquery", "popper.js", "datatables", "select2"]
+YARN_INSTALLED_APPS = ["bootstrap", "@mdi/font", "jquery", "popper.js", "datatables", "select2"]
 
 JS_URL = _settings.get("js_assets.url", STATIC_URL)
 JS_ROOT = _settings.get("js_assets.root", NODE_MODULES_ROOT + "/node_modules")
 
-FONT_AWESOME = {"url": JS_URL + "/font-awesome/css/font-awesome.min.css"}
-
 BOOTSTRAP4 = {
     "css_url": JS_URL + "/bootstrap/dist//css/bootstrap.min.css",
     "javascript_url": JS_URL + "/bootstrap/dist/js/bootstrap.min.js",

biscuit/core/templates/core/base.html

@@ -2,14 +2,14 @@
 
 {% extends "bootstrap4/bootstrap4.html" %}
 
-{% load bootstrap4 i18n menu_generator static font_awesome any_js sass_tags %}
+{% load bootstrap4 i18n menu_generator static any_js sass_tags %}
 
 {% block bootstrap4_extra_head %}
-  {% fa_css %}
   {% include_css "DataTables-Bootstrap4" %}
   {% include 'core/icons.html' %}
   <link rel="stylesheet" href="{% sass_src 'bootstrap_modified.scss' %}" />
   <link rel="stylesheet" href="{% static 'css/style.css' %}" />
+  <link rel="stylesheet" href="{% static '@mdi/font/css/materialdesignicons.css' %}" />
 {% endblock %}
 
 {% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
@@ -24,10 +24,10 @@
   <header>
     <nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
       <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main">
-        {% fa 'fa-align-justify' %}
+        <span class="mdi mdi-menu"></span>
       </button>
       <a class="navbar-brand" href="{% url "index" %}">
-        {% fa 'fa-briefcase' %} BiscuIT SIS
+        <span class="mdi mdi-briefcase"></span> BiscuIT SIS
       </a>
 
       <div class="collapse navbar-collapse" id="navbar-main">

biscuit/core/templates/core/crud_events_ul.html

-{% load font_awesome %}
-
 <ul class="{{ class_ul }}">
   {% for event in obj.crud_events %}
     <li class="{{ class_li }}">
@@ -9,15 +7,15 @@
       </div>
       <span class="badge badge-light text-dark">
         {% if event.event_type == event.CREATE %}
-          {% fa 'plus' %} 
+          <span class="mdi mdi-plus"></span>
         {% elif event.event_type == event.UPDATE %}
-          {% fa 'pencil' %} 
+          <span class="mdi mdi-pencil"></span>
         {% elif event.event_type == event.DELETE %}
-          {% fa 'trash' %} 
+          <span class="mdi mdi-delete"></span>
         {% elif event.event_type == event.M2M_CHANGE %}
-          {% fa 'pencil' %} 
+          <span class="mdi mdi-pencil"></span>
         {% elif event.event_type == event.M2M_CHANGE_REV %}
-          {% fa 'pencil' %} 
+          <span class="mdi mdi-pencil"></span>
         {% endif %}
       </span>
     </li>

biscuit/core/templates/core/footer-menu.html

 {# -*- engine:django -*- #}
 
-{% load menu_generator font_awesome i18n %}
+{% load menu_generator i18n %}
 
 {% get_menu "FOOTER_MENU_CORE" as footer_menu %}
 {% regroup footer_menu by submenu|length_is:"0" as footer_menus %}
@@ -12,7 +12,7 @@
         <h5>{{ item.name }}</h5>
         <ul class="list-unstyled quick-links">
           {% for menu in item.submenu %}
-            <li><a class="font-weight-bold text-dark" href="{{ menu.url }}">{% fa 'fa-angle-double-right' %} {{ menu.name }}</a></li>
+            <li><a class="font-weight-bold text-dark" href="{{ menu.url }}"><span class="mdi mdi-chevron-double-right"></span> {{ menu.name }}</a></li>
           {% endfor %}
         </ul>
       </div>
@@ -26,7 +26,7 @@
       <h5>{% blocktrans %}Assorted{% endblocktrans %}</h5>
       <ul class="list-unstyled quick-links">
         {% for item in menu.list %}
-          <li><a class="font-weight-bold text-dark" href="{{ item.url }}">{% fa 'fa-angle-double-right' %} {{ item.name }}</a></li>
+          <li><a class="font-weight-bold text-dark" href="{{ item.url }}"><span class="mdi mdi-chevron-double-right"></span> {{ item.name }}</a></li>
         {% endfor %}
       </ul>
     </div>

biscuit/core/templates/core/group_full.html

@@ -2,7 +2,7 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 font_awesome i18n static %}
+{% load bootstrap4 i18n static %}
 {% load render_table from django_tables2 %}
 
 {% block bootstrap4_title %}{% blocktrans %}Group{% endblocktrans %} - {{ block.super }}{% endblock %}
@@ -19,7 +19,7 @@
       <h3>{% blocktrans %}Details{% endblocktrans %}</h3>
       <table class="table table-responsive-xl table-border table-striped">
         <tr>
-          <td>{% fa 'users' %}</td>
+          <td><span class="mdi mdi-account-group"></span></td>
           <td>{{ group.name }}</td>
           <td>{{ group.short_name }}</td>
         </tr>

biscuit/core/templates/core/groups.html

@@ -2,7 +2,7 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 font_awesome i18n %}
+{% load bootstrap4 i18n %}
 {% load render_table from django_tables2 %}
 
 {% block bootstrap4_title %}{% blocktrans %}Groups{% endblocktrans %} - {{ block.super }}{% endblock %}
@@ -12,7 +12,7 @@
 {% block content %}
   <div class="btn-group" role="group" aria-lable="Group actions">
     <a href="{% url 'create_group' %}" class="btn btn-dark">
-      {% fa 'plus' %}
+      <span class="mdi mdi-plus"></span>
     </a>
   </div>
 

biscuit/core/templates/core/person_full.html

@@ -2,7 +2,7 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 font_awesome i18n static cropping %}
+{% load bootstrap4 i18n static cropping %}
 {% load render_table from django_tables2 %}
 
 {% block bootstrap4_title %}{% blocktrans %}Person{% endblocktrans %} - {{ block.super }}{% endblock %}
@@ -26,36 +26,36 @@
               <img class="person-img" src="{% static 'img/fallback.png' %}" alt="{{ person.first_name }} {{ person.last_name }}" />
             {% endif %}
           </td>
-          <td>{% fa 'user' %}</td>
+          <td><span class="mdi mdi-account"></span></td>
           <td>{{ person.first_name }}</td>
           <td>{{ person.additional_name }}</td>
           <td>{{ person.last_name }}</td>
         </tr>
         <tr>
-          <td>{% fa 'venus-mars' %}</td>
+          <td><span class="mdi mdi-gender-male-female"></td>
           <td colspan="3">{{ person.get_sex_display }}</td>
         </tr>
         <tr>
-          <td>{% fa 'fa-home' %}</td>
+          <td><span class="mdi mdi-home"></span></td>
           <td colspan="2">{{ person.street }} {{ person.housenumber }}</td>
           <td colspan="2">{{ person.postal_code }} {{ person.place }}</td>
         </tr>
         <tr>
-          <td>{% fa 'phone-square' %}</td>
+          <td><span class="mdi mdi-phone"></span></td>
           <td>{{ person.phone_number }}</td>
           <td>{{ person.mobile_number }}</td>
         </tr>
         <tr>
-          <td>{% fa 'envelope' %}</td>
+          <td><span class="mdi mdi-email"></span></td>
           <td colspan="3">{{ person.email }}</td>
         </tr>
         <tr>
-          <td>{% fa 'gift' %}</td>
+          <td><span class="mdi mdi-cake"></span></td>
           <td colspan="3">{{ person.date_of_birth|date }}</td>
         </tr>
         {% comment %}
           <tr>
-          <td>{% fa 'graduation-cap' %}</td>
+          <td><span class="mdi mdi-school"></span></td>
           <td>Class</td>
           <td>Teacher</td>
           </tr>

biscuit/core/templates/core/system_status.html

 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load i18n font_awesome %}
+{% load i18n %}
 
 {% block bootstrap4_title %}{% blocktrans %}System status{% endblocktrans %} - {{ block.super }}{% endblock %}
 
@@ -13,18 +13,18 @@
     </div>
     <ul class="list-group list-group-flush">
       <li class="list-group-item d-flex justify-content-between align-items-center">
-       {% if maintenance_mode %} 
+       {% if maintenance_mode %}
         <div>
           <p>{% blocktrans %}Maintenance mode enabled{% endblocktrans %}</p>
           <p class="small">{% blocktrans%}Only admin and visitors from internal IPs can access the site.{% endblocktrans %}</p>
         </div>
-        <span class="badge badge-danger"><a href="{% url 'maintenance_mode_off' %}">{% fa 'power-off' %}</a></span>
+        <span class="badge badge-danger mdi mdi-power"><a href="{% url 'maintenance_mode_off' %}"></a></span>
        {% else %}
         <div>
           <p>{% blocktrans %}Maintenance mode disabled{% endblocktrans %}</p>
           <p class="small">{% blocktrans%}Everyone can access the site.{% endblocktrans %}</p>
         </div>
-        <span class="badge badge-success"><a href="{% url 'maintenance_mode_on' %}">{% fa 'power-off' %}</a></span>
+        <span class="badge badge-success mdi mdi-power"><a href="{% url 'maintenance_mode_on' %}"></a></span>
        {% endif %}
       </li>
       <li class="list-group-item d-flex justify-content-between align-items-center">
@@ -33,13 +33,13 @@
           <p>{% blocktrans %}Debug mode enabled{% endblocktrans %}</p>
           <p class="small">{% blocktrans%}The web server throws back debug information on errors. Do not use in production!{% endblocktrans %}</p>
         </div>
-        <span class="badge badge-danger">{% fa 'power-off' %}</span>
+        <span class="badge badge-danger mdi mdi-power"> </span>
        {% else %}
         <div>
           <p>{% blocktrans %}Debug mode disabled{% endblocktrans %}</p>
           <p class="small">{% blocktrans%}Debug mode is disabled. Default error pages are displayed on errors.{% endblocktrans %}</p>
         </div>
-        <span class="badge badge-success">{% fa 'power-off' %}</span>
+        <span class="badge badge-success mdi mdi-power"> </span>
         {% endif %}
       </li>
     </ul>
@@ -56,9 +56,9 @@
             <p>{{ backup.end_time }}</p>
           </div>
           {% if backup.is_success %}
-            <span class="badge badge-success">{% fa 'check' %}</span>
+            <span class="badge badge-success mdi mdi-check"> </span>
           {% else %}
-            <span class="badge badge-danger">{% fa 'times' %}</span>
+            <span class="badge badge-danger mdi mdi-error"> </span>
           {% endif %}
         </li>
       {% endfor %}

biscuit/core/templates/core/turnable.html

@@ -2,7 +2,6 @@
 
 {% extends "core/base.html" %}
 
-{% load font_awesome %}
 
 {% block content %}
 
@@ -12,10 +11,10 @@
    </div>
    <div class="btn-group" role="group" aria-label="URL actions">
      <a href="{{ url_prev }}" class="btn btn-dark">
-       {% fa 'arrow-left' %}
+       <span class="mdi mdi-chevron-left"></span>
      </a>
      <a href="{{ url_next }}" class="btn btn-dark">
-       {% fa 'arrow-right' %}
+       <span class="mdi mdi-chevron-right"></span>
      </a>
    </div>
   </div>