diff --git a/aleksis/apps/alsijil/static/css/alsijil/person.css b/aleksis/apps/alsijil/static/css/alsijil/person.css index 9e3c7b17865880a28133f843006744707117709a..25a07c1e21c3e2949b684935aba1c8ad4e516ceb 100644 --- a/aleksis/apps/alsijil/static/css/alsijil/person.css +++ b/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%); -} \ No newline at end of file +@media screen and (min-width: 600px) { + /* On medium and up devices */ + .medium-high-right { + float: right; + transform: translate(0%, 50%); + } +} + +@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; +} diff --git a/aleksis/apps/alsijil/templates/alsijil/class_register/person.html b/aleksis/apps/alsijil/templates/alsijil/class_register/person.html index 7841d9f961c7acd4013dc2023baaa57723038a67..c48ff86b21e0f0074922ef99e2b4ba7ae3c3d2fb 100644 --- a/aleksis/apps/alsijil/templates/alsijil/class_register/person.html +++ b/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>