From 77522dc5f1a40a464af969fffb613347bf7796cc Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Sun, 16 May 2021 12:38:45 +0200
Subject: [PATCH] Improve mobile UI
---
.../alsijil/static/css/alsijil/person.css | 31 +++++++++++++++----
.../alsijil/class_register/person.html | 14 +++++----
2 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/aleksis/apps/alsijil/static/css/alsijil/person.css b/aleksis/apps/alsijil/static/css/alsijil/person.css
index 9e3c7b178..25a07c1e2 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 7841d9f96..c48ff86b2 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>
--
GitLab