Mobile improvements (#2054)

* avoid overflows in rewards overview on mobile * make navbar menu scrollable for small display heights * make footer horizontally scrollable on small screens The previous behavior was the footer became wider than the screen and the entire page width was increased. * contact form: enable line breaks in anonymous sender button * remove horizontal overflows in contributor index * avoid horizontal overflows of percentage value in distribution bars * avoid horizontal overflows in grade views * avoid horizontal overflows in contributor evaluation form * avoid horizontal overflows in some staff views * make staff overview mobile-friendly * avoid horizontal overflows of breadcrumb arrow * avoid horizontal overflows in staff faq views * fix navbar menus on desktop regression from regression from 75af5b2 --------- Co-authored-by: Richard Ebeling <[email protected]> Co-authored-by: Johannes Wolf <[email protected]> Co-authored-by: Niklas Mohrin <[email protected]>
e-valuation · Feb 26, 2024 · c7c6ee6 · c7c6ee6
1 parent 06bfc12
commit c7c6ee6
Show file tree

Hide file tree

Showing 32 changed files with 181 additions and 155 deletions.
diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html
@@ -5,10 +5,12 @@
 {% block title %}{% trans 'Your EvaP' %} - {{ block.super }}{% endblock %}
 
 {% block breadcrumb_bar %}
-    <ul class="breadcrumb">
-        <li class="breadcrumb-item">{{ evaluation.course.semester.name }}</li>
-        <li class="breadcrumb-item">{{ evaluation.full_name }}</li>
-    </ul>
+    <div class="breadcrumb-bar">
+        <ul class="breadcrumb">
+            <li class="breadcrumb-item">{{ evaluation.course.semester.name }}</li>
+            <li class="breadcrumb-item">{{ evaluation.full_name }}</li>
+        </ul>
+    </div>
 {% endblock %}
 
 {% block content %}
@@ -59,7 +61,7 @@ <h5 class="card-title">{% trans 'Course data' %}</h5>
             </div>
         </div>
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <div class="d-flex">
                     <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5>
                     {% if evaluation.allow_editors_to_edit %}
@@ -80,7 +82,7 @@ <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5>
             </div>
         </div>
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 {% include 'contribution_formset.html' with formset=formset staff=False editable=editable %}
             </div>
         </div>

diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html
@@ -17,7 +17,7 @@
         </div>
         {% if user.is_delegate %}
             <div class="btn-switch btn-switch-light ms-2 d-print-none">
-                <div class="btn-switch-label"><span class="fas fa-people-arrows-left-right"></span> {% trans 'Delegated evaluations' %}</div>
+                <div class="btn-switch-label text-break break-spaces"><span class="fas fa-people-arrows-left-right"></span> {% trans 'Delegated evaluations' %}</div>
                 <div class="btn-switch btn-group">
                     <a href="{% url 'contributor:index' %}?show_delegated=true" role="button" class="btn btn-sm btn-light{% if show_delegated %} active{% endif %}">
                         {% trans 'Show' %}
@@ -42,7 +42,7 @@
             <div class="card-header">
                 {{ semester.semester_name }}
             </div>
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <table class="table table-seamless-links table-vertically-aligned">
                     <thead>
                     <tr>

diff --git a/evap/development/templates/development_components.html b/evap/development/templates/development_components.html
@@ -3,11 +3,13 @@
 {% block title %}{% trans 'Development' %} - {{ block.super }}{% endblock %}
 
 {% block breadcrumb_bar %}
-    <ul class="breadcrumb">
-        {% block breadcrumb %}
-            <li class="breadcrumb-item">{% trans 'Development' %}</li>
-        {% endblock %}
-    </ul>
+    <div class="breadcrumb-bar">
+        <ul class="breadcrumb">
+            {% block breadcrumb %}
+                <li class="breadcrumb-item">{% trans 'Development' %}</li>
+            {% endblock %}
+        </ul>
+    </div>
 {% endblock %}
 
 {% block content %}

diff --git a/evap/evaluation/templates/contact_modal.html b/evap/evaluation/templates/contact_modal.html
@@ -30,7 +30,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
                                 <input type="radio" class="btn-check" name="{{ modal_id }}RadioGroup" id="{{ modal_id }}SenderName" checked>
                                 <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}SenderName">{{ user.full_name }}</label>
                                 <input type="radio" class="btn-check" name="{{ modal_id }}RadioGroup" id="{{ modal_id }}AnonymousName">
