mozilla-b2g/gaia — pull request #6382 by lmorchard (2012-11-13 20:23:42+00:00)
Title: bug 803378, bug 808803: Rework layout for conflicts and partial-hour events

Okay, let's see if this works. ATTN: @lightsofapollo & @mmccollow

* Location on events spanning less than an hour is hidden in the day view, because there's no room in the UI (was #6293)

* Calculation of both width and left position of conflicting event is now done in JS
* A set of conflict IDs is maintained for affected events, as events are added and removed from the overlap manager
* Event element width is 100% / number of conflicts
* Event element left position is derived by sorting the conflict IDs, finding the index of an event in that sorted list, and then multiplying that by the width. This ensures a unique position for each conflicting event

I couldn't quite make this work with just CSS - floats and absolute positioning don't work together, and flexbox doesn't seem to help with things that overlap. In the end, it just seemed cleaner to slap absolute positioning on everything and control size & positioning programmatically in JS.

The per-event conflict IDs list also seems redundant, but it was the simplest thing I could come up with to derive a unique position for each event in a conflict. Could probably invent some kind of Conflict class to abstract things further, but I suspect that would accumulate a pile of additional code.