Autoscaling/responsive widgets using CSS calc()

[sheesania]

Currently, widgets are absolutely positioned and sized, which means they do not adapt to the size of the browser window or re-render when the window is resized. Implementing a truly responsive solution would be a lot of work given how much of the frontend currently leans on absolute positioning and sizing. So as a temporary stopgap, try using CSS calc() and percentages to at least resize widgets when the window is resized.

The calc function should look something like this:

calc(initial width + (100% - container's initial width) * flex ratio)

• "initial width" = width from first render (in px?)
• 100% = current width of window (as it's being resized)
• "container's initial width" = width of window from first render
• So "100% - containers initial width" = total new space available
• "flex ratio" = current widget's flexibility / total section flex (= % flex that is "mine")
• So (100% - container's initial width) * flex ratio is the amount of new space available that is "mine"

As far as I can tell, all positioning logic currently happens on the server side. apos.c uses the widget tree (wgtr.c) to calculate the x, y, width, height, flex width, and flex height of each "node" (widget?) (or maybe it creates "nodes"?), then builds and renders a grid that widgets place themselves in. The widgets decide how much of their (allotted?) width/height to use.

Supposedly every section and widget has "flex" area, and apos.c knows where inter-widget space needs to be static, vs what is flexible (possibly using section divisions?).