Improve mobile UI

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

@@ -68,9 +68,28 @@ td.material-icons {
     transform: translate(-50%, 50%);
 }
 
-.medium-high-right {
-    position: relative;
-    top: 50%;
-    right: 0;
-    transform: translate(0%, 50%);
-}
+@media screen and (min-width: 600px) {
+    /* On medium and up devices */
+    .medium-high-right {
+        float: right;
+        transform: translate(0%, 50%);
+    }
\ No newline at end of file
+}
+
+@media screen and (max-width: 600px) {
+    /* Only on small devices */
+    .full-width-s {
+        width: 100%;
+    }
+
+    #heading {
+        display: block;
+    }
+    #heading + a {
+        float: none!important;
+    }
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll;
+}

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

@@ -19,7 +19,7 @@
     </a>
   {% endif %}
   {% blocktrans with person=person %}
-    Class register overview for {{ person }}
+    <span id="heading">Class register overview for {{ person }}</span>
   {% endblocktrans %}
   {% has_perm "alsijil.register_absence" user person as can_register_absence %}
   {% if can_register_absence %}
@@ -82,7 +82,7 @@
       <div class="row">
         <div class="col s12 m3 l5 push-m9 push-l7">
           <button
-              class="modal-trigger right btn primary-color waves-effect waves-light
+              class="modal-trigger btn primary-color waves-effect waves-light
               {% if can_mark_all_as_excused %} medium-high-right {% endif %}"
               data-target="filter-modal"
               type="button">
@@ -93,17 +93,19 @@
           {% csrf_token %}
           <div class="col s12 m9 l7 pull-m3 pull-l5 row">
             {% if can_mark_all_as_excused %}
-              <div class="col s12 m10">
+              <div class="col s12 m9">
                 {% form form=action_form %}{% endform %}
               </div>
-              <div class="col s10 m2">
-                <button type="submit" class="btn waves-effect waves-light medium-high">
+              <div class="col s12 m3">
+                <button type="submit" class="btn waves-effect waves-light medium-high full-width-s">
                   Run <i class="material-icons right">send</i>
                 </button>
               </div>
             {% endif %}
           </div>
-          {% render_table personal_notes_table %}
+          <div class="col s12 overflow-x-scroll">
+            {% render_table personal_notes_table %}
+          </div>
         </form>
       </div>
     </div>