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

Merge branch '186-improve-week-view-for-mobile-devices-size-s' into 'master' 

Resolve "Improve week view for mobile devices (size s)"

Closes #186

See merge request !236
parents 4d263ea3 f29c38c3
No related branches found
No related tags found
1 merge request!236Resolve "Improve week view for mobile devices (size s)"
Pipeline #46243 passed
Stage: test
Stage: build
Stage: publish
Hide whitespace changes
Inline Side-by-side
CHANGELOG.rst
+ 1
− 0
View file @ 7ade1fd7
......@@ -13,6 +13,7 @@ Changed
~~~~~~~
* Optimize view for one register object ("lesson view") for mobile and tablet devices.
* Optimize view for lessons of a week ("week view") for mobile and tablet devices.
Fixed
~~~~~
......
aleksis/apps/alsijil/static/css/alsijil/week_view.css 0 → 100644
+ 116
− 0
View file @ 7ade1fd7
@media screen and (max-width: 600px) {
#toggle-row button[type=submit] {
width: 100%;
margin-bottom: 1em;
}
}
.horizontal-scroll-container {
overflow-x: scroll;
display: flex;
column-gap: 1rem;
flex-wrap: nowrap;
align-items: stretch;
scroll-snap-type: x proximity;
}
.horizontal-scroll-container.vertical {
flex-wrap: wrap;
overflow-x: inherit;
}
.horizontal-scroll-container.vertical .horizontal-scroll-card {
margin-inline: 0;
}
dl {
margin: 0;
padding: 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
padding: unset;
}
.horizontal-scroll-card {
flex-basis: min(75vw, 400px);
flex-shrink: 0;
flex-grow: 1;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
scroll-snap-align: center;
transition: all .5s;
}
.horizontal-scroll-card:first-of-type {
margin-inline-start: .4rem;
-moz-margin-start: .4rem;
-webkit-margin-start: .4rem;
}
.horizontal-scroll-card:last-of-type {
margin-inline-end: .4rem;
-moz-margin-end: .4rem;
-webkit-margin-end: .4rem;
}
.horizontal-scroll-card .card-action {
margin-bottom: 5px;
}
.horizontal-scroll-card .card-content .card-title {
display: flex;
justify-content: space-between;
}
.horizontal-scroll-card .card-content .card-title .subject {
flex-grow: 5;
}
.horizontal-scroll-card .one-line {
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
}
p.subtitle {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.btn-superflat ~ span {
line-height: 24px;
}
.btn-superflat, .btn-superflat:focus, .btn-superflat:active {
border: none;
line-height: 1;
height: 24px;
background: none;
font-weight: normal;
}
.btn-superflat i.material-icons {
vertical-align: middle;
}
.btn-superflat:hover {
cursor: pointer;
}
.unfold-trigger i.material-icons {
transition: transform .5s 0s ease-in-out;
transform: rotate(-90deg);
}
.unfold-trigger.vertical i.material-icons {
transform: rotate(-180deg);
}
aleksis/apps/alsijil/static/js/alsijil/week_view.js 0 → 100644
+ 21
− 0
View file @ 7ade1fd7
$(document).ready(function () {
$("#id_group").change(function () {
$("#id_teacher").val("").formSelect();
});
$("#id_teacher").change(function () {
$("#id_group").val("").formSelect();
});
$("#toggle-row.pre-hidden").hide();
});
$("#toggle-button").click(function () {
$("#toggle-row").toggle();
})
$(".unfold-trigger").click(function (event) {
let target = event.target;
target.classList.toggle("vertical");
let next_container = $(target).parent().next(".horizontal-scroll-container");
if (next_container.length >= 1) {
next_container[0].classList.toggle("vertical");
}
})
\ No newline at end of file
aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html
+ 146
− 97
View file @ 7ade1fd7
......@@ -8,22 +8,60 @@
{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/alsijil/alsijil.css' %}"/>
<link rel="stylesheet" href="{% static 'css/alsijil/week_view.css' %}"/>
{% endblock %}
{% block nav_content %}
{% if lesson_periods %}
<div class="">
<ul class="tabs tabs-transparent tabs-icons tabs-fixed-width">
<li class="tab col">
<a class="active" href="#week-overview">
<i class="material-icons">speaker_notes</i>
{% trans "Lesson documentations" %}
</a>
</li>
<li class="tab col">
<a href="#personal-notes">
<i class="material-icons">people</i>
{% trans "Persons" %}
</a>
</li>
{% if group_roles %}
<li class="tab col">
<a href="#group-roles">
<i class="material-icons">assignment_ind</i>
{% trans "Group roles" %}
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% endblock %}
{% block content %}
<script type="text/javascript" src="{% static "js/helper.js" %}"></script>
<script type="text/javascript" src="{% static " js/helper.js" %}"></script>
{{ week_select|json_script:"week_select" }}
<script type="text/javascript" src="{% static "js/chronos/week_select.js" %}"></script>
<script type="text/javascript" src="{% static " js/chronos/week_select.js" %}"></script>
<div class="row">
<div class="col s12">
<div id="toggle-row" class="col s12 m8 l10 {% if lesson_periods %}pre-hidden{% endif %}">
<form method="post" action="">
{% csrf_token %}
{% form form=select_form %}{% endform %}
<button type="submit" class="btn waves-effect waves-light">
<button type="submit" class="btn waves-effect waves-light primary-color">
<i class="material-icons left">check</i>
{% blocktrans %}Select{% endblocktrans %}
</button>
</form>
</div>
<div class="col s12 m4 l2 right">
<button type="button" class="btn waves-effect waves-light hundred-percent" id="toggle-button">
<i class="material-icons left">
filter_alt
</i> {% trans "Toggle filters" %}
</button>
</div>
</div>
......@@ -46,7 +84,8 @@
</p>
<p class="hide-on-med-and-up">
<a class="btn primary-color waves-effect waves-light hundred-percent" href="{% url "students_list" group.pk %}">
<a class="btn primary-color waves-effect waves-light hundred-percent"
href="{% url "students_list" group.pk %}">
<i class="material-icons left">people</i>
{% trans "Students list" %}
</a>
......@@ -62,39 +101,24 @@
{% if lesson_periods %}
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col">
<a class="active" href="#week-overview">{% trans "Lesson documentations" %}</a>
</li>
<li class="tab col">
<a href="#personal-notes">{% trans "Personal notes" %}</a>
</li>
{% if group_roles %}
<li class="tab col">
<a href="#group-roles">{% trans "Group roles" %}</a>
</li>
{% endif %}
</ul>
</div>
<div class="col s12" id="week-overview">
{% for weekday, objects in regrouped_objects.items %}
{% with weekdays|get_dict:objects.0.weekday as advanced_weekday %}
{% if advanced_weekday.holiday and not request.site.preferences.alsijil__allow_entries_in_holidays %}
<div class="card">
<div class="card-content">
<span class="card-title">
{{ advanced_weekday.name }}, {{ advanced_weekday.date }} <span
<span class="card-title">
{{ advanced_weekday.name }}, {{ advanced_weekday.date }} <span
class="badge new blue no-float">{{ advanced_weekday.holiday }}</span>
</span>
</span>
</div>
</div>
{% else %}
<div class="card show-on-extra-large">
<div class="card-content">
<span class="card-title">
{{ advanced_weekday.name }}, {{ advanced_weekday.date }}
</span>
<span class="card-title">
{{ advanced_weekday.name }}, {{ advanced_weekday.date }}
</span>
<table class="striped datatable">
<thead>
<tr>
......@@ -124,7 +148,8 @@
{% if register_object.period %}
{{ register_object.period.period }}.
{% else %}
{{ register_object.period_from_on_day }}.–{{ register_object.period_to_on_day }}.
{{ register_object.period_from_on_day }}.–
{{ register_object.period_to_on_day }}.
{% endif %}
</a>
</td>
......@@ -155,7 +180,7 @@
<td>
<a class="tr-link"
href="{{ register_object.alsijil_url }}?back={{ back_url }}">
{{ register_object.teacher_names }}
{{ register_object.teacher_names }}
</a>
</td>
<td>
......@@ -183,11 +208,11 @@
</table>
</div>
</div>
<ul class="collapsible hide-on-extra-large-only">
<ul class="collapsible hide-on-extra-large-only hide-on-small-only">
<li class="">
<div class="collapsible-header flow-text">
{{ advanced_weekday.name }}, {{ advanced_weekday.date }} <i
class="material-icons collapsible-icon-right">expand_more</i>
class="material-icons collapsible-icon-right">expand_more</i>
</div>
<div class="collapsible-body">
<div class="collection">
......@@ -197,14 +222,15 @@
<a class="collection-item avatar"
href="{{ register_object.alsijil_url }}?back={{ back_url }}">
{% include "alsijil/partials/lesson_status.html" with register_object=register_object css_class="materialize-circle" color_suffix=" " %}
<table class="hide-on-med-and-down">
<table>
<tr>
<th>{% trans "Subject" %}</th>
<td>
{% if register_object.period %}
{{ register_object.period.period }}.
{% else %}
{{ register_object.period_from_on_day }}.–{{ register_object.period_to_on_day }}.
{{ register_object.period_from_on_day }}.–
{{ register_object.period_to_on_day }}.
{% endif %}
{% if register_object.get_subject %}
{{ register_object.get_subject.name }}
......@@ -230,14 +256,14 @@
<tr>
<th>{% trans "Teachers" %}</th>
<td>
{{ register_object.teacher_names }}
{{ register_object.teacher_names }}
</td>
</tr>
<tr>
<th>{% trans "Lesson topic" %}</th>
<td>{% firstof register_object.get_lesson_documentation.topic "–" %}</td>
</tr>
{% with period.get_lesson_documentation as lesson_documentation %}
{% with register_object.get_lesson_documentation as lesson_documentation %}
{% if lesson_documentation.homework %}
<tr>
<th>{% trans "Homework" %}</th>
......@@ -252,53 +278,6 @@
{% endif %}
{% endwith %}
</table>
<div class="hide-on-large-only">
<ul class="collection">
<li class="collection-item">
{% if register_object.period %}
{{ register_object.period.period }}.
{% else %}
{{ register_object.period_from_on_day }}.–{{ register_object.period_to_on_day }}.
{% endif %}
{% if register_object.get_subject %}
{{ register_object.get_subject.name }}
{% elif register_object.subject %}
{{ register_object.subject }}
{% else %}
{% trans "Event" %} ({{ register_object.title }})
{% endif %}
</li>
{% if not group %}
<li class="collection-item">
{% if register_object.lesson %}
{{ register_object.lesson.group_names }}
{% else %}
{{ register_object.group_names }}
{% endif %}
</li>
{% endif %}
<li class="collection-item">
{{ register_object.teacher_names }}
</li>
<li class="collection-item">
{{ register_object.get_lesson_documentation.topic }}
</li>
{% with period.get_lesson_documentation as lesson_documentation %}
{% if lesson_documentation.homework %}
<li class="collection-item">
<strong>{% trans "Homework" %}</strong>
{% firstof register_object.get_lesson_documentation.homework "–" %}
</li>
{% endif %}
{% if lesson_documentation.group_note %}
<li class="collection-item">
<strong>{% trans "Group note" %}</strong>
{% firstof register_object.get_lesson_documentation.group_note "–" %}
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</a>
{% endif %}
{% endfor %}
......@@ -306,6 +285,85 @@
</div>
</li>
</ul>
<div class="hide-on-med-and-up">
<h3>{{ advanced_weekday.name }}</h3>
<p class="subtitle">
<span>{{ advanced_weekday.date }}</span>
<button class="btn-superflat right waves-effect unfold-trigger">
{% trans "Unfold" %} <i class="material-icons">
expand_less
</i>
</button>
</p>
<div class="horizontal-scroll-container">
{% for register_object in objects %}
<div class="card horizontal-scroll-card">
<div class="card-content">
<span class="card-title">
<span class="period">
{% if register_object.period %}
{{ register_object.period.period }}.
{% else %}
{{ register_object.period_from_on_day }}.–{{ register_object.period_to_on_day }}.
{% endif %}
</span>
<span class="subject">
{% if register_object.get_subject %}
{{ register_object.get_subject.name }}
{% elif register_object.subject %}
{{ register_object.subject }}
{% else %}
{% trans "Event" %}
{% endif %}
</span>
<span class="lesson-icon">
{% include "alsijil/partials/lesson_status.html" with register_object=register_object %}
</span>
</span>
<dl>
<div class="one-line">
{% if not group %}
<dt>{% trans "Groups" %}</dt>
<dd>
{% if register_object.lesson %}
{{ register_object.lesson.group_names }}
{% else %}
{{ register_object.group_names }}
{% endif %}
</dd>
{% endif %}
<dt>{% trans "Teachers" %}</dt>
<dd>
{{ register_object.teacher_names }}
</dd>
</div>
<dt>{% trans "Lesson topic" %}</dt>
<dd>{% firstof register_object.get_lesson_documentation.topic "–" %}</dd>
{% with register_object.get_lesson_documentation as lesson_documentation %}
{% if lesson_documentation.homework %}
<dt>{% trans "Homework" %}</dt>
<dd>{% firstof register_object.get_lesson_documentation.homework "–" %}</dd>
{% endif %}
{% if lesson_documentation.group_note %}
<dt>{% trans "Group note" %}</dt>
<dd>{% firstof register_object.get_lesson_documentation.group_note "–" %}</dd>
{% endif %}
{% endwith %}
</dl>
</div>
<div class="card-action">
<a href="{{ register_object.alsijil_url }}?back={{ back_url }}"
class="">
{% trans "Visit lesson overview" %}
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endwith %}
{% endfor %}
......@@ -313,9 +371,9 @@
<div class="col s12" id="personal-notes">
<div class="card">
<div class="card-content">
<span class="card-title">
{% blocktrans %}Personal notes{% endblocktrans %}
</span>
<span class="card-title">
{% blocktrans %}Personal notes{% endblocktrans %}
</span>
{% for person in persons %}
<h5 class="card-title">
<a href="{% url "overview_person" person.person.pk %}">{{ person.person.full_name }}</a>
......@@ -371,9 +429,10 @@
{% endif %}
</div>
{% else %}
<div class="card red darken-1">
<div class="card-content white-text">
<div class="card">
<div class="card-content">
<span class="card-title">
<i class="material-icons red-text left">warning</i>
{% blocktrans %}No lessons available{% endblocktrans %}
</span>
<p>
......@@ -385,15 +444,5 @@
</div>
{% endif %}
<script>
$(document).ready(function () {
$("#id_group").change(function () {
$("#id_teacher").val("").formSelect();
});
$("#id_teacher").change(function () {
$("#id_group").val("").formSelect();
});
});
</script>
<script src="{% static 'js/alsijil/week_view.js' %}" type="text/javascript"></script>
{% endblock %}
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