Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update html Layout fixes issues and improves html5 usage #1122

Open
wants to merge 23 commits into
base: master
Choose a base branch
from

Conversation

Blendify
Copy link
Member

@Blendify Blendify commented Apr 9, 2021

This patch updates the css layout to use new html5 semantic tags. This patch also reworks the sidebar to reduce the needed css/html nesting and makes things simpler. As a result this improves the responsiveness of the sidebar. The sidebar is now always fixed to 300px (#899).

This patch helps with html5 adoption and makes moving to bootstrap easier. This patch also helps with docutils 0.17 which makes better use of semantic tags.

Removed CSS classes (with styling equivalent):

wy-body-for-nav --> body
wy-grid-for-nav --> body
wy-nav-content-wrap --> .wy-nav-content
  • fix flyout menu
  • fix mobile overflow, see the math page.
  • collapse sidebar on mobile landscape

Fixes #899
Fixes #885

This patch addresses some sass formatting to make the code easier to read:

- Use leading zeros on decimals less than 1
- Use parentheses around math for css propeties with multiply arguments
- Spaces after commas in arguments

In the future it would be nice to automatically format this with a tool like style lint.
This patch updates the css layout to use new html5 semantic tags. This patch also reworks the sidebar to reduce the needed css/html nesting and makes things simpler. As a result this improves the responsiveness of the sidebar. The sidebar is now always fixed to 300px (this was a bug report will update to add the task).

This patch helps with html5 adoption and makes moving to bootstrap easier. This patch also helps with docutils 0.17 which makes better use of semantic tags.
@Blendify Blendify requested a review from agjohnson April 9, 2021 07:26
Blendify added a commit that referenced this pull request Apr 11, 2021
This patch solve the issue where users have to scroll to the top of the page to open the sidebar.

This patch will work best with #1122 but can be independent.

Fixes: #473
Blendify added a commit that referenced this pull request Apr 19, 2021
commit 201132b
Merge: fb6219c 2026bb6
Author: Aaron Carlisle <carlisle.b3d@gmail.com>
Date:   Sun Apr 18 18:10:08 2021 -0400

    Merge branch 'master' into Blendify/fixed-header

commit fb6219c
Author: Aaron Carlisle <carlisle.b3d@gmail.com>
Date:   Sun Apr 11 22:49:11 2021 -0400

    Add delta & adjust padding

commit 25ea466
Author: Aaron Carlisle <carlisle.b3d@gmail.com>
Date:   Sun Apr 11 22:33:52 2021 -0400

    Move Header Height to variable

commit 0d8ed6d
Author: Aaron Carlisle <carlisle.b3d@gmail.com>
Date:   Sun Apr 11 00:59:38 2021 -0400

    Update comment

commit e5091f4
Author: Aaron Carlisle <carlisle.b3d@gmail.com>
Date:   Sun Apr 11 00:57:18 2021 -0400

    Header: Hide on scroll

    This patch solve the issue where users have to scroll to the top of the page to open the sidebar.

    This patch will work best with #1122 but can be independent.

    Fixes: #473
@Blendify Blendify mentioned this pull request Apr 19, 2021
@agjohnson
Copy link
Collaborator

This feels like a big backwards incompatible change that is going to conflict with switching to Bootstrap. I'd probably vote we only make backward incompatible changes to this DOM structure once. These are common elements for users and customers to restyle.

The side navigation width issue on tablet viewport size might be better to address after a bootstrap port, if we decide do anything with it once we're using bootstrap.

For some additional context here, tablet viewport usage on our docs is < 0.5% of our monthly pageviews. It might make sense to just have the side menu experience match mobile to give us one less difference to maintain. Agreed 85% or 100% width will be odd on tablet viewport sizes though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sidebar width is too large on mobile landscape Inconsistent max-width:800px;
2 participants