Make legends table responsive

PerCollECT / Source-Files

Source files for PerCollECT visualization. This is included in the PerCollECT repos as a submodule.

MIT License

2 stars 2 forks source link

Make legends table responsive #49

Closed ehab74 closed 3 months ago

ehab74 commented 3 months ago

The legends table dimensions are resizing by changing the window size.

ChristophPopp commented 3 months ago

Can you also dynamically decrease the spacing between the lines and under the bottom/ over the top line in the legend box accordingly? Consequently, the height of the legend box should also be decreased in order not to look too empty.

ehab74 commented 3 months ago

No problem. Please tell me your feedback once you tried the latest changes.

ChristophPopp commented 3 months ago

I adapted the spacing in the legend and for the expand/collaps buttons a bit. Two more changes I'd like you to do for the legend box when it is in original (not reduced) size:

decrease top and bottom spacing in the box a bit (see smaller legend boxes, where I adapted the spacing in the last commit)
set distance of legend box to right edge of the window to 5px (like I did it for smaller legend boxes in my last commit)

ehab74 commented 3 months ago

Sure. One thing is the last modifications cause the legend box in the smallest size to generate a break line:

Which do you prefer: revert the changes of the smallest box width back to 280px or try to decrease the size to fit inside the box?

ChristophPopp commented 3 months ago

Sure. One thing is the last modifications cause the legend box in the smallest size to generate a break line

This is strange, because it doesn't happen for me. When I try it out, the smallest width without line break is 265px. Do you have an idea why that is? In the end, I'd rather prefer a wider box than a line break.

ehab74 commented 3 months ago

Sure. One thing is the last modifications cause the legend box in the smallest size to generate a break line

This is strange, because it doesn't happen for me. When I try it out, the smallest width without line break is 265px. Do you have an idea why that is? In the end, I'd rather prefer a wider box than a line break.

Sometimes this happens if the box is too tight and text inside the box fits inside. It can be due to a different browser, operating system and in some cases the screen resolution. You can reproduce the same result in Chrome if you tried to zoom in or out or in firefox without changing the zooming.

Anyway, it should be easier to make the box a little wider than tracing one of these problems.

One last thing, should i also decrease the space between the legend box and the tree boxes in the original size after decreasing the top and bottom spaces?

ChristophPopp commented 3 months ago

One last thing, should i also decrease the space between the legend box and the tree boxes in the original size after decreasing the top and bottom spaces?

Yes, please do so. And the right edge should be horizontally aligned with the legend box (same distance to the right edge of the window).

ehab74 commented 3 months ago

Yes, please do so. And the right edge should be horizontally aligned with the legend box (same distance to the right edge of the window).

Done.