joeni

{% cycle "hour" "first quarter" "half" "last quarter" as hour silent %}

{# "silent" blocks the cycle operator from printing the cycler, and in subsequent calls #}

{% load i18n %}

{% block title %}

    {% trans "Roster" %} | {{ block.super }}

{% endblock %}

{% block main %}

    <h1>{% trans "Personal timetable" %}</h1>

    <h2>{% trans "Main hour roster" %}</h2>

    {% include "administration/roster_t.djhtml" %}

        <a class="btn" href="{% url "administration-roster" begin=prev_begin end=prev_end %}">

    <h2>{% trans "Explanation" %}</h2>

    <p>

        {% trans "Personal roster from" %} {{ begin|date }} {% trans "to" %} {{ end|date }}

    </p>

    <p>

        {% blocktrans %}

            Some fields may have additional information that might be of interest

            to you. This information is shown in different ways with colour codes.

        {% endblocktrans %}

    </p>

    <dl>

        <dt><span class="event-update">

            {% trans "Recent event update" %}

        </span></dt>

        <dd>

            {% blocktrans %}

                This event had one or more of its properties changed

                in the last five days. This can be the room, the hours, the subject, ...

                You're encouraged to take note of that.

            {% endblocktrans %}

        </dd>

        <dt><span class="event-new">

            {% trans "New event" %}

        </span></dt>

        <dd>

            {% blocktrans %}

                This is a new event, added in the last five days.

            {% endblocktrans %}

        </dd>

        <dt><span class="event-note">

            {% trans "Notification available" %}

        </span></dt>

        <dd>

            {% blocktrans %}

                This event has a note attached to it by the docent. Hover over

                the event to display the note.

            {% endblocktrans %}

        </dd>

    </dl>

{% endblock main %}

    font-family: ubuntu;

    border-style: solid;

    text-transform: uppercase;

    border-width: 0.3em;

    margin: 1em;

    padding: 0.2em;

    text-decoration: none;

    color: $uhasselt-color;

    font-weight: bold;

}

a.btn:hover {

    background-color: $uhasselt-color;

    color: white;

}

dl dt {

    margin: 5px;

}

.event {

    padding: 5px;

    color: white;

    a {

        text-decoration: none;

        color: inherit;

        &:hover {

            text-decoration: white underline dotted;

            font-style: italic;

        }

    }

}

td {

    padding-right: 1em;

}

.event-update {

    padding: 5px;

    background-color: yellow;

    color: red;

    border: medium dotted red;

    a {

        text-decoration: none;

        color: inherit;

        &:hover {

            text-decoration: red underline dotted;

            font-style: italic;

        }

    }

}

.event-new {

    padding: 5px;

    background-color: white;

    color: black;

    border: medium dashed black;

    a {

        text-decoration: none;

        color: inherit;

        &:hover {

            text-decoration: black underline dotted;

            font-style: italic;

        }

    }

}

.event-note {

    padding: 5px;

    color: purple;

    border: medium double purple;

        text-decoration: none;

        color: inherit;

        &:hover {

            text-decoration: white underline dotted;

            font-style: italic;

        }

    }

}

.event-conflict {

    padding: 5px;

    background-color: red;

    color: white;

    border: medium dashed;

    border-color: inherit;

    a {

        text-decoration-color: blue;

        font-style: italic;

        }

}

p.conflict {

    width: 50%;

    @media screen

    and (max-device-width: 440px)

    and (max-device-height: 800px) {

        width: 100%;

    }

}