Front End Code for the MassEnergize Community Portal. The community portal is customized for each participating community, and has the canonical URL https://community.massenergize.org/<community-name>/. For example, https://community.massenergize.org/wayland/.
MIT License
5
stars
2
forks
source link
Sizing of cards and overlap on All Actions page at different window sizes #1390
This has been an issue for some time, and worked on before but it still has issues.
As I resize the browser the action page from a large window to a smaller window, I see the following issues:
There is a point where the size and spacing of the action cards and the menu items jumps:
This is not a serious issue, but I prefer that the sizes and positions would be constant as in the second figure, with just additional white space at the edges.
Getting a bit smaller, at a certain point the cargds get smaller and the impact boxes get a lot thinner, opening up an awkward white band between the action cards and impact boxes. At this level, the "Search" part of the filter menu is only partly visible (though there is space for it)
Getting a bit smaller, the action cards on the left disappear behind the impact boxes. At this point, I think there should be just one column of action cards and they shouldn't overlap like this.
Getting a bit smaller the impact boxes disappear, and the action cards get very wide. The action cards should not get wide like this, but stay the same aspect ratio as they were before, but with extra white space on either side, and (if it fits) the iimpact boxes still present.
Naive comments from someone without experience in web page layout:
it seems this behavior is due to lack of a good overall design framework for our pages. I don't see this sort of think happening on most other websites. In fixing this issue, I think the first step should be writing down a set of principles as to how the graphical layout of elements should change with different window sizes, and then implementing the framework to make that happen.
Describe the bug
This has been an issue for some time, and worked on before but it still has issues.
As I resize the browser the action page from a large window to a smaller window, I see the following issues:
There is a point where the size and spacing of the action cards and the menu items jumps:
This is not a serious issue, but I prefer that the sizes and positions would be constant as in the second figure, with just additional white space at the edges.
Getting a bit smaller, at a certain point the cargds get smaller and the impact boxes get a lot thinner, opening up an awkward white band between the action cards and impact boxes. At this level, the "Search" part of the filter menu is only partly visible (though there is space for it)
Getting a bit smaller, the action cards on the left disappear behind the impact boxes. At this point, I think there should be just one column of action cards and they shouldn't overlap like this.
Getting a bit smaller the impact boxes disappear, and the action cards get very wide. The action cards should not get wide like this, but stay the same aspect ratio as they were before, but with extra white space on either side, and (if it fits) the iimpact boxes still present.
Naive comments from someone without experience in web page layout: it seems this behavior is due to lack of a good overall design framework for our pages. I don't see this sort of think happening on most other websites. In fixing this issue, I think the first step should be writing down a set of principles as to how the graphical layout of elements should change with different window sizes, and then implementing the framework to make that happen.