Change new meeting schedule editor to not layout the time slots on a

linear scale, instead lay them out horizontally per day in
chronological order with a small amount of size hinting by
interpolating the width depending on the duration of the
timeslot/session.

Solve the problem of labeling time slots that don't necessarily align
by simply labeling each slot separately.

Add scheduled time slot information to the session info in the bottom
right corner.

Add selector for hiding timeslots to make it possible to hide special
morning sessions.

Add requested duration to the sessions in the grid.

Use a smaller font size for the grid and switch to a non-serif, more
condensed font. Tweak the margins. The grid is now slightly smaller
than the old editor.

Fix a couple of bugs.
 - Legacy-Id: 18012

Author: OleLaursen

ietf/meeting/views.py

@@ -508,20 +508,22 @@ def edit_meeting_schedule(request, num=None, owner=None, name=None):
         assignments_by_session[a.session_id].append(a)
 
     # Prepare timeslot layout, making a timeline per day scaled in
-    # browser em units to ensure that everything lines up even if the
+    # browser rem units to ensure that everything lines up even if the
     # timeslots are not the same in the different rooms
 
-    def timedelta_to_css_ems(timedelta):
-        css_ems_per_hour = 5
-        return timedelta.seconds / 60.0 / 60.0 * css_ems_per_hour
+    min_duration = min(t.duration for t in timeslots_qs)
+    max_duration = max(t.duration for t in timeslots_qs)
 
-    timeslots_by_day = defaultdict(list)
-    for t in timeslots_qs:
-        timeslots_by_day[t.time.date()].append(t)
+    def timedelta_to_css_ems(timedelta):
+        capped_min_d = max(min_duration, datetime.timedelta(minutes=30))
+        capped_max_d = min(max_duration, datetime.timedelta(hours=4))
+        capped_timedelta = min(max(capped_min_d, timedelta), capped_max_d)
 
-    day_min_max = []
-    for day, timeslots in sorted(timeslots_by_day.items()):
-        day_min_max.append((day, min(t.time for t in timeslots), max(t.end_time() for t in timeslots)))
+        min_d_css_rems = 8
+        max_d_css_rems = 10
+        # interpolate
+        scale = (capped_timedelta - capped_min_d) / (capped_max_d - capped_min_d) if capped_min_d != capped_max_d else 1
+        return min_d_css_rems + (max_d_css_rems - min_d_css_rems) * scale
 
     timeslots_by_room_and_day = defaultdict(list)
     room_has_timeslots = set()
@@ -530,58 +532,32 @@ def timedelta_to_css_ems(timedelta):
         timeslots_by_room_and_day[(t.location_id, t.time.date())].append(t)
 
     days = []
-    for day, day_min_time, day_max_time in day_min_max:
-        day_labels = []
-        day_width = timedelta_to_css_ems(day_max_time - day_min_time)
-
-        label_width = 4 # em
-
-        hourly_delta = 2
-
-        first_hour = int(math.ceil((day_min_time.hour + day_min_time.minute / 60.0) / hourly_delta) * hourly_delta)
-        t = day_min_time.replace(hour=first_hour, minute=0, second=0, microsecond=0)
-
-        last_hour = int(math.floor((day_max_time.hour + day_max_time.minute / 60.0) / hourly_delta) * hourly_delta)
-        end = day_max_time.replace(hour=last_hour, minute=0, second=0, microsecond=0)
-
-        while t <= end:
-            left_offset = timedelta_to_css_ems(t - day_min_time)
-            right_offset = day_width - left_offset
-            if right_offset > label_width:
-                # there's room for the label
-                day_labels.append((t, 'left', left_offset))
-            else:
-                day_labels.append((t, 'right', right_offset))
-
-            t += datetime.timedelta(seconds=hourly_delta * 60 * 60)
-
-        if not day_labels:
-            day_labels.append((day_min_time, 'left', 0))
-
+    for day in sorted(set(t.time.date() for t in timeslots_qs)):
         room_timeslots = []
         for r in rooms:
             if r.pk not in room_has_timeslots:
                 continue
 
             timeslots = []
             for t in timeslots_by_room_and_day.get((r.pk, day), []):
-                timeslots.append({
-                    'timeslot': t,
-                    'offset': timedelta_to_css_ems(t.time - day_min_time),
-                    'width': timedelta_to_css_ems(t.end_time() - t.time),
-                })
+                t.layout_width = timedelta_to_css_ems(t.end_time() - t.time)
+                timeslots.append(t)
 
             room_timeslots.append((r, timeslots))
 
         days.append({
             'day': day,
-            'width': day_width,
-            'time_labels': day_labels,
             'room_timeslots': room_timeslots,
         })
 
     room_labels = [[r for r in rooms if r.pk in room_has_timeslots] for i in range(len(days))]
 
+    # possible timeslot start/ends
+    timeslot_groups = defaultdict(set)
+    for ts in timeslots_qs:
+        ts.start_end_group = "ts-group-{}-{}".format(ts.time.strftime("%Y%m%d-%H%M"), int(ts.duration.total_seconds() / 60))
+        timeslot_groups[ts.time.date()].add((ts.time, ts.end_time(), ts.start_end_group))
+
     # prepare sessions
     for ts in timeslots_qs:
         ts.session_assignments = []
@@ -637,7 +613,7 @@ def cubehelix(i, total, hue=1.2, start_angle=0.5):
         elif s.name:
             s.scheduling_label = s.name
 
-        s.requested_duration_in_hours = s.requested_duration.seconds / 60.0 / 60.0
+        s.requested_duration_in_hours = round(s.requested_duration.seconds / 60.0 / 60.0, 1)
 
         session_layout_margin = 0.2
         s.layout_width = timedelta_to_css_ems(s.requested_duration) - 2 * session_layout_margin
@@ -688,6 +664,7 @@ def cubehelix(i, total, hue=1.2, start_angle=0.5):
         'js_data': json.dumps(js_data, indent=2),
         'days': days,
         'room_labels': room_labels,
+        'timeslot_groups': sorted((d, list(sorted(t_groups))) for d, t_groups in timeslot_groups.items()),
         'unassigned_sessions': unassigned_sessions,
         'session_parents': session_parents,
         'hide_menu': True,

ietf/static/ietf/css/ietf.css

@@ -1022,81 +1022,66 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 }
 
 .edit-meeting-schedule .edit-grid .day {
-  margin-right: 2.5em;
+  margin-left: 1em;
   margin-bottom: 2em;
 }
 