-                                <label class="btn btn-sm btn-outline-primary" for="{{ modal_id }}AnonymousName">{% trans 'Anonymous' %}</label>
+                                <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}AnonymousName">{% trans 'Anonymous' %}</label>
                             </div>
                         {% else %}
                             <input type="text" class="form-control mx-auto text-break" id="{{ modal_id }}SenderName" disabled value="{{ user.full_name }}"/>

diff --git a/evap/evaluation/templates/footer.html b/evap/evaluation/templates/footer.html
@@ -6,7 +6,7 @@
         <div class="vote-bg-orange" style="width: 6%;"></div>
         <div class="vote-bg-red" style="width: 3%;"></div>
     </div>
-    <nav class="navbar navbar-expand">
+    <nav class="navbar navbar-expand overflow-x-scroll">
         <div class="collapse navbar-collapse justify-content-between">
             <ul class="navbar-nav justify-content-start">
                 <li class="nav-item my-auto">

diff --git a/evap/grades/templates/grades_base.html b/evap/grades/templates/grades_base.html
@@ -3,13 +3,15 @@
 {% block title %}{% trans 'Grade publishing' %} - {{ block.super }}{% endblock %}
 
 {% block breadcrumb_bar %}
-    <ul class="breadcrumb">
-        {% block breadcrumb %}
-            {% if disable_breadcrumb_grades or not user.is_grade_publisher %}
-                <li class="breadcrumb-item">{% trans 'Grade publishing' %}</li>
-            {% else %}
-                <li class="breadcrumb-item"><a href="{% url 'grades:index' %}">{% trans 'Grade publishing' %}</a></li>
-            {% endif %}
-        {% endblock %}
-    </ul>
+    <div class="breadcrumb-bar">
+        <ul class="breadcrumb">
+            {% block breadcrumb %}
+                {% if disable_breadcrumb_grades or not user.is_grade_publisher %}
+                    <li class="breadcrumb-item">{% trans 'Grade publishing' %}</li>
+                {% else %}
+                    <li class="breadcrumb-item"><a href="{% url 'grades:index' %}">{% trans 'Grade publishing' %}</a></li>
+                {% endif %}
+            {% endblock %}
+        </ul>
+    </div>
 {% endblock %}
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
@@ -9,7 +9,7 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
         <div class="card-header">
             {% trans 'Uploaded grade documents' %}
         </div>
-        <div class="card-body">
+        <div class="card-body table-responsive">
             {% if grade_documents %}
                 <table class="table table-striped table-vertically-aligned">
                     <thead>

diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html
@@ -30,7 +30,7 @@ <h3 class="col-8 mb-0">
         <div class="card-header">
             {% trans 'Courses' %}
         </div>
-        <div class="card-body">
+        <div class="card-body table-responsive">
             {% if courses %}
                 <table class="table table-striped grade-course-table table-vertically-aligned">
                     <thead>

diff --git a/evap/results/templates/results_evaluation_detail.html b/evap/results/templates/results_evaluation_detail.html
@@ -7,10 +7,12 @@
 {% block title %}{{ evaluation.full_name }} - {{ evaluation.course.semester.name }} - {% trans 'Results' %} - {{ block.super }}{% endblock %}
 
 {% block breadcrumb_bar %}
-    <ul class="breadcrumb">
-        <li class="breadcrumb-item">{{ evaluation.course.semester.name }}</li>
-        <li class="breadcrumb-item">{{ evaluation.full_name }}</li>
-    </ul>
+    <div class="breadcrumb-bar">
+        <ul class="breadcrumb">
+            <li class="breadcrumb-item">{{ evaluation.course.semester.name }}</li>
+            <li class="breadcrumb-item">{{ evaluation.full_name }}</li>
+        </ul>
+    </div>
 {% endblock %}
 
 {% block content %}

