search

paulhtremblay / covid19

3 stars 4 forks source link

remove absolute positioning #6

Open btrem opened 4 years ago

btrem commented 4 years ago

The charts are positioned absolutely, preventing natural flow of elements, and causing horizontal scrolling. We should change it. Probably position: flex would be fine, maybe grid down the road. I'll have to figure out how the inline styles are being applied, and how to add class names if needed, for the markup created by the js.

btrem commented 4 years ago

I have made no progress on this. It appears that bokeh components provides the layout, using inline styles to set absolute positioning on each div/graph. Is there any way to change that? I'm trying to figure out bokeh to see if the graphs can be placed as html elements in the template, instead of what we have now which is an empty div that gets the graph inserted by javascript.

If that can't be done, can the inline css be nixed in some way?

paulhtremblay commented 4 years ago

I am not sure what you mean here. I think if we want to change the images, we can do so when generating them, or better, with javascript.

btrem commented 4 years ago

If you look at the dom (the source after .js has run), there are a series of <div> items with a style attribute, like this: <div class="bk bk-canvas-events" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; touch-action: auto; user-select: none;"></div> The position: absolute makes it all but impossible to change the style. I'd like to either not have that attribute inserted by bokeh, or, even better, have bokeh embed the div data when you make the site, not when a user loads the site in their browser.

paulhtremblay commented 4 years ago

I looked last night and could not find a lot about customizing bk-root, etc. and didn't find a lot. I think that is because the layout of the graphs is expected to be done in Python, or modified with JS. I believe the whole idea behind bokeh is interactive graphs. With a minimal amount of JS, you do stuff like create sliders.

https://docs.bokeh.org/en/latest/docs/gallery/slider.html

You have to scroll on the graphs, but that is because they are so big ins some cases. I am controlling the layout with the "gird" function in Python. I am bundling up all the graphs in a grid and determining the number by the ncols argument. If you click on the tools, you can actually zoom in on the graphs. There are all sorts of other stuff you can do, but I have not really explored.

btrem commented 4 years ago

I am trying to resolve this, to no avail. The site layout falls apart on small screens. To restate the problem: bokeh is using e.g. 3 columns on Sweden vs. page. Bokeh then forces the side-by-side layout using style attributes with position: absolute. On small screens, that creates horizontal scrolling, and the header and footer don't cover the entire width of the browser. Load the page, then make the browser window narrower and you'll see what I mean.

Is there a reason for insisting on 3 columns on Sweden vs.? Or 4 on each by county page? It seems to me that the site would work better if there were no style position attributes on the div elements. Then it would be a simple matter of playing graphs side-by-side, but with new lines where necessary.

paulhtremblay commented 4 years ago

We need 3 columns for Sweden, because Sweden is to the left, then two country that did better. Then, Sweden is to the left again, and 2 countries that did worse. Not sure how to solve this problem.

On Tue, Jun 30, 2020 at 12:25 PM Brian Tremblay notifications@github.com wrote:

I am trying to resolve this, to no avail. The site layout falls apart on small screens. To restate the problem: bokeh is using e.g. 3 columns on Sweden vs. page https://www.seattle-data.com/comparisons/sweden. Bokeh then forces the side-by-side layout using style attributes with position: absolute. On small screens, that creates horizontal scrolling, and the header and footer don't cover the entire width of the browser. Load the page, then make the browser window narrower and you'll see what I mean.

Is there a reason for insisting on 3 columns on Sweden vs.? Or 4 on each by county page? It seems to me that the site would work better if there were no style position attributes on the div elements. Then it would be a simple matter of playing graphs side-by-side, but with new lines where necessary.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/paulhtremblay/covid19/issues/6#issuecomment-651995662, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIZZ6ISXZB336Z4ULYEUELRZI34FANCNFSM4M3TV4DQ .

-- Henry Tremblay Data Engineer, Best Buy