Merge branch '206-class-register-personal-notes-unusable-on-mobile-devices' into 'master'

Resolve "Class register / personal notes unusable on mobile devices"

Closes #206

See merge request !269

CHANGELOG.rst

@@ -13,6 +13,7 @@ Fixed
 ~~~~~
 
 * Status icon in single-lesson view showed 'Missing data' although the data were complete.
+* The personal note tab of a lesson was not well usable on mobile devices.
 
 `2.0` - 2022-02-06
 ------------------

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

@@ -15,12 +15,68 @@
 }
 
 
-@media only screen and (max-width : 992px) {
-    table.responsive-table.alsijil-table th,
-    table.responsive-table.alsijil-table td {
-      margin: 0;
-      vertical-align: top;
-      height: 109px;}
+@media only screen and (max-width: 992px) {
+    .no-mobile-card {
+        border: unset;
+        padding: unset;
+        margin: unset;
+        box-shadow: unset;
+    }
+    .no-mobile-card .card-content {
+        padding: unset;
+    }
+    table.alsijil-table.horizontal-on-small {
+        display: block;
+        max-width: calc(100vw - 40px);
+    }
+    table.alsijil-table.horizontal-on-small thead {
+        display: none;
+    }
+    table.alsijil-table.horizontal-on-small tbody {
+        overflow-x: scroll;
+        display: flex;
+        column-gap: 1rem;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        scroll-snap-type: x proximity;
+    }
+
+    table.alsijil-table.horizontal-on-small tr {
+        flex-basis: min(75vw, 400px);
+        flex-shrink: 0;
+        flex-grow: 1;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        scroll-snap-align: center;
+        transition: all .5s;
+        margin: 0.5rem 0 1rem 0;
+        background-color: #fff!important;
+    	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+        padding: 24px;
+    }
+    table.alsijil-table.horizontal-on-small tr:first-of-type {
+        margin-inline-start: .4rem;
+        -moz-margin-start: .4rem;
+        -webkit-margin-start: .4rem;
+    }
+
+    table.alsijil-table.horizontal-on-small tr:last-of-type {
+        margin-inline-end: .4rem;
+        -moz-margin-end: .4rem;
+        -webkit-margin-end: .4rem;
+    }
+    table.alsijil-table.horizontal-on-small td.center-align {
+        text-align: left;
+    }
+    table.alsijil-table.horizontal-on-small .person-name {
+        font-size: 24px;
+        font-weight: 300;
+        display: block;
+        line-height: 32px;
+        margin-bottom: 8px;
+    }
 }
 
 .alsijil-time-head, .alsijil-object-head {

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 no-mobile-card">
   <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 horizontal-on-small">
       <thead>
       <tr>
         <th>{% blocktrans %}Person{% endblocktrans %}</th>
@@ -38,7 +39,7 @@
         {% if can_edit_register_object_personalnote %}
           <tr>
             {{ form.id }}
-            <td>{{ form.person_name }}{{ form.person_name.value }}
+            <td class="person-name">{{ form.person_name }}{{ form.person_name.value }}
               <p>
                 {% for assignment in form.instance.person.group_roles.all %}
                   {% include "alsijil/group_role/chip.html" with role=assignment.role %}
@@ -48,7 +49,7 @@
             <td class="center-align">
               <label>
                 {{ form.absent }}
-                <span></span>
+                <span><span class="hide-on-large-only">{{ form.absent.label }}</span></span>
               </label>
             </td>
             <td>
@@ -62,7 +63,7 @@
             <td class="center-align">
               <label>
                 {{ form.excused }}
-                <span></span>
+                <span><span class="hide-on-large-only">{{ form.excused.label }}</span></span>
               </label>
             </td>
             <td>
@@ -112,9 +113,9 @@
               </span>
             </td>
             <td><i class="material-icons center">{{ form.excused.value|yesno:"check,clear" }}</i></td>
-            <td>{% firstof form.excuse_type.value "–" %}</td>
+            <td>{% firstof form.instance.excuse_type "–" %}</td>
             <td>
-              {% for extra_mark in form.extra_marks.value %}
+              {% for extra_mark in form.instance.extra_marks.all %}
                 {{ extra_mark }}{% if not forloop.last %},{% endif %}
               {% empty %}
                 –