Display horizontal cards on smaller devices instead of responsive tables

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

@@ -7,6 +7,7 @@
 {% block extra_head %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'css/alsijil/lesson.css' %}"/>
+  <link rel="stylesheet" href="{% static 'css/alsijil/week_view.css' %}"/>
 {% endblock %}
 
 {% block nav_content %}

aleksis/apps/alsijil/templates/alsijil/partials/lesson/tabs/notes.html

@@ -12,16 +12,17 @@
   {% endif %}
 {% endif %}
 
-<div class="card">
+{% if can_edit_register_object_personalnote %}
+  {% form form=personal_note_formset.management_form %}{% endform %}
+{% endif %}
+
+<div class="card hide-on-med-and-down">
   <div class="card-content">
     <span class="card-title">
       {% blocktrans %}Personal notes{% endblocktrans %}
     </span>
-    {% if can_edit_register_object_personalnote %}
-      {% form form=personal_note_formset.management_form %}{% endform %}
-    {% endif %}
 
-    <table class="striped responsive-table alsijil-table">
+    <table class="striped alsijil-table">
       <thead>
       <tr>
         <th>{% blocktrans %}Person{% endblocktrans %}</th>
@@ -128,6 +129,73 @@
     </table>
   </div>
 </div>
+<div class="hide-on-large-only">
+  <h2>{% trans "Personal Notes" %}</h2>
+
+  <div class="horizontal-scroll-container">
+    {% for form in personal_note_formset %}
+      <div class="card horizontal-scroll-card">
+        <div class="card-content">
+          <span class="card-title">{{ form.person_name.value }}</span>
+          {% if can_edit_register_object_personalnote %}
+            {% form form=form %}{% endform %}
+          {% else %}
+            <table>
+              {% if form.instance.person.group_roles.all %}
+
+                <tr>
+                  <th>{% trans "Group roles" %}</th>
+                  <td>
+                    <p>
+                      {% for assignment in form.instance.person.group_roles.all %}
+                        {% include "alsijil/group_role/chip.html" with role=assignment.role %}
+                      {% endfor %}
+                    </p>
+                  </td>
+                </tr>
+              {% endif %}
+              <tr>
+                <th>{% trans "Absent" %}</th>
+                <td><i class="material-icons center">{{ form.absent.value|yesno:"check,clear" }}</i></td>
+              </tr>
+              <tr>
+                <th>{% trans "Tardiness" %}</th>
+                <td>
+                  <i class="material-icons center">{{ form.late.value|yesno:"check,clear" }}</i>
+                  <span class="alsijil-tardiness-text">
+                {% if form.late.value %}{{ form.late.value|to_time|time:"i\m" }}{% endif %}
+              </span>
+                </td>
+              </tr>
+              <tr>
+                <th>{% trans "Excused" %}</th>
+                <td><i class="material-icons center">{{ form.excused.value|yesno:"check,clear" }}</i></td>
+              </tr>
+              <tr>
+                <th>{% trans "Excuse type" %}</th>
+                <td>{% firstof form.instance.excuse_type "–" %}</td>
+              </tr>
+              <tr>
+                <th>{% trans "Extra marks" %}</th>
+                <td>
+                  {% for extra_mark in form.instance.extra_marks.all %}
+                    {{ extra_mark }}{% if not forloop.last %},{% endif %}
+                    {% empty %}
+                    –
+                  {% endfor %}
+                </td>
+              </tr>
+              <tr>
+                <th>{% trans "Remarks" %}</th>
+                <td>{% firstof form.remarks.value "–" %}</td>
+              </tr>
+            </table>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
 {% if not blocked_because_holidays %}
   {% if can_edit_lesson_documentation or can_edit_register_object_personalnote %}
     <button type="submit"