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

Site Editor: Fix height of Navigation panel and make it scrollable #26187

Merged
merged 4 commits into from
Oct 28, 2020

Conversation

david-szabo97
Copy link
Member

Fixes: #26120

Description

Add a scroll container and makes sure the site title stick to the top. Also subtracts the footer's height from the navigation panel's height so it doesn't "go below" the footer.

How has this been tested?

  • Open site editor
  • Open navigation panel
  • In devtools copy-paste one of the menus (Templates or Content) as many times as you need to make the container overflow
  • Or just resize your browser / use devtools to reduce the height of the viewport

Screenshots

ezgif com-gif-maker (3)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Oct 16, 2020

Size Change: +95 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/edit-site/index.js 21.7 kB +12 B (0%)
build/edit-site/style-rtl.css 3.83 kB +43 B (1%)
build/edit-site/style.css 3.83 kB +40 B (1%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/index.js 8.59 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 130 kB 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.93 kB 0 B
build/block-library/editor.css 8.93 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.77 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/index.js 170 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.63 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 684 B 0 B
build/data/index.js 8.63 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 4.43 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-widgets/index.js 26.6 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.6 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.45 kB 0 B
build/primitives/index.js 1.35 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.61 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.75 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.23 kB 0 B

compressed-size-action

@david-szabo97 david-szabo97 force-pushed the update/navigation-panel-animations branch 2 times, most recently from 83b0517 to bf82194 Compare October 19, 2020 18:14
@jeyip jeyip force-pushed the update/navigation-panel-animations branch from bf82194 to bd29228 Compare October 19, 2020 21:19
@Copons Copons force-pushed the update/navigation-panel-animations branch from bd29228 to ce55683 Compare October 20, 2020 10:40
Base automatically changed from update/navigation-panel-animations to master October 20, 2020 15:53
@david-szabo97 david-szabo97 force-pushed the fix/navigation-panel-height-and-scroll branch from 3e4091c to 1f1b890 Compare October 21, 2020 07:36
@david-szabo97
Copy link
Member Author

Rebased, ready for review again 🙂

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't seem to work as expected to me. 🤔

Tall Screen Medium Screen Short Screen (scrolled top) Short Screen (scrolled bottom)
Screenshot 2020-10-21 at 16 09 10 Screenshot 2020-10-21 at 16 09 22 Screenshot 2020-10-21 at 16 09 32 Screenshot 2020-10-21 at 16 09 42
✅ No scrollbar ❌ No scrollbar
❌ Last element covered by footer
✅ Scrollbar
❌ Scrollbar ends under footer
❌ Last element covered by footer
(Same)

@david-szabo97
Copy link
Member Author

Uggggh. Thanks for noticing that!

Fixed it. Only tested in Chrome for now. I'll test in the other browsers tomorrow.

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me! ✨

Tested on latest Chrome, Firefox, Safari, and Opera, on macOS 10.15.17.

@david-szabo97 david-szabo97 force-pushed the fix/navigation-panel-height-and-scroll branch from f2dfb9d to 0d2e9c3 Compare October 22, 2020 07:46
@david-szabo97 david-szabo97 merged commit 2fdde1c into master Oct 28, 2020
@david-szabo97 david-szabo97 deleted the fix/navigation-panel-height-and-scroll branch October 28, 2020 12:35
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 28, 2020
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.

Site Editor: Resize the Navigation Sidebar Height Appropriately
2 participants