Frontend April 0x1A

Things have slowed down a little, some people are busy with studies and other things. I primarily got busy with polishing threecolumn MR, which is this post will be all about. This post will also be a bit more technical.

Just when starting with threecolumn mode, I realize that to properly implement it I would need to refactor a lot of layout code - primarily that sidebar CSS stuff needs to be reusable, in addition to having a sidebar, main content, everything needs to be a "column" first, with secondary columns (i.e. sidebar, third column) being scrollable. Making columns scrollable also was somewhat of a challenge - our old approach was janky and hacky, it involved several layers of containers as well as IIRC, position: fixedwhich wouldn't fly with 3-column mode. Solution was simple but relies on a modern-ish feature (should be fine now, even with mememoon) which is position: sticky - funny thing is - if you use sticky on an element that spans the entire container height it behaves pretty much the same as fixed except that it will remember its position properly. In addition instead of using old janky method of hiding the scrollbar by pushing it beyond the left border of overflow of another container (which is sometimes broken on some browsers for some reason) now we hide it using custom scrollbars, which also gives us an option to show the scrollbars if user needs it, accessibility recommends showing them, in fact (IIRC). Another long story is removing all of the jank chats-specific stuff, since that was using its own layout. It's not very interseting, just me struggling with the bugs.

And since I'm using sticky anyway why not make panel headers sticky, too? And while we're at it, heck, let's use them for inline conversations too, this will help with closing hellthreads without having to scroll! Only problem is that now I also have to refactor panel stuff, and even though there's much bigger refactoring task for panel stuff, this refactoring is a bit more lightweight. Panels aren't proper components in PleromaFE, they are more like standard style sets, sorta like bootstrap stylesheets. Problem with turning them into proper components is that some other components like Timeline have "embedded" mode which just strips the panel-related classnames from itself, and I've yet to figure out how to properly architect stuff for such scenarios, although I did something later for this case. Panels also have stuff smushed all over the codebase, and it needed to be put into one place, which means more refactoring - moving stuff from Timeline and Notifications into Panel, adding support for sticky headers etc.

So with all this refactoring I decided since I'm changing stuff I'm changing stuff for good, and one of the things I began implementing is changing a lot of dimentional stuff to relative units, i.e. ems/rems, plus fixing line-heights and so on. This should make it possible to resize the UI not by using browser zoom but by changing root font size. For some reason this is STILL not enough for browser text size to kick in properly, but in future you'd be able to change font size in UI, much like you can change fonts (in theme tab). Currently you'll have to make do with a userstyle (i.e. html { font-size: 16px; } ) but not everything is resized right now - most notably user avatars and (most) emoji aren't resized, plus thresholds for single/two/three column modes are still using pixels for measurement (and now switch happens purely in JS so can't really use ems there right now). Don't worry though, proper UI resize is coming, I personally really want it, especially for mobile.