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.

Sign up for GitHub

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

Jump to bottom

Try: Make site editor responsive. #26021

Merged
merged 13 commits into from
Nov 5, 2020
Merged

Try: Make site editor responsive. #26021

merged 13 commits into from
Nov 5, 2020

Commits on Nov 5, 2020

  1. Make the site editor visible on mobile.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    c595151 View commit details
    Browse the repository at this point in the history

  2. Hide pinned until after medium breakpoint.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    0f5db67 View commit details
    Browse the repository at this point in the history

  3. Collapse Update Design label on mobile.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    5888438 View commit details
    Browse the repository at this point in the history

  4. Limit tools on mobile.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    f68f4b9 View commit details
    Browse the repository at this point in the history

  5. Fix regressions.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    a308c43 View commit details
    Browse the repository at this point in the history

  6. Fix issue with sidebar not working.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    6f87313 View commit details
    Browse the repository at this point in the history

  7. Add desktop affordances to site editor header 

    Flex bases of 335px were added to the left and right site editor header toolbars to prevent their children from collapsing when shrinking the viewport. This, however, did not account for tbehavior at smaller screen widths (tablet / mobile), and caused layout issues.

To address this, we use breakpoints to define the 335px flex bases as desktop specific affordances.
    @jeyip
    jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    a60468c View commit details
    Browse the repository at this point in the history

  8. Make the site editor visible on mobile.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    a6d1db7 View commit details
    Browse the repository at this point in the history

  9. Fix issue with sidebar not working.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    9887b56 View commit details
    Browse the repository at this point in the history

  10. Remove the width property.

    @jasmussen @jeyip
    jasmussen authored and jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    26c0895 View commit details
    Browse the repository at this point in the history

  11. Refactor LeftSidebar rendering logic for InterfaceSkeleton 

    The InterfaceSkeleton component coordinates the general layout and styling of the site editor and post editor pages. It expects specific behavior from its props. For example, if the LeftSidebar is open, InterfaceSkeleton expects to be passed JSX markup as the leftSidebar prop. Otherwise, if the LeftSidebar isn't open, InterfaceSkeleton expects a null or falsey leftSidebar prop. InterfaceSkeleton styling depends on this behavior.

In edit site, the LeftSidebar prop passed into InterfaceSkeleton was always a truthy value. As a result, InterfaceSkeleton was improperly accounting for a LeftSidebar, even when it was unmounted from the screen.

These changes move the logic to determine when the sidebar should "open" up from the LeftSidebar component itself to its parent. This allows us to pass JSX markup to the InterfaceSkeleton when the inserter is open, and a falsey value when the inserter is closed.
    @jeyip
    jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    936860a View commit details
    Browse the repository at this point in the history

  12. Remove unnecessary LeftSidebar component

    @jeyip
    jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    dcef19e View commit details
    Browse the repository at this point in the history

  13. Refactor LeftSidebar panel styling

    @jeyip
    jeyip committed Nov 5, 2020
    Configuration menu
    Copy the full SHA
    af4c437 View commit details
    Browse the repository at this point in the history