From 54672c94065f05e1d36610bee4b7f77b47fba8ae Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 23 Jan 2019 04:49:32 -0500 Subject: [PATCH] Consider making Fullscreen Mode effects visible only on larger screens (#13425) * Hide the fullscreen "exit" icon on small screens When fullscreen mode is active, we place an exit/back button in the upper left corner of the screen to give users a way to exit the editor. This button persists on small screens, even though Fullscreen Mode cannot be toggled at that screen size. This commit hides the exit/back icon at small screen sizes. * Migrate more fullscreen rules to medium+ breakpoints only. * Update style.scss --- .../src/components/fullscreen-mode/style.scss | 45 ++++++++++--------- .../header/fullscreen-mode-close/style.scss | 17 ++++--- .../src/components/header/style.scss | 4 -- .../src/components/layout/style.scss | 4 -- .../src/components/sidebar/style.scss | 18 +++----- .../src/components/text-editor/style.scss | 4 -- packages/edit-post/src/style.scss | 4 -- 7 files changed, 43 insertions(+), 53 deletions(-) diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss index 8e5b6e2218561..0d044161b9e53 100644 --- a/packages/edit-post/src/components/fullscreen-mode/style.scss +++ b/packages/edit-post/src/components/fullscreen-mode/style.scss @@ -1,29 +1,32 @@ body.js.is-fullscreen-mode { - // Reset the html.wp-topbar padding - // Because this uses negative margins, we have to compensate for the height. - margin-top: -$admin-bar-height-big; - height: calc(100% + #{ $admin-bar-height-big }); - @include break-medium() { - margin-top: -$admin-bar-height; - height: calc(100% + #{ $admin-bar-height }); - } - #adminmenumain, - #wpadminbar { - display: none; - } + @include break-medium { + // Reset the html.wp-topbar padding. + // Because this uses negative margins, we have to compensate for the height. + margin-top: -$admin-bar-height-big; + height: calc(100% + #{ $admin-bar-height-big }); + @include break-medium() { + margin-top: -$admin-bar-height; + height: calc(100% + #{ $admin-bar-height }); + } - #wpcontent, - #wpfooter { - margin-left: 0; - } + #adminmenumain, + #wpadminbar { + display: none; + } + + #wpcontent, + #wpfooter { + margin-left: 0; + } - // Animations - @include edit-post__fade-in-animation(0.3s); + // Animations. + @include edit-post__fade-in-animation(0.3s); - .edit-post-header { - transform: translateY(-100%); - animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards; + .edit-post-header { + transform: translateY(-100%); + animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards; + } } } diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index e6a3c7285b886..26d43a35d7458 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -1,7 +1,14 @@ .edit-post-fullscreen-mode-close__toolbar { - border-top: 0; - border-bottom: 0; - border-left: 0; - margin: -9px 10px -9px -10px; - padding: 9px 10px; + // Do not show the toolbar icon on small screens, + // when Fullscreen Mode is not an option in the "More" menu. + display: none; + + @include break-medium() { + display: block; + border-top: 0; + border-bottom: 0; + border-left: 0; + margin: -9px 10px -9px -10px; + padding: 9px 10px; + } } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 987dcbfd5e14c..6676d35676b7d 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -20,10 +20,6 @@ position: fixed; padding: $grid-size; top: $admin-bar-height-big; - - body.is-fullscreen-mode & { - top: 0; - } } @include break-medium() { diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 3aa896af7b377..963862b7105d7 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -167,10 +167,6 @@ left: 0; overflow: auto; - body.is-fullscreen-mode & { - top: 0; - } - @include break-medium() { top: $admin-bar-height; left: auto; diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index c33aee329d706..cd8256823d4e7 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -17,10 +17,6 @@ height: auto; overflow: auto; -webkit-overflow-scrolling: touch; - - body.is-fullscreen-mode & { - top: $header-height; - } } @include break-medium() { @@ -41,18 +37,18 @@ margin-top: -1px; margin-bottom: -1px; - body.is-fullscreen-mode & { - max-height: calc(100vh - #{ $panel-header-height }); - @include break-small() { - max-height: none; - } - } - @include break-small() { overflow: inherit; height: auto; max-height: none; } + + @include break-medium() { + + body.is-fullscreen-mode & { + max-height: calc(100vh - #{ $panel-header-height }); + } + } } > .components-panel .components-panel__header { diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index b04479300535f..1a5980bc5e022 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -3,10 +3,6 @@ @include break-small() { padding-top: ($grid-size * 5) + $admin-bar-height-big; - - body.is-fullscreen-mode & { - padding-top: $grid-size * 5; - } } @include break-medium() { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 44ad95c335165..90fac100e15ee 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -120,10 +120,6 @@ body.block-editor-page { bottom: 0; left: 0; min-height: calc(100vh - #{ $admin-bar-height-big }); - - body.is-fullscreen-mode & { - min-height: 100vh; - } } // The WP header height changes at this breakpoint