hlist: Make columns collapse when viewport is narrow #1109
Conversation
When the items of the hlist cannot fit into the viewport a collumn is split into a new row until the content fits. This dramically improves mobile experience, for example https://docs.blender.org/api/current/bpy.types.AlphaUnderSequence.html will introduce horizonal scrolling on the whole viewport which causes visual glitchs with other content. Fixes #1108
|
Before: After: |
There was a problem hiding this comment.
This fix seems good on other browsers, but IE11 does have problems with the flex box layout. If we want to merge this before dropping IE11 support, flex box can be used to some degree in IE10+11. So far, IE10+11 support has been the reason we haven't used flex layout more.
| display: flex | ||
| flex-flow: row wrap | ||
| td | ||
| margin-right: auto |
There was a problem hiding this comment.
Currently, this theme does not use flex box layout because we have not officially dropped support for IE11, or IE10 for that matter. There is limited support for flex box in IE10+11, but you will need to add more rules.
This PR does break hlists on IE11:
This is what IE11 looks like on latest release, for comparison:
|
I would be in favor of dropping ie 11, the bug you show is avoidable on the user side if they set There are also already issues with ie11 with the theme (see the logo) so maybe we go ahead and formally drop compatibility now. Also, the bug you show is similar to #1050 which affected all browsers maybe it is acceptable to introduce a minor regression. If we don't drop ie11 for 1.0 it might be a while until we release 2.0 (dropping ie should be part of a major release). Does adding |
I did not test this. In theory it might though, IE11 requires a prefix on flex box rules for what support it did have.
This is a minor display issue for now, it probably doesn't warrant dropping ie11 support immediately by itself.
I tested on saucelabs ie11 + |
|
Most recent update seems to have introduced vertical spacing between elements and did not fix the issue with overflow/wrap on the hlist caption:
|
|
Oops, I take that back. It also looks like you didn't rebuild assets yet, only the SASS source was updated. Trying this change manually does not alter the display however. Also, tested on win7 and win10 and no difference on ie11 |
I think that is a docutils 0.17 issue, rebased the patch on master and updated assets so hopefully, work as expected. |
There was a problem hiding this comment.
According to our own docs, we only partly support IE11 and will remove support in 2.0.
See: https://sphinx-rtd-theme.readthedocs.io/en/stable/development.html#supported-browsers
From this, I would gather that this change is entirely fine for 1.1, since it will not introduce a "major bug".
|
It would probably make more sense to revisit in 2.0, when we do drop IE11 support. Feel free to add IE11 support if you'd rather aim for a sooner release. |
When the items of the hlist cannot fit into the viewport a collumn is split into a new row until the content fits.
This dramically improves mobile experience, for example https://docs.blender.org/api/current/bpy.types.AlphaUnderSequence.html will introduce horizonal scrolling on the whole viewport which causes visual glitchs with other content.
Fixes #1108