From e4efe7b8785a4f8fca9c306e60ac802c0fb8b93d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 09:40:21 +0100 Subject: [PATCH] multiple fixes --- packages/base-styles/_z-index.scss | 2 +- .../src/components/editor-regions/style.scss | 36 +++++++++++-------- .../header/header-toolbar/style.scss | 2 +- .../src/components/header/style.scss | 2 +- .../src/components/layout/style.scss | 1 - .../src/components/sidebar/style.scss | 7 ++-- .../src/components/text-editor/style.scss | 1 + 7 files changed, 30 insertions(+), 21 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 2381a35512b2e7..9ef4302f32d66c 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -66,7 +66,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } - ".edit-post-sidebar": 100000, + ".edit-post-editor-regions__sidebar": 100000, ".edit-widgets-sidebar": 100000, ".edit-post-layout .edit-post-post-publish-panel": 100001, // For larger views, the wp-admin navbar dropdown should be at top of diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index a688d959261427..ef0d452451fb11 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -8,12 +8,12 @@ // On Mobile keep a margin for the header and admin header // as both of these are fixed top: 0; - @include break-small() { + @include break-medium() { margin-top: 0; // On Desktop position the container as fixed to avoid scroll bleed. position: fixed; - top: $admin-bar-height-big; + top: $admin-bar-height; left: 0; right: 0; bottom: 0; @@ -22,13 +22,6 @@ top: 0; } } - - @include break-medium() { - top: $admin-bar-height; - .is-fullscreen-mode & { - top: 0; - } - } } @include editor-left(".edit-post-editor-regions"); @@ -37,7 +30,7 @@ display: flex; // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; } } @@ -46,7 +39,7 @@ flex-grow: 1; // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; } } @@ -54,21 +47,35 @@ .edit-post-editor-regions__sidebar { width: auto; // Keep the sidebar width flexible. flex-shrink: 0; + position: fixed !important; // Need to override the default relative positionning + z-index: z-index(".edit-post-editor-regions__sidebar"); + top: 0; + right: 0; + bottom: 0; + left: 0; + + &:empty { + display: none; + } // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; + border-left: $border-width solid $light-gray-500; + position: relative !important; + z-index: initial; } } .edit-post-editor-regions__header { flex-shrink: 0; height: auto; // Keep the height flexible. + border-bottom: $border-width solid $light-gray-500; // On Mobile the header is sticky. position: sticky; top: 0; - @include break-small() { + @include break-medium() { // Cancel the fixed positionning used in mobile. position: initial; overflow: auto; @@ -79,10 +86,11 @@ height: auto; // Keep the height flexible. flex-shrink: 0; overflow: auto; + border-top: $border-width solid $light-gray-500; // On Mobile the footer is hidden display: none; - @include break-small() { + @include break-medium() { display: block; } } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index ceed4a0364ffdb..12a9337b67aede 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -26,7 +26,7 @@ .edit-post-header-toolbar__block-toolbar { // Stack toolbar below Editor Bar. position: absolute; - top: $header-height; + top: $header-height + 1px; left: 0; right: 0; background: $white; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 1905a25deb19ab..466a6cc6280127 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,6 +1,6 @@ .edit-post-header { + height: $header-height; padding: $grid-size-small 2px; - border-bottom: $border-width solid $light-gray-500; background: $white; display: flex; flex-wrap: wrap; diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 1804b97ac920fb..5dcedb8a0d894e 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -111,7 +111,6 @@ height: $footer-height; padding: 0 $grid-size; align-items: center; - border-top: $border-width solid $light-gray-500; font-size: $default-font-size; } } diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 9dfe6c9dabd97d..8c979cb44a07c5 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -1,7 +1,4 @@ .edit-post-sidebar { - z-index: z-index(".edit-post-sidebar"); - width: $sidebar-width; - border-left: $border-width solid $light-gray-500; background: $white; color: $dark-gray-500; @@ -12,6 +9,10 @@ -webkit-overflow-scrolling: touch; } + @include break-medium() { + width: $sidebar-width; + } + > .components-panel { border-left: none; border-right: none; diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index f7696bb4ee1959..f6135be67b9c3f 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -1,4 +1,5 @@ .edit-post-text-editor { + position: relative; width: 100%; // Always show outlines in code editor