search

element-hq / element-web

A glossy Matrix collaboration client for the web.
https://element.io
GNU Affero General Public License v3.0
11.02k stars 1.96k forks source link

Redesign: timeline: make date separator stick to bottom of room header #7575

Open bwindels opened 5 years ago

bwindels commented 5 years ago

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

t3chguy commented 4 years ago

Related https://github.com/vector-im/riot-web/issues/4780

532910 commented 4 years ago

@t3chguy from #14023:

That leads to confusion as it makes it look like that is the first message of that date

Every time I see just time label without a date I thought it's today, and it confuses much more than a sticky header could do.

Example: https://codepen.io/brianhaferkamp/pen/xogEXr

Considering that it's not a static image but a dynamic interactive I see no reason to be confused.

bwindels commented 4 years ago

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

This won't be as easy fwiw, looked further into this and this is not how position sticky works, it will only disappear if it's parent is completely out of view, so you can't make it work with a flat list like our timeline currently.

t3chguy commented 4 years ago

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

bwindels commented 4 years ago

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

Interesting, wasn't aware of that. Although I assumed we would have to add hierarchy (e.g. a container per day) to make sticky work, rather than remove hierarchy?

bwindels commented 4 years ago

I was reading https://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/ the other day and wondered if a hybrid approach like that could be helpful here.

t3chguy commented 4 years ago

Shouldn't need to, if we get display contents on the li that harbours the date separator then Sticky should work on that separator

bwindels commented 4 years ago

Hmm, would be interesting to see how this could work. I just tried on a timeline prototype mockup with sticky dates I made earlier:

.date-separator has position: sticky in both cases.

With a container for messages per day: date-container date-container

With a container (with display:contents) just for the date header: no-date-container no-date-container

This show the same problem as when not using display: contents, e.g. that when you don't have a grouping container per day, the previous header does not disappear, so if you have transparency or variable size, you run into problems.

bwindels commented 4 years ago

Another article on how to do a hybrid js/css approach: https://developers.google.com/web/updates/2017/09/sticky-headers

ShadowJonathan commented 2 years ago

This has become more relevant with https://github.com/matrix-org/matrix-react-sdk/pull/7317, as date headers would become a point of functionality.

Edit: new PR; https://github.com/matrix-org/matrix-react-sdk/pull/7339

HarHarLinks commented 1 year ago

keywords: sticky floating date day divider