Skip to content
Snippets Groups Projects
Verified Commit ed31cbff authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Optimize lesson overview for mobile and tablet devices

parent 94f525d9
No related branches found
No related tags found
1 merge request!235Resolve "Improve design of detail view for one register object"
Pipeline #37644 passed with warnings
Stage: test
Stage: build
Stage: publish
Hide whitespace changes
Inline Side-by-side
Showing
with 256 additions and 151 deletions
aleksis/apps/alsijil/static/css/alsijil/lesson.css
+ 22
− 2
View file @ ed31cbff
......@@ -23,6 +23,26 @@
height: 109px;}
}
.alsijil-top-button {
margin-top: -20px;
.alsijil-time-head, .alsijil-object-head {
display: block;
}
.alsijil-time-head {
font-size: 2rem;
line-height: 1.1;
}
.alsijil-object-head {
font-size: 3rem;
}
@media only screen and (max-width: 600px) {
.alsijil-time-head {
font-size: 1.5rem;
}
.alsijil-object-head {
font-size: 2.2rem;
line-height: 1.4;
}
}
aleksis/apps/alsijil/tables.py
+ 9
− 9
View file @ ed31cbff
......@@ -192,15 +192,15 @@ class RegisterObjectTable(tables.Table):
group_note = tables.Column(linkify=_get_link)
def render_status(self, value, record):
return render_to_string(
"alsijil/partials/lesson_status_icon.html",
dict(
week=record.get("week"),
has_documentation=record.get("has_documentation", False),
substitution=record.get("substitution"),
register_object=value,
),
)
context = {
"has_documentation": record.get("has_documentation", False),
"register_object": value,
}
if record.get("week"):
context["week"] = record["week"]
if record.get("substitution"):
context["substitution"] = record["substitution"]
return render_to_string("alsijil/partials/lesson_status.html", context)
class RegisterObjectSelectTable(RegisterObjectTable):
......
aleksis/apps/alsijil/templates/alsijil/class_register/lesson.html
+ 108
− 109
View file @ ed31cbff
......@@ -3,102 +3,126 @@
{% load week_helpers material_form_internal material_form i18n static rules time_helpers %}
{% block browser_title %}{% blocktrans %}Lesson{% endblocktrans %}{% endblock %}
{% block no_page_title %}{% endblock %}
{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/alsijil/lesson.css' %}"/>
{% endblock %}
{% block content %}
<h1>
{% if next_lesson_person or prev_lesson_person or lesson_documentation %}
<div class="row no-margin">
<div class="col s12 no-padding">
{# Back to week view #}
{% if back_to_week_url %}
<a href="{{ back_to_week_url }}"
class="btn primary-color waves-light waves-effect alsijil-top-button">
<i class="material-icons left">chevron_left</i> {% trans "Back to week view" %}
</a>
{% endif %}
{% if next_lesson_person or prev_lesson_person or lesson_documentation %}
<div class="row no-margin hide-on-small-only">
<div class="col s12 no-padding">
{# Back to week view #}
{% if back_to_week_url %}
<a href="{{ back_to_week_url }}"
class="btn primary-color waves-light waves-effect margin-bottom">
<i class="material-icons left">chevron_left</i> {% trans "Week view" %}
</a>
{% endif %}
{# Next lesson #}
{% if prev_lesson_person %}
<a class="btn primary waves-effect waves-light alsijil-top-button"
href="{% url "lesson_period" prev_lesson_person.week.year prev_lesson_person.week.week prev_lesson_person.id %}">
{# Previous lesson #}
{% if prev_lesson_person %}
<a class="btn primary waves-effect waves-light margin-bottom"
href="{% url "lesson_period" prev_lesson_person.week.year prev_lesson_person.week.week prev_lesson_person.id %}">
<i class="material-icons left">arrow_back</i>
{% trans "My previous lesson" %}
</a>
{% endif %}
</a>
{% endif %}
{# Previous lesson #}
{% if next_lesson_person %}
<a class="btn primary right waves-effect waves-light alsijil-top-button"
href="{% url "lesson_period" next_lesson_person.week.year next_lesson_person.week.week next_lesson_person.id %}">
{# Next lesson #}
{% if next_lesson_person %}
<a class="btn primary right waves-effect waves-light margin-bottom"
href="{% url "lesson_period" next_lesson_person.week.year next_lesson_person.week.week next_lesson_person.id %}">
<i class="material-icons right">arrow_forward</i>
{% trans "My next lesson" %}
</a>
{% endif %}
</div>
</a>
{% endif %}
</div>
{% endif %}
</div>
<div class="row no-margin hide-on-med-and-up margin-bottom">
<div class="col s12 no-padding">
{# Back to week view #}
{% if back_to_week_url %}
<a href="{{ back_to_week_url }}"
class="btn primary-color waves-light waves-effect hundred-percent margin-bottom">
<i class="material-icons left">chevron_left</i> {% trans "Week view" %}
</a>
{% endif %}
{# Previous lesson #}
{% if prev_lesson_person %}
<a class="btn primary waves-effect waves-light hundred-percent margin-bottom"
href="{% url "lesson_period" prev_lesson_person.week.year prev_lesson_person.week.week prev_lesson_person.id %}">
<i class="material-icons left">arrow_back</i>
{% trans "My previous lesson" %}
</a>
{% endif %}
{% if register_object.label_ == "event" %}
{{ register_object.date_start }} {{ register_object.period_from.period }}.–{{ register_object.date_end }}
{{ register_object.period_to.period }}.,
{% else %}
{{ day }}, {% blocktrans with period=register_object.period.period %}{{ period }}. period{% endblocktrans %} –
{% endif %}
{# Next lesson #}
{% if next_lesson_person %}
<a class="btn primary waves-effect waves-light hundred-percent margin-bottom"
href="{% url "lesson_period" next_lesson_person.week.year next_lesson_person.week.week next_lesson_person.id %}">
<i class="material-icons right">arrow_forward</i>
{% trans "My next lesson" %}
</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="hide-on-med-and-up">
{% include "alsijil/partials/lesson_status.html" with register_object=register_object chip=1 css_class="hundred-percent center" %}
</div>
<h1>
<span class="right hide-on-small-only">
{% include "alsijil/partials/lesson_status.html" with register_object=register_object css_class="medium" %}
</span>
{{ register_object.group_names }},
<span class="alsijil-time-head">
{% if register_object.label_ == "event" %}
{% if register_object.date_start == register_object.date_end %}
{% if register_object.period_from.period == register_object.period_to.period %}
{{ register_object.date_start|date:"SHORT_DATE_FORMAT" }},
{% blocktrans with period=register_object.period_from.period %}{{ period }}. period{% endblocktrans %}
{% else %}
{{ register_object.date_start|date:"SHORT_DATE_FORMAT" }},
{% blocktrans with period_from=register_object.period_from.period period_to=register_object.period_to.period %}
{{ period_from }}.–{{ period_to }}. period
{% endblocktrans %}
{% endif %}
{% else %}
{{ register_object.date_start|date:"SHORT_DATE_FORMAT" }},
{{ register_object.period_from.period }}.–{{ register_object.date_end|date:"SHORT_DATE_FORMAT" }},
{{ register_object.period_to.period }}.
{% endif %}
{% else %}
{{ day|date:"SHORT_DATE_FORMAT" }},
{% blocktrans with period=register_object.period.period %}{{ period }}. period{% endblocktrans %}
{% endif %}
</span>
{% if register_object.label_ == "event" %}
{% trans "Event" %} ({{ register_object.title }})
{% else %}
{{ register_object.get_subject.name }}
{% endif %},
<span class="alsijil-object-head">
{{ register_object.group_names }},
{{ register_object.teacher_short_names }}
{% if register_object.label_ == "event" %}
{% trans "Event" %} ({{ register_object.title }}),
{% else %}
{{ register_object.get_subject.short_name }},
{% endif %}
<span class="right">
{% include "alsijil/partials/lesson_status_icon.html" with register_object=register_object css_class="medium" %}
{{ register_object.teacher_short_names }}
</span>
</h1>
<br/>
{% has_perm "alsijil.view_lessondocumentation_rule" user register_object as can_view_lesson_documentation %}
{% has_perm "alsijil.edit_lessondocumentation_rule" user register_object as can_edit_lesson_documentation %}
{% has_perm "alsijil.edit_register_object_personalnote_rule" user register_object as can_edit_register_object_personalnote %}
<form method="post" class="row">
<p>
{% if not blocked_because_holidays %}
{% if can_edit_lesson_documentation or can_edit_register_object_personalnote %}
{% include "core/partials/save_button.html" %}
{% endif %}
{% endif %}
{% if prev_lesson %}
<a class="btn waves-effect waves-light primary"
href="{% url "lesson_period" prev_lesson.week.year prev_lesson.week.week prev_lesson.id %}">
<i class="material-icons left">arrow_back</i>
{% blocktrans with subject=register_object.get_subject.name %}
Previous {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
{% if next_lesson %}
<a class="btn right waves-effect waves-light primary"
href="{% url "lesson_period" next_lesson.week.year next_lesson.week.week next_lesson.id %}">
<i class="material-icons right">arrow_forward</i>
{% blocktrans with subject=register_object.get_subject.name %}
Next {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
</p>
{% include "alsijil/partials/lesson_prev_next.html" %}
{% csrf_token %}
......@@ -351,7 +375,7 @@
<td>
{% for extra_mark in form.extra_marks.value %}
{{ extra_mark }}{% if not forloop.last %},{% endif %}
{% empty %}
{% empty %}
–
{% endfor %}
</td>
......@@ -386,51 +410,26 @@
{% endif %}
</div>
<p>
{% if can_edit_lesson_documentation or can_edit_register_object_personalnote %}
{% include "core/partials/save_button.html" %}
{% endif %}
{% if prev_lesson %}
<a class="btn primary waves-effect waves-light"
href="{% url "lesson_period" prev_lesson.week.year prev_lesson.week.week prev_lesson.id %}">
<i class="material-icons left">arrow_back</i>
{% blocktrans with subject=register_object.get_subject.name %}
Previous {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
{% if next_lesson %}
<a class="btn primary right waves-effect waves-light"
href="{% url "lesson_period" next_lesson.week.year next_lesson.week.week next_lesson.id %}">
<i class="material-icons right">arrow_forward</i>
{% blocktrans with subject=register_object.get_subject.name %}
Next {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
</p>
{% include "alsijil/partials/lesson_prev_next.html" %}
{% else %}
<div class="row no-margin">
<div class="container">
<div class="card">
<div class="card-content center-align">
<p>
<i class="material-icons medium orange-text">warning</i>
</p>
<p class="card-title">
{% blocktrans %}
This lesson overlaps with holidays and can't be edited.
{% endblocktrans %}
</p>
<span class="badge new blue no-float no-margin">{{ holiday }}</span>
<div class="container">
<div class="card">
<div class="card-content center-align">
<p>
<i class="material-icons medium orange-text">warning</i>
</p>
<p class="card-title">
{% blocktrans %}
This lesson overlaps with holidays and can't be edited.
{% endblocktrans %}
</p>
<span class="badge new blue no-float no-margin">{{ holiday }}</span>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</form>
{% endblock %}
aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html
+ 2
− 2
View file @ ed31cbff
......@@ -116,7 +116,7 @@
{% if can_view_lesson_documentation %}
<tr>
<td class="center-align">
{% include "alsijil/partials/lesson_status_icon.html" with register_object=register_object %}
{% include "alsijil/partials/lesson_status.html" with register_object=register_object %}
</td>
<td class="tr-link">
<a class="tr-link"
......@@ -196,7 +196,7 @@
{% if can_view_lesson_documentation %}
<a class="collection-item avatar"
href="{{ register_object.alsijil_url }}?back={{ back_url }}">
{% include "alsijil/partials/lesson_status_icon.html" with register_object=register_object css_class="materialize-circle" color_suffix=" " %}
{% include "alsijil/partials/lesson_status.html" with register_object=register_object css_class="materialize-circle" color_suffix=" " %}
<table class="hide-on-med-and-down">
<tr>
<th>{% trans "Subject" %}</th>
......
aleksis/apps/alsijil/templates/alsijil/partials/lesson_prev_next.html 0 → 100644
+ 67
− 0
View file @ ed31cbff
{% load i18n %}
<div class="row no-margin hide-on-small-only">
<div class="col s12 no-padding">
{% if not blocked_because_holidays %}
{% if can_edit_lesson_documentation or can_edit_register_object_personalnote %}
<button type="submit" class="btn waves-effect waves-light green margin-bottom">
<i class="material-icons left">save</i> {% trans "Save" %}
</button>
{% endif %}
{% endif %}
{% if prev_lesson %}
<a class="btn waves-effect waves-light primary margin-bottom"
href="{% url "lesson_period" prev_lesson.week.year prev_lesson.week.week prev_lesson.id %}">
<i class="material-icons left">arrow_back</i>
{% blocktrans with subject=register_object.get_subject.short_name %}
Previous {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
{% if next_lesson %}
<a class="btn right waves-effect waves-light primary margin-bottom"
href="{% url "lesson_period" next_lesson.week.year next_lesson.week.week next_lesson.id %}">
<i class="material-icons right">arrow_forward</i>
{% blocktrans with subject=register_object.get_subject.short_name %}
Next {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
</div>
</div>
<div class="row no-margin hide-on-med-and-up">
<div class="col s12 no-padding">
{% if not blocked_because_holidays %}
{% if can_edit_lesson_documentation or can_edit_register_object_personalnote %}
<button type="submit" class="btn waves-effect waves-light green margin-bottom hundred-percent">
<i class="material-icons left">save</i> {% trans "Save" %}
</button>
{% endif %}
{% endif %}
</div>
<div class="col s12 no-padding">
{% if prev_lesson %}
<a class="btn waves-effect waves-light primary margin-bottom hundred-percent"
href="{% url "lesson_period" prev_lesson.week.year prev_lesson.week.week prev_lesson.id %}">
<i class="material-icons left">arrow_back</i>
{% blocktrans with subject=register_object.get_subject.short_name %}
Previous {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
</div>
<div class="col s12 no-padding">
{% if next_lesson %}
<a class="btn right waves-effect waves-light primary margin-bottom hundred-percent"
href="{% url "lesson_period" next_lesson.week.year next_lesson.week.week next_lesson.id %}">
<i class="material-icons right">arrow_forward</i>
{% blocktrans with subject=register_object.get_subject.short_name %}
Next {{ subject }} lesson
{% endblocktrans %}
</a>
{% endif %}
</div>
</div>
aleksis/apps/alsijil/templates/alsijil/partials/lesson_status.html 0 → 100644
+ 36
− 0
View file @ ed31cbff
{% load i18n week_helpers %}
{% now_datetime as now_dt %}
{% if has_documentation or register_object.has_documentation %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Data complete") icon="check_circle" color="green" %}
{% elif not register_object.period %}
{% if week %}
{% period_to_time_start week register_object.raw_period_from_on_day as time_start %}
{% period_to_time_end week register_object.raw_period_to_on_day as time_end %}
{% else %}
{% period_to_time_start register_object.date_start register_object.period_from as time_start %}
{% period_to_time_end register_object.date_end register_object.period_to as time_end %}
{% endif %}
{% if now_dt > time_end %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Missing data") icon="history" color="red" %}
{% elif now_dt > time_start and now_dt < time_end %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Pending") icon="more_horiz" color="orange" %}
{% else %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Event") icon="event" color="purple" %}
{% endif %}
{% else %}
{% period_to_time_start week register_object.period as time_start %}
{% period_to_time_end week register_object.period as time_end %}
{% if substitution.cancelled or register_object.get_substitution.cancelled %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Lesson cancelled") icon="cancel" color="red" %}
{% elif now_dt > time_end %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Missing data") icon="history" color="red" %}
{% elif now_dt > time_start and now_dt < time_end %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Pending") icon="more_horiz" color="orange" %}
{% elif substitution or register_object.get_substitution %}
{% include "alsijil/partials/lesson_status_icon.html" with text=_("Substitution") icon="update" color="orange" %}
{% endif %}
{% endif %}
aleksis/apps/alsijil/templates/alsijil/partials/lesson_status_icon.html
+ 12
− 29
View file @ ed31cbff
{% load i18n week_helpers %}
{% now_datetime as now_dt %}
{% if has_documentation or register_object.has_documentation %}
<i class="material-icons green{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Data complete" %}" title="{% trans "Data complete" %}">check_circle</i>
{% elif not register_object.period %}
{% period_to_time_start week register_object.raw_period_from_on_day as time_start %}
{% period_to_time_end week register_object.raw_period_to_on_day as time_end %}
{% if now_dt > time_end %}
<i class="material-icons red{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Missing data" %}" title="{% trans "Missing data" %}">history</i>
{% elif now_dt > time_start and now_dt < time_end %}
<i class="material-icons orange{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Pending" %}" title="{% trans "Pending" %}">more_horiz</i>
{% else %}
<i class="material-icons purple{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Event" %}" title="{% trans "Event" %}">event</i>
{% endif %}
{% if chip %}
<span class="{% if chip %}chip{% endif %} {{ color }} white-text {{ css_class }}">
<i class="material-icons left">
{{ icon }}
</i>
{{ text }}
</span>
{% else %}
{% period_to_time_start week register_object.period as time_start %}
{% period_to_time_end week register_object.period as time_end %}
{% if substitution.cancelled or register_object.get_substitution.cancelled %}
<i class="material-icons red{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Lesson cancelled" %}" title="{% trans "Lesson cancelled" %}">cancel</i>
{% elif now_dt > time_end %}
<i class="material-icons red{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Missing data" %}" title="{% trans "Missing data" %}">history</i>
{% elif now_dt > time_start and now_dt < time_end %}
<i class="material-icons orange{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Pending" %}" title="{% trans "Pending" %}">more_horiz</i>
{% elif substitution or register_object.get_substitution %}
<i class="material-icons orange{% firstof color_suffix "-text"%} tooltipped {{ css_class }}" data-position="bottom" data-tooltip="{% trans "Substitution" %}" title="{% trans "Substitution" %}">update</i>
{% endif %}
<i class="material-icons {{ color }}{% firstof color_suffix "-text" %} tooltipped {{ css_class }}"
data-position="bottom"
data-tooltip="{{ text }}" title="{{ text }}">
{{ icon }}
</i>
{% endif %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment