diff options
Diffstat (limited to 'web/static/js')
| -rw-r--r-- | web/static/js/app.js | 27 |
1 files changed, 25 insertions, 2 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js index 6071ce3..0a74b46 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -54,7 +54,21 @@ function initTimelineCalendar(calendarId, nowLineId, untimedSectionId) { ev.column = col; } - // Position events with column-based indentation + // How many lanes each event has to share its slot with. The CSS gives every + // event `left: 8px; right: 8px` (full width); previously only `left` was + // overridden, by 16px per column, so two events at the SAME time stayed + // full-width and the later one simply covered the earlier one except for a + // 16px sliver -- reported as two bucket chores "rendered on top of each + // other". They land on identical timestamps because a bucket cycle stamps + // every item it activates with the same due_date. + eventData.forEach(function(ev) { + const overlapping = eventData.filter(function(other) { + return other.endMin > ev.startMin && other.startMin < ev.endMin; + }); + ev.lanes = Math.max.apply(null, overlapping.map(function(o) { return o.column; })) + 1; + }); + + // Position events, splitting the available width across lanes eventData.forEach(function(ev) { const el = ev.el; const hour = parseInt(el.dataset.hour); @@ -65,7 +79,16 @@ function initTimelineCalendar(calendarId, nowLineId, untimedSectionId) { el.style.top = top + 'px'; el.style.height = height + 'px'; - el.style.left = (8 + ev.column * 16) + 'px'; + if (ev.lanes > 1) { + const lane = '((100% - 16px) / ' + ev.lanes + ')'; + el.style.left = 'calc(8px + ' + ev.column + ' * ' + lane + ')'; + el.style.width = 'calc(' + lane + ' - 4px)'; + el.style.right = 'auto'; + } else { + el.style.left = '8px'; + el.style.right = '8px'; + el.style.width = ''; + } el.style.display = 'block'; // Debounced hover effect (100ms delay) |