diff --git a/aleksis/apps/alsijil/static/css/alsijil/week_view.css b/aleksis/apps/alsijil/static/css/alsijil/week_view.css new file mode 100644 index 0000000000000000000000000000000000000000..bf1b4878e23e39e1d8fe215bc0e670043efa1f49 --- /dev/null +++ b/aleksis/apps/alsijil/static/css/alsijil/week_view.css @@ -0,0 +1,105 @@ +.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-left: 0; +} + +dl { + margin: 0; + padding: 0; +} + +dt { + font-weight: bold; +} + +dt:not(:last-of-type) { + border-bottom: solid #ddd 1px; + font-size: 14px; +} + +dd { + margin: auto; + 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-left: 1rem; +} + +.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 { + /* FIXME: merge styles into one line */ +} + +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; + rotate: 270deg; + rotation: 270deg; +} + +.unfold-trigger.vertical i.material-icons { + transform: rotate(-90deg); +} diff --git a/aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html b/aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html index 652ae03fd29e39026c82eeb7c243c723ce83af5a..21f3dd23685fcc6c4498961affc109fc84b56203 100644 --- a/aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html +++ b/aleksis/apps/alsijil/templates/alsijil/class_register/week_view.html @@ -8,6 +8,7 @@ {% 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 content %} @@ -259,6 +260,84 @@ </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 "Display more" %} <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_icon.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 period.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 %}