+.edit-meeting-schedule .edit-grid .room-label-column .day {
+  margin-left: 0;
+}
+
 .edit-meeting-schedule .edit-grid .day-label {
   height: 3em;
-  border-bottom: 2px solid transparent;
 }
 
 .edit-meeting-schedule .edit-grid .day-flow {
   margin-left: 8em;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-@media only screen and (max-width: 120em) {
-  /* if there's only room for two days, it looks a bit odd with space-between */
-  .edit-meeting-schedule .edit-grid .day-flow {
-    justify-content: flex-start;
-  }
+  justify-content: flex-start;
 }
 
-.edit-meeting-schedule .edit-grid .day-flow .day-label {
-  border-bottom: 2px solid #eee;
+.edit-meeting-schedule .edit-grid .timeslots {
+  position: relative;
+  height: 4.5em;
+  padding-bottom: 0.15em;
 }
 
-.edit-meeting-schedule .edit-grid .timeline {
+.edit-meeting-schedule .edit-grid .timeslot {
   position: relative;
-  height: 1.6em;
+  display: inline-block;
+  background-color: #f4f4f4;
+  height: 100%;
+  overflow: hidden;
 }
 
-.edit-meeting-schedule .edit-grid .timeline > div {
+.edit-meeting-schedule .edit-grid .timeslot .time-label {
+  display: flex;
   position: absolute;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #999;
 }
 
-.edit-meeting-schedule .edit-grid .timeline.timeslots {
-  height: 3.3em;
-}
-
-.edit-meeting-schedule .edit-grid .timeline .time-label {
-  font-size: smaller;
-  border-left: 2px solid #eee;
-  border-right: 2px solid #eee;
-  padding: 0 0.2em;
-  height: 1.3em;
-}
-
-.edit-meeting-schedule .edit-grid .timeline .time-label.text-left {
-  border-right: none;
-}
-
-.edit-meeting-schedule .edit-grid .timeline .time-label.text-right {
-  border-left: none;
-}
-
-.edit-meeting-schedule .timeslot {
+.edit-meeting-schedule .edit-grid .timeslot .drop-target {
+  position: relative; /* this is merely to make sure we are positioned above the time labels */
   display: flex;
   flex-direction: row;
-  background-color: #eee;
   height: 100%;
-  border-bottom: 0.15em solid #fff;
-  overflow: hidden;
 }
 
-.edit-meeting-schedule .timeslot.dropping {
+.edit-meeting-schedule .edit-grid .timeslot.dropping {
   background-color: #ccc;
   transition: background-color 0.2s;
 }
 
-.edit-meeting-schedule .timeslot.overfull {
+.edit-meeting-schedule .edit-grid .timeslot.overfull {
   border-right: 2px dashed #fff; /* cut-off illusion */
 }
 
-.edit-meeting-schedule .timeslot.would-violate-hint {
+.edit-meeting-schedule .edit-grid .timeslot.would-violate-hint {
   background-color: #ffe0e0;
 }
 
@@ -1111,7 +1096,6 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 
 .edit-meeting-schedule .formatted-constraints .encircled {
   font-size: smaller;
-  cursor: help;
 }
 
 /* sessions */
@@ -1139,7 +1123,7 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 }
 
 .edit-meeting-schedule .session.dragging {
-  opacity: 0.3;
+  opacity: 0.1;
   transition: opacity 0.4s;
 }
 
@@ -1148,6 +1132,11 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
   margin-right: 0;
 }
 
+.edit-meeting-schedule .edit-grid, .edit-meeting-schedule .session {
+  font-family: arial, helvetica, sans-serif;
+  font-size: 11px;
+}
+
 .edit-meeting-schedule .session .session-label {
   flex-grow: 1;
   margin-left: 0.1em;
@@ -1208,6 +1197,7 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
   left: 0;
   width: 100%;
   border-top: 0.2em solid #ccc;
+  margin-bottom: 2em;
   background-color: #fff;
   opacity: 0.95;
 }
@@ -1217,21 +1207,24 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 }
 
 .edit-meeting-schedule .unassigned-sessions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
   margin-top: 0.5em;
   min-height: 4em;
   max-height: 13em;
   overflow-y: auto;
-  background-color: #eee;
+  background-color: #f4f4f4;
 }
 
 .edit-meeting-schedule .unassigned-sessions.dropping {
   background-color: #e5e5e5;
   transition: background-color 0.2s;
 }
 
+.edit-meeting-schedule .unassigned-sessions .drop-target {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
 .edit-meeting-schedule .scheduling-panel .preferences {
   margin: 0.5em 0;
 }
@@ -1245,6 +1238,21 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
   display: inline-block;
 }
 
+.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body {
+  /*column-count: 3;*/
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body > * {
+  margin-right: 1.5em;
+}
+
+.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body label {
+  display: block;
+  font-weight: normal;
+}
+
 .edit-meeting-schedule .session-parent-toggles {
   margin-top: 1em;
 }
@@ -1259,8 +1267,9 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 
 .edit-meeting-schedule .scheduling-panel .session-info-container {
   padding-left: 0.5em;
-  flex: 0 0 20em;
-  max-height: 15em;
+  flex: 0 0 25em;
+  max-height: 25em;
+  font-size: 14px;
   overflow-y: auto;
 }