Merge branch '58-migrate-to-materialize-css' into 'master'

Resolve "Migrate to materialize.css"

Closes #58

See merge request AlekSIS/AlekSIS-App-Alsijil!37

aleksis/apps/alsijil/menus.py

@@ -5,6 +5,7 @@ MENUS = {
         {
             "name": _("Class register"),
             "url": "#",
+            "icon": "chrome_reader_mode",
             "root": True,
             "validators": [
                 "menu_generator.validators.is_authenticated",
@@ -14,21 +15,25 @@ MENUS = {
                 {
                     "name": _("Current lesson"),
                     "url": "lesson",
+                    "icon": "alarm",
                     "validators": ["menu_generator.validators.is_authenticated"],
                 },
                 {
                     "name": _("Current week"),
                     "url": "week_view",
+                    "icon": "view_week",
                     "validators": ["menu_generator.validators.is_authenticated"],
                 },
                 {
                     "name": _("Register absence"),
                     "url": "register_absence",
+                    "icon": "rate_review",
                     "validators": ["menu_generator.validators.is_superuser"],
                 },
                 {
                     "name": _("Personal note filters"),
                     "url": "list_personal_note_filters",
+                    "icon": "filter_list",
                     "validators": ["menu_generator.validators.is_superuser"],
                 },
             ],

aleksis/apps/alsijil/static/css/alsijil/alsijil.css

+table.datatable a {
+  color: inherit !important;
+}

aleksis/apps/alsijil/templates/alsijil/lesson.html

 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n static %}
+{% load material_form i18n static %}
 
-{% block bootstrap4_extra_head %}
+{% block browser_title %}{% blocktrans %}Lesson{% endblocktrans %}{% endblock %}
+
+{% block extra_head %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'css/alsijil/lesson.css' %}" />
 {% endblock %}
 
-{% block bootstrap4_title %}{% blocktrans%}Lesson documentation{% endblocktrans %} - {{ block.super }}{% endblock %}
-
 {% block page_title %}
   {{ day }} -
 
@@ -28,57 +28,51 @@
     {% csrf_token %}
 
     <div class="row">
-      <div class="col-md-8">
-        <div class="card">
-          <div class="card-header bg-light text-dark">
+      <div class="col s8">
+        <div class="card dark-text">
+          <span class="card-title">
             {% blocktrans %}Lesson documentation{% endblocktrans %}
           </div>
-          <div class="card-body">
-            {% csrf_token %}
-            {% bootstrap_form lesson_documentation_form %}
-          </div>
+          {% csrf_token %}
+          {% form form=lesson_documentation_form %}{% endform %}
         </div>
       </div>
-      <div class="col-md-4">
-        <div class="card">
-          <div class="card-header bg-light text-dark">
+      <div class="col s4">
+        <div class="card dark-text">
+          <span class="card-title">
             {% blocktrans %}Change history{% endblocktrans %}
-          </div>
+          </span>
           {% include 'core/crud_events_ul.html' with class_ul='list-group list-group-flush' class_li='list-group-item d-flex justify-content-between align-items-center' obj=lesson_documentation %}
         </div>
       </div>
     </div>
 
-    <div class="card">
-      <div class="card-header bg-light text-dark">
+    <div class="card dark-text">
+      <span class="card-title">
         {% blocktrans %}Personal notes{% endblocktrans %}
-      </div>
-      <div class="card-body">
-        {{ personal_note_formset.management_form }}
+      </span>
+      {{ personal_note_formset.management_form }}
 
-        <table class="table table-striped table-bordered table-hover table-responsive-xl">
+      <table class="striped responsive-table">
+        <tr>
+          <th>{% blocktrans %}Person{% endblocktrans %}</th>
+          <th>{% blocktrans %}Absent{% endblocktrans %}</th>
+          <th>{% blocktrans %}Tardiness{% endblocktrans %}</th>
+          <th>{% blocktrans %}Excused{% endblocktrans %}</th>
+          <th>{% blocktrans %}Remarks{% endblocktrans %}</th>
+        </tr>
+        {% for form in personal_note_formset %}
+          {{ form.id }}
           <tr>
-            <th>{% blocktrans %}Person{% endblocktrans %}</th>
-            <th>{% blocktrans %}Absent{% endblocktrans %}</th>
-            <th>{% blocktrans %}Tardiness{% endblocktrans %}</th>
-            <th>{% blocktrans %}Excused{% endblocktrans %}</th>
-            <th>{% blocktrans %}Remarks{% endblocktrans %}</th>
+            <td>{{ form.person_name }}</td>
+            <td>{{ form.absent }}</td>
+            <td>{{ form.late }}</td>
+            <td>{{ form.excused }}</td>
+            <td>{{ form.remarks }}</td>
           </tr>
-          {% for form in personal_note_formset %}
-            {{ form.id }}
-            <tr>
-              <td>{{ form.person_name }}</td>
-              <td>{{ form.absent }}</td>
-              <td>{{ form.late }}</td>
-              <td>{{ form.excused }}</td>
-              <td>{{ form.remarks }}</td>
-            </tr>
-          {% endfor %}
-        </table>
-      </div>
+        {% endfor %}
+      </table>
     </div>
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-content-save"></span>
-    </button>
+    {% include "core/save_button.html" %}
   </form>
 {% endblock %}

aleksis/apps/alsijil/templates/alsijil/manage_personal_note_filter.html

 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n static %}
-
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ personal_note_filter_form.media.css }}
-{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {{ block.super }}
-  {{ personal_note_filter_form.media.js }}
-{% endblock %}
-
-{% block bootstrap4_title %}{% blocktrans%}Manage personal note filter{% endblocktrans %} - {{ block.super }}{% endblock %}
+{% load material_form i18n static %}
 
+{% block browser_title %}{% blocktrans %}Manage personal note filter{% endblocktrans %}{% endblock %}
 {% block page_title %}{% blocktrans %}Manage personal note filter{% endblocktrans %}{% endblock %}
 
 {% block content %}
-<div class="d-flex justify-content-between">
-    <div class="btn-group" role="group" aria-label="Filter actions">
-      {% if personal_note_filter %}
-        <a href="{% url 'delete_personal_note_filter' personal_note_filter.id %}" class="btn btn-danger">
-          <span class="mdi mdi-delete"></span>
-        </a>
-      {% endif %}
-    </div>
-  </div>
+  {% if personal_note_filter %}
+    <a href="{% url 'delete_personal_note_filter' personal_note_filter.id %}" class="waves-effect waves-dark btn red">
+      <i class="material-icons">delete</i>{% blocktrans %}Delete filter{% endblocktrans %}
+    </a>
+  {% endif %}
 
   <form method="post">
     {% csrf_token %}
-    {% bootstrap_form personal_note_filter_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-content-save"></span>
-    </button>
+    {% form form=personal_note_filter_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
 
 {% endblock %}

aleksis/apps/alsijil/templates/alsijil/manage_personal_note_filters.html

-{# -*- engine:django -*- #}
-{% extends "core/base.html" %}
-{% load bootstrap4 i18n static %}
-
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ personal_note_filters_form.media.css }}
-{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {{ block.super }}
-  {{ personal_note_filters_form.media.js }}
-{% endblock %}
-
-{% block bootstrap4_title %}{% blocktrans%}Manage personal note filters{% endblocktrans %} - {{ block.super }}{% endblock %}
-
-{% block page_title %}{% blocktrans %}Manage personal note filters{% endblocktrans %}{% endblock %}
-
-{% block content %}
-<div class="d-flex justify-content-between">
-    <div class="btn-group" role="group" aria-label="Filter actions">
-      {% if personal_note_filters %}
-        <a href="{% url 'delete_personal_note_filters' personal_note_filters.id %}" class="btn btn-danger">
-          <span class="mdi mdi-delete"></span>
-        </a>
-      {% endif %}
-    </div>
-  </div>
-
-  <form method="post">
-    {% csrf_token %}
-    {% bootstrap_form personal_note_filters_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-content-save"></span>
-    </button>
-  </form>
-
-{% endblock %}

aleksis/apps/alsijil/templates/alsijil/personal_note_filters.html

 {# -*- engine:django -*- #}
 
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n %}
+{% load i18n %}
 {% load render_table from django_tables2 %}
 
-{% block bootstrap4_title %}{% blocktrans %}List of all personal note filters{% endblocktrans %} - {{ block.super }}{% endblock %}
+{% block browser_title %}{% blocktrans %}List of all personal note filters{% endblocktrans %}{% endblock %}
 {% block page_title %}{% blocktrans %}List of all personal note filters{% endblocktrans %}{% endblock %}
 
 {% block content %}
- <div class="btn-group" role="group" aria-lable="Filter actions">
-    <a href="{% url 'create_personal_note_filter' %}" class="btn btn-dark">
-      <span class="mdi mdi-plus"></span>
-    </a>
-  </div>
+  <a href="{% url 'create_personal_note_filter' %}" class="waves-effect waves-dark green btn">
+    <i class="material-icons">add</i>{% blocktrans %}Add filter{% endblocktrans %}
+  </a>
 
   {% render_table personal_note_filters_table %}
 {% endblock %}

aleksis/apps/alsijil/templates/alsijil/print/full_register.html

-{% load staticfiles i18n cropping data_helpers week_helpers %}
+{% load static i18n cropping data_helpers week_helpers %}
 
 <!DOCTYPE html>
 <html>
@@ -8,8 +8,6 @@
       href="{% static 'css/alsijil/paper.css' %}" />
     <link rel="stylesheet"
       href="{% static 'css/alsijil/full_register.css' %}" />
-    <link rel="stylesheet"
-      href="{% static '@mdi/font/css/materialdesignicons.css' %}" />
   </head>
 
   <body class="A4">
@@ -135,36 +133,36 @@
                 <img src="{% static 'img/fallback.png' %}" alt="{{ person.first_name }} {{ person.last_name }}" />
               {% endif %}
             </td>
-            <td><span class="mdi mdi-account"></span></td>
+            <td><i class="material-icons">person</i></td>
             <td>{{ person.first_name }}</td>
             <td>{{ person.additional_name }}</td>
             <td>{{ person.last_name }}</td>
           </tr>
           <tr>
-            <td><span class="mdi mdi-gender-male-female"></span></td>
+            <td><i class="material-icons">face</i></td>
             <td colspan="3">{{ person.get_sex_display }}</td>
           </tr>
           <tr>
-            <td><span class="mdi mdi-home"></span></td>
+            <td><i class="material-icons">home</i></td>
             <td colspan="2">{{ person.street }} {{ person.housenumber }}</td>
             <td colspan="2">{{ person.postal_code }} {{ person.place }}</td>
           </tr>
           <tr>
-            <td><span class="mdi mdi-phone"></span></td>
+            <td><i class="material-icons">phone</i></td>
             <td>{{ person.phone_number }}</td>
             <td>{{ person.mobile_number }}</td>
           </tr>
           <tr>
-            <td><span class="mdi mdi-email"></span></td>
+            <td><i class="material-icons">email</i></td>
             <td colspan="3">{{ person.email }}</td>
           </tr>
           <tr>
-            <td><span class="mdi mdi-gift"></span></td>
+            <td><i class="material-icons">gift</i></td>
             <td colspan="3">{{ person.date_of_birth|date }}</td>
           </tr>
           {% comment %}
             <tr>
-            <td><span class="mdi mdi-school"></span></td>
+            <td><i class="material-icons">school</i></td>
             <td>Class</td>
             <td>Teacher</td>
             </tr>

aleksis/apps/alsijil/templates/alsijil/register_absence.html

 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n static %}
-
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ register_absence_form.media.css }}
-{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {{ block.super }}
-  {{ register_absence_form.media.js }}
-{% endblock %}
-
-{% block bootstrap4_title %}{% blocktrans%}Manage absence{% endblocktrans %} - {{ block.super }}{% endblock %}
+{% load material_form i18n static %}
 
+{% block browser_title %}{% blocktrans %}Manage absence{% endblocktrans %}{% endblock %}
 {% block page_title %}{% blocktrans %}Manage absence{% endblocktrans %}{% endblock %}
 
 {% block content %}
 
   <form method="post">
     {% csrf_token %}
-    {% bootstrap_form register_absence_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-content-save"></span>
-    </button>
+    {% form form=register_absence_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
 
 {% endblock %}

aleksis/apps/alsijil/templates/alsijil/week_view.html

 {# -*- engine:django -*- #}
 
-{% extends "core/turnable.html" %}
-{% load bootstrap4 i18n week_helpers %}
+{% extends "core/base.html" %}
+{% load material_form i18n week_helpers %}
 
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ select_form.media.css }}
-{% endblock %}
+{% block browser_title %}{% blocktrans %}Week view{% endblocktrans %}{% endblock %}
 
-{% block bootstrap4_extra_script %}
+{% block extra_head %}
   {{ block.super }}
-  {{ select_form.media.js }}
+  <link rel="stylesheet" href="{% static 'css/alsijil/alsijil.css' %}" />
 {% endblock %}
 
-{% block bootstrap4_title %}{% blocktrans%}Current week{% endblocktrans %} — {{ block.super }}{% endblock %}
-
-{% block current_content %}
-  <div class="d-flex justify-content-between">
+{% block content %}
+ <div class="row">
+  <div class="col s10">
     <form method="get">
       <ul id="timetable_select_form">
-        {{ select_form.as_ul }}
+        {% form form=select_form %}{% endform %}
       </ul>
-      <button type="submit" class="btn btn-dark">
+      <button type="submit" class="btn waves-effect waves-light">
         {% blocktrans %}Select{% endblocktrans %}
       </button>
     </form>
-    {% if group %}
-      <a class="btn btn-dark" href="{% url 'full_register_group' group.id %}">
-        <span class="mdi mdi-printer"></span>
-      </a>
-    {% endif %}
   </div>
+  {% if group %}
+    <div class="col s2">
+      <a class="btn waves-effect waves-light" href="{% url 'full_register_group' group.id %}">
+        <i class="material-icons">printer</i>
+      </a>
+    </div>
+  {% endif %}
+ </div>
 
   {% if lesson_periods.count %}
     <div class="row">
-      <div class="col-md-7">
-        <div class="card">
-          <div class="card-header bg-light text-dark">
-            {% blocktrans %}Lessons{% endblocktrans %}
-          </div>
-          <div class="card-body">
-            {% regroup lesson_periods by period.get_weekday_display as periods_by_day %}
-            {% for weekday, periods in periods_by_day %}
-              <h3>{{ weekday }}</h3>
-              <table class="table table-striped table-bordered table-hover table-responsive-xl">
+      <div class="col s7">
+        {% regroup lesson_periods by period.get_weekday_display as periods_by_day %}
+        {% for weekday, periods in periods_by_day %}
+          <div class="card">
+            <div class="card-content">
+              <span class="card-title">
+                {{ weekday }}
+              </span>
+              <table class="striped responsive-table datatable">
                 <thead>
                   <tr>
                     <th>{% blocktrans %}Period{% endblocktrans %}</th>
@@ -55,15 +53,15 @@
                   {% for period in periods %}
                     <tr class="
                       {% if period.has_documentation %}
-                        table-success
+                        success
                       {% else %}
                         {% weekday_to_date week period.period.weekday as current_date %}
                         {% today as today %}
                         {% if current_date < today %}
-                          table-danger
+                          error
                         {% else %}
                           {% if period.get_substitution %}
-                            table-warning
+                            warning
                             {% if period.get_substitution.cancelled %}
                               alsijil-lesson-cancelled
                             {% endif %}
@@ -82,17 +80,17 @@
                   {% endfor %}
                 </tbody>
               </table>
-            {% endfor %}
+            </div>
           </div>
-        </div>
+        {% endfor %}
       </div>
-      <div class="col-md-5">
+      <div class="col s5">
         <div class="card">
-          <div class="card-header bg-light text-dark">
-            {% blocktrans %}Personal notes{% endblocktrans %}
-          </div>
-          {% for person in persons %}
-            <div class="card-body">
+          <div class="card-content">
+            <span class="card-title">
+              {% blocktrans %}Personal notes{% endblocktrans %}
+            </span>
+            {% for person in persons %}
               <h5 class="card-title">{{ person.full_name }}</h5>
               <p class="card-text">
                 {% trans "Absent" %}: {{ person.absences }}
@@ -112,17 +110,17 @@
                   </blockquote>
                 {% endif %}
               {% endfor %}
-            </div>
-          {% endfor %}
+            {% endfor %}
+          </div>
         </div>
       </div>
     </div>
   {% else %}
-    <div class="card text-white bg-danger">
-      <div class="card-header">
-        {% blocktrans %}No group selected{% endblocktrans %}
-      </div>
-      <div class="card-body">
+    <div class="card red darken-1">
+      <div class="card-content white-text">
+        <span class="card-title">
+          {% blocktrans %}No group selected{% endblocktrans %}
+        </span>
         <p>
           {% blocktrans %}
             There are no lessons for the selected group, teacher, room or time.

poetry.lock

@@ -11,7 +11,6 @@ Django = "^3.0"
 Pillow = "^7.0"
 colour = "^0.1.5"
 django-any-js = "^1.0"
-django-bootstrap4 = "^1.0"
 django-debug-toolbar = "^2.0"
 django-easy-audit = "^1.2rc1"
 django-filter = "^2.2.0"
@@ -208,17 +207,6 @@ version = "1.0.3"
 django = "*"
 six = "*"
 
-[[package]]
-category = "main"
-description = "Bootstrap support for Django projects"
-name = "django-bootstrap4"
-optional = false
-python-versions = "*"
-version = "1.1.1"
-
-[package.dependencies]
-beautifulsoup4 = "*"
-
 [[package]]
 category = "main"
 description = "Bulk update using one query over Django ORM."
@@ -918,10 +906,6 @@ django-appconf = [
     {file = "django-appconf-1.0.3.tar.gz", hash = "sha256:35f13ca4d567f132b960e2cd4c832c2d03cb6543452d34e29b7ba10371ba80e3"},
     {file = "django_appconf-1.0.3-py2.py3-none-any.whl", hash = "sha256:c98a7af40062e996b921f5962a1c4f3f0c979fa7885f7be4710cceb90ebe13a6"},
 ]
-django-bootstrap4 = [
-    {file = "django-bootstrap4-1.1.1.tar.gz", hash = "sha256:39f97cbce85eb66f6d76be2029bae171bd3863d0c6932b1c2dae7f299c569b90"},
-    {file = "django_bootstrap4-1.1.1-py3-none-any.whl", hash = "sha256:0fcd84f8414a58b43df0b331c00c8b2f1786ae28f75f419b4d33b06fca43e0d1"},
-]
 django-bulk-update = [
     {file = "django-bulk-update-2.2.0.tar.gz", hash = "sha256:5ab7ce8a65eac26d19143cc189c0f041d5c03b9d1b290ca240dc4f3d6aaeb337"},
     {file = "django_bulk_update-2.2.0-py2.py3-none-any.whl", hash = "sha256:49a403392ae05ea872494d74fb3dfa3515f8df5c07cc277c3dc94724c0ee6985"},