Thanks again for all your work on just-the-class!
Is your feature request related to a problem? Please describe.
In a course, we may have two completely overlapping schedule items. For example, in the spring iteration of the class I'm TAing for, we have two discussion sections that happen at the same time: on Friday from 2-3:50 PM.
Unfortunately, since they completely overlap, it's not possible to see the first event at all (in this case, Section 1B). You can verify that it's still being rendered in the DOM with dev tools, etc.
Describe the solution you'd like
The immediate solution that jumped to my mind is to have "half-cards" when there's overlap. Here's a hacky solution that sets width: 50%
, and right: 0
on the second card. This is inspired by what Google Calendar does.
As it stands, it's not great, but I think with some minor CSS tweaks this could be resolved (ex font sizes, etc.).
Detecting just two complete overlaps should be doable with a bit of preprocessing before iterating through site.schedules
.
Describe alternatives you've considered
Two issues with what I've mentioned above:
- it scales poorly to 3+ overlaps (you'd have little to no screen real estate)
- the cards have quite a bit more visual clutter, and the shared color does not help
A handful of other suggestions:
- render only one card for the overlap slot; but, merge the information on one card. This approach doesn't work if the overlap isn't exact.
- show one card, but let the user know that there are two events "on" that card; with some interaction (ex on hover/click), see the other one. This one seems to have too much friction and could be inaccessible.
- expand the width of the column when there are overlaps. Scales poorly if multiple days have overlaps :')
- if automatically detecting the overlap isn't possible, we could also ask the user to specify this in configuration (ex a
left
or right
key that toggles a CSS class)
Additional context
Could be out of scope of the theme; if so, feel free to close. Also happy to submit a PR if you'd like!