datatracker/ietf/templates/meeting/edit_meeting_schedule.html
Ole Laursen 6c48575042 Swap the axes in the meeting schedule editor and rework it to allow
flowing the days.

Add JS workaround for missing position sticky support, instead of the
CSS workaround which added an annoying padding for everyone.
 - Legacy-Id: 17616
2020-04-09 18:16:56 +00:00

139 lines
4.6 KiB
HTML

{% extends "base.html" %}
{# Copyright The IETF Trust 2015-2020, All Rights Reserved #}
{% load origin %}
{% load staticfiles %}
{% load ietf_filters %}
{% block morecss %}
{% for parent in session_parents %}
.parent-{{ parent.acronym }} {
background: linear-gradient(to right, {{ parent.scheduling_color }} 0.4em, transparent 0.5em);
}
{% endfor %}
{% endblock morecss %}
{% block title %}{{ schedule.name }}: IETF {{ meeting.number }} meeting schedule{% endblock %}
{% block js %}
<script type='text/javascript'>
var ietfData = {{ js_data|safe }};
</script>
<script type="text/javascript" src="{% static 'ietf/js/edit-meeting-schedule.js' %}"></script>
{% endblock js %}
{% block content %}
{% origin %}
<div class="edit-meeting-schedule">
<p class="pull-right">
<a href="{% url "ietf.meeting.views.copy_meeting_schedule" num=meeting.number owner=schedule.owner_email name=schedule.name %}">Copy schedule</a>
&middot;
<a href="{% url "ietf.meeting.views.list_schedules" num=meeting.number %}">All schedules for meeting</a>
</p>
<p>
Schedule name: {{ schedule.name }}
&middot;
Owner: {{ schedule.owner }}
{% if not can_edit %}
&middot;
<em>You can't edit this schedule. Take a copy first.</em>
{% endif %}
</p>
<div class="edit-grid">
{# using the same markup in both room labels and the actual days ensures they are aligned #}
<div class="room-label-column">
{% for labels in room_labels %}
<div class="day">
<div class="day-label">
<strong>&nbsp;</strong><br>
&nbsp;
</div>
<div class="timeline"></div>
{% for room in labels %}
<div class="timeline timeslots">
<div class="room-name">
<strong>{{ room.name }}</strong><br>
{% if room.capacity %}{{ room.capacity }} <i class="fa fa-user-o"></i>{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="day-flow">
{% for day in days %}
<div class="day" style="width: {{ day.width }}em;">
<div class="day-label">
<strong>{{ day.day|date:"l" }}</strong><br>
{{ day.day|date:"N j, Y" }}
</div>
<div class="timeline">
{% for t, left_or_right, offset in day.time_labels %}
<div class="time-label text-{{ left_or_right }}" style="{{ left_or_right }}: {{ offset }}em;">{{ t|date:"H:i" }}</div>
{% endfor %}
</div>
{% for room, timeslots in day.room_timeslots %}
<div class="timeline timeslots" data-roomcapacity="{{ room.capacity }}">
{% for t in timeslots %}
<div id="timeslot{{ t.timeslot.pk }}" class="timeslot" data-start="{{ t.timeslot.time.isoformat }}" data-end="{{ t.timeslot.end_time.isoformat }}" data-duration="{{ t.timeslot.duration.total_seconds }}" style="left: {{ t.offset }}em; width: {{ t.width }}em;">
{% for assignment, session in t.timeslot.session_assignments %}
{% include "meeting/edit_meeting_schedule_session.html" %}
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="scheduling-panel">
<div class="unassigned-container">
<div class="unassigned-sessions">
{% for session in unassigned_sessions %}
{% include "meeting/edit_meeting_schedule_session.html" %}
{% endfor %}
</div>
<div class="preferences">
<span class="sort-unassigned">
Sort unassigned:
<select name="sort_unassigned" class="form-control">
<option value="name" selected="selected">By name</option>
<option value="parent">By area</option>
<option value="duration">By duration</option>
<option value="comments">Special requests</option>
</select>
</span>
<span class="session-parent-toggles">
Show:
{% for p in session_parents %}
<label class="parent-{{ p.acronym }}"><input type="checkbox" checked value="{{ p.acronym }}"> {{ p.acronym }}</label>
{% endfor %}
</span>
</div>
</div>
<div class="session-info-container"></div>
</div>
</div>
{% endblock %}