[Person overview] Update mobile design

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

@@ -22,7 +22,7 @@
       {% for note in unexcused_absences %}
         {% weekday_to_date note.calendar_week note.lesson_period.period.weekday as note_date %}
         <li class="collection-item">
-          <form action="" method="post" class="right" style="margin-top: -7px;">
+          <form action="" method="post" class="right hide-on-small-only" style="margin-top: -7px;">
             {% csrf_token %}
             {% trans "Mark as" %}
             <input type="hidden" value="{{ note.pk }}" name="personal_note">
@@ -35,6 +35,12 @@
           {% if note.remarks %}
             <p class="no-margin"><em>{{ note.remarks }}</em></p>
           {% endif %}
+          <form action="" method="post" class="hide-on-med-and-up">
+            {% csrf_token %}
+            {% trans "Mark as" %}
+            <input type="hidden" value="{{ note.pk }}" name="personal_note">
+            {% include "alsijil/partials/mark_as_buttons.html" %}
+          </form>
         </li>
       {% empty %}
         <li class="collection-item flow-text">
@@ -55,9 +61,9 @@
                 <td>{{ stat.absences_count }}</td>
               </tr>
               <tr>
-                <td rowspan="{{ excuse_types.count|add:2 }}" style="width: 16mm;"
-                    class="rotate small-print">{% trans "thereof" %}</td>
-                <th>{% trans 'Excused' %}</th>
+                <td rowspan="{{ excuse_types.count|add:2 }}" class="hide-on-small-only">{% trans "thereof" %}</td>
+                <td rowspan="{{ excuse_types.count|add:2 }}" class="hide-on-med-and-up"></td>
+                <th class="truncate">{% trans 'Excused' %}</th>
                 <td>{{ stat.excused }}</td>
               </tr>
               {% for excuse_type in excuse_types %}
@@ -107,7 +113,7 @@
               {% weekday_to_date note.calendar_week note.lesson_period.period.weekday as note_date %}
               {% ifchanged note_date %}
                 <li class="collection-item">
-                  <form action="" method="post" class="right" style="margin-top: -7px;">
+                  <form action="" method="post" class="right hide-on-small-only" style="margin-top: -7px;">
                     {% csrf_token %}
                     {% trans "Mark all as" %}
                     <input type="hidden" value="{{ note_date|date:"Y-m-d" }}" name="date">
@@ -116,17 +122,22 @@
                   <i class="material-icons left">schedule</i>
                   {{ note_date }}
 
-
+                  <form action="" method="post" class="hide-on-med-and-up">
+                    {% csrf_token %}
+                    {% trans "Mark all as" %}
+                    <input type="hidden" value="{{ note_date|date:"Y-m-d" }}" name="date">
+                    {% include "alsijil/partials/mark_as_buttons.html" %}
+                  </form>
                 </li>
               {% endifchanged %}
 
               <li class="collection-item">
                 <div class="row no-margin">
-                  <div class="col s12 m1">
+                  <div class="col s2 m1">
                     {{ note.lesson_period.period.period }}.
                   </div>
 
-                  <div class="col s12 m4">
+                  <div class="col s10 m4">
                     <i class="material-icons left">event_note</i>
                     <a href="{% url "lesson_by_week_and_period" note.year note.week note.lesson_period.pk %}">
                       {{ note.lesson_period.get_subject.name }}<br/>
@@ -134,9 +145,9 @@
                     </a>
                   </div>
 
-                  <div class="col s12 m7">
+                  <div class="col s12 m7 no-padding">
                     {% if note.absent and not note.excused %}
-                      <form action="" method="post" class="right" style="margin-top: -7px;">
+                      <form action="" method="post" class="right hide-on-small-only" style="margin-top: -7px;">
                         {% csrf_token %}
                         {% trans "Mark as" %}
                         <input type="hidden" value="{{ note.pk }}" name="personal_note">
@@ -172,6 +183,16 @@
                     <em>{{ note.remarks }}</em>
 
                   </div>
+                  <div class="col s12 hide-on-med-and-up">
+                    {% if note.absent and not note.excused %}
+                      <form action="" method="post">
+                        {% csrf_token %}
+                        {% trans "Mark as" %}
+                        <input type="hidden" value="{{ note.pk }}" name="personal_note">
+                        {% include "alsijil/partials/mark_as_buttons.html" %}
+                      </form>
+                    {% endif %}
+                  </div>
               </li>
             {% endfor %}
             </li>

aleksis/apps/alsijil/templates/alsijil/partials/mark_as_buttons.html

 {% load i18n %}
 <button type="submit" class="btn-flat tooltipped" name="excuse_type" value="e" title="{% trans "Excused" %}"
-        data-position="bottom" data-tooltip="{% trans "Excused" %}">
+        data-position="bottom" data-tooltip="{% trans "Excused" %}" style="width: 50px;">
   {% trans "e" %}
 </button>
 {% for excuse_type in excuse_types %}
   <button type="submit" class="btn-flat tooltipped" value="{{ excuse_type.pk }}" name="excuse_type"
-          title="{{ excuse_type.name }}" data-position="bottom" data-tooltip="{{ excuse_type.name }}">
+          title="{{ excuse_type.name }}" data-position="bottom" data-tooltip="{{ excuse_type.name }}"
+          style="width: 50px;">
     {{ excuse_type.short_name }}
   </button>
 {% endfor %}