diff --git a/evap/rewards/templates/rewards_index.html b/evap/rewards/templates/rewards_index.html
@@ -15,7 +15,7 @@
         <div class="card-header">
             {% trans 'Redeem points' %}
         </div>
-        <div class="card-body">
+        <div class="card-body table-responsive">
             <p><b>{% trans 'Total points available' %}: {{ total_points_available }}</b></p>
             {% if total_points_available > 0 %}
                 {% if events %}
@@ -62,7 +62,7 @@
         <div class="card-header">
             {% trans 'Reward points history' %}
         </div>
-        <div class="card-body">
+        <div class="card-body table-responsive">
             {% if reward_point_actions %}
                 <table class="table table-striped">
                     <thead>

diff --git a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
@@ -1,7 +1,7 @@
 <div class="card-header">
     {% trans title %}
 </div>
-<div class="card-body">
+<div class="card-body table-responsive">
     {% if events %}
         <table class="table table-striped">
             <thead>

diff --git a/evap/staff/templates/staff_base.html b/evap/staff/templates/staff_base.html
@@ -3,13 +3,15 @@
 {% block title %}{% trans 'Manage' %} - {{ block.super }}{% endblock %}
 
 {% block breadcrumb_bar %}
-    <ul class="breadcrumb">
-        {% block breadcrumb %}
-            {% if disable_breadcrumb_manager or not user.is_manager %}
-                <li class="breadcrumb-item">{% trans 'Manage' %}</li>
-            {% else %}
-                <li class="breadcrumb-item"><a href="{% url 'staff:index' %}">{% trans 'Manage' %}</a></li>
-            {% endif %}
-        {% endblock %}
-    </ul>
+    <div class="breadcrumb-bar">
+        <ul class="breadcrumb">
+            {% block breadcrumb %}
+                {% if disable_breadcrumb_manager or not user.is_manager %}
+                    <li class="breadcrumb-item">{% trans 'Manage' %}</li>
+                {% else %}
+                    <li class="breadcrumb-item"><a href="{% url 'staff:index' %}">{% trans 'Manage' %}</a></li>
+                {% endif %}
+            {% endblock %}
+        </ul>
+    </div>
 {% endblock %}
diff --git a/evap/staff/templates/staff_course_type_index.html b/evap/staff/templates/staff_course_type_index.html
@@ -19,7 +19,7 @@
         {{ formset.management_form }}
 
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <table id="course_types_table" class="table table-vertically-aligned">
                     <thead>
                         <tr>

diff --git a/evap/staff/templates/staff_degree_index.html b/evap/staff/templates/staff_degree_index.html
@@ -15,7 +15,7 @@
         {{ formset.management_form }}
 
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <table id="degree_table" class="table table-vertically-aligned">
                     <thead>
                         <tr>

diff --git a/evap/staff/templates/staff_evaluation_form.html b/evap/staff/templates/staff_evaluation_form.html
@@ -28,7 +28,7 @@ <h3>
             </div>
         </div>
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 {% include 'contribution_formset.html' with formset=formset manager=True editable=editable %}
             </div>
         </div>

diff --git a/evap/staff/templates/staff_faq_index.html b/evap/staff/templates/staff_faq_index.html
@@ -15,7 +15,7 @@
         {{ formset.management_form }}
 
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <table id="section_table" class="table table-vertically-aligned">
                     <thead>
                         <tr>

diff --git a/evap/staff/templates/staff_faq_section.html b/evap/staff/templates/staff_faq_section.html
@@ -16,7 +16,7 @@
         {{ formset.management_form }}
 
         <div class="card mb-3">
-            <div class="card-body">
+            <div class="card-body table-responsive">
                 <table id="question_table" class="table">
                     <thead>
                         <tr>