Proposal: Have JavaScript Calc the position of fixed elements in the layout

[sethborne]

So I think the solution we have is ok - it just seems a bit piecemeal.

Considering we'll need to dynamically generate some of these for mobile (when you click the hamburger), I'd propose that we just retool the site to calculate the fixed values of the sidebar and main content on any resize.

While i realize its alot of calcs - I think it will just make things so much smoother.

Thoughts?

[MynockSpit]

"Fixed elements"? Do you mean the sidebar and titlebar? Or do you mean elements with position: fixed?

That said, I've got nothing against with calcs, so it seems like a good idea to me.

[amnevins]

Just make sure you add a debounce and thats good by me

[amnevins]

i feel like this could also be done with media queries and css with a js thing for flyout sidebar on mobile

[MynockSpit]

@sethborne -- When you said "using calcs" did you mean "using javascript to set styles" or "using calc(100% - px)"?

[amnevins]

I was interpreting as a resize listener i dont have an issue with css calc()

[sethborne]

I was referring to a resize listener. Right now we are using media queries. I was looking at the mobile nav yesterday, for the hamburger (and at some point "the flyout sidebar") and thats when I thought it might be easier to just do it all with js on a resize, so it is always just in one place, so one wouldn't have to skip around between the two. Because it can get a bit confusing.

[MynockSpit]

Right. My preference would be to try to keep it as pure CSS as possible, but honestly? my only reason backing that is that we’d have to push the limits on CSS and might learn new tricks.

[MynockSpit]

Sell me on this. What makes using JS to calc positions less complex than using CSS Media Queries?

[sethborne]

So at this point, I'll admit I'm not Jimi Hendrix'ed enough maybe...

But it seems like we are, right now, split between Media queries, and JS functions to do page (dashboard) layout.

At least, I think we could unify how we are determining this layout.

My thought for JS doing the dashboard layout, is that a JS listener could calc the fixed positions (or offsets) of elements required, without having to know 'exactly' what the values needed to be, which seems the constraint of CSS/media queries (from what I understand at least) :|

[MynockSpit]

Problem with JS functions is that we're running JS and recalcing every time the frame resizes. That means we're causing a repaint and reflow each time. If we pass that problem to CSS, it gets hardware accelerated. We could do a bunch of if checking (i.e. if window.width > Xpx) but that's almost identical to a media query, no?

A potential counter proposal would be to go the opposite direction -- remove as much of the layout from javascript and shift the core of the css away from fixed position and towards relative positions. (The exception would be the menu in mobile which could be fixed.)

A real-world example of this CSS layout is the Slack webapp.

[sethborne]

going to close this #heresy