From 2fcfeb38bb55146556737d3d2b0b81cbb0a032e5 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 21 Jun 2018 11:42:55 +0200 Subject: [PATCH] Fix issues with floats and the side UI on wide and fullwide (#7223) * Fix regressions with horizontal scrollbar for wide and fullwide This also positions the toolbar a little bit more accurately when wide and fullwide. * Address feedback. * Fix issue with mobile toolbar being cut on fullwide --- edit-post/assets/stylesheets/_variables.scss | 2 + edit-post/components/visual-editor/style.scss | 16 ++--- editor/components/block-list/style.scss | 68 ++++++++++++++----- .../default-block-appender/style.scss | 6 +- editor/components/post-title/style.scss | 18 ++++- 5 files changed, 81 insertions(+), 29 deletions(-) diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index a8e69e19f88c02..c8a14b37c19d0a 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -52,6 +52,8 @@ $block-side-ui-clearance: 2px; // space between side UI and block $block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI $block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks +$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; + // Buttons & UI Widgets $button-style__radius-roundrect: 4px; $button-style__radius-round: 50%; diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 75e9a154646a86..709b39468a3235 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -50,8 +50,8 @@ } &[data-align="full"] > .editor-block-contextual-toolbar, - &[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars - max-width: $content-width + 2; // 1px border left and right + &[data-align="wide"] > .editor-block-contextual-toolbar { // Don't affect nested block toolbars. + max-width: $content-width + $parent-block-padding; // Add 1px border left and right. margin-left: auto; margin-right: auto; } @@ -69,8 +69,8 @@ // The base width of the title should match that of blocks even if it isn't a block .editor-post-title { @include break-small() { - padding-left: $block-side-ui-padding; - padding-right: $block-side-ui-padding; + padding-left: $block-container-side-padding; + padding-right: $block-container-side-padding; } } .edit-post-visual-editor .editor-post-title__block { @@ -78,13 +78,13 @@ margin-right: auto; max-width: $content-width; - // stack borders + // Stack borders. > div { - margin-left: -1px; - margin-right: -1px; + margin-left: 0; + margin-right: 0; } - // include space for side UI on desktops + // Include space for side UI on desktops. @include break-small() { > div { margin-left: -$block-side-ui-width; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 3584c26626524f..5ed138efdead7b 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -104,11 +104,11 @@ } .editor-block-list__layout { - // make room in the main content column for the side UI - // the side UI uses negative margins to position itself so as to not affect the block width + // Make room in the main content column for the side UI. + // The side UI uses negative margins to position itself so as to not affect the block width. @include break-small() { - padding-left: $block-side-ui-padding; - padding-right: $block-side-ui-padding; + padding-left: $block-container-side-padding; + padding-right: $block-container-side-padding; } // Don't add side padding for nested blocks, and compensate for block padding @@ -221,14 +221,19 @@ transition: outline .1s linear; pointer-events: none; - // show wider padding for top level blocks - right: -$parent-block-padding; - left: -$parent-block-padding; top: -$block-padding; bottom: -$block-padding; + right: -$block-padding; + left: -$block-padding; + + // Show wider padding for top level blocks. + @include break-small() { + right: -$parent-block-padding; + left: -$parent-block-padding; + } } - // show smaller padding for child blocks + // Show smaller padding for child blocks. .editor-block-list__block-edit:before { right: -$block-padding; left: -$block-padding; @@ -346,16 +351,24 @@ // Alignments &[data-align="left"], &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content + // Without z-index, won't be clickable as "above" adjacent content. z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' ); width: 100%; - // When images are floated, the block itself should collapse to zero height + // When images are floated, the block itself should collapse to zero height. margin-bottom: 0; + height: 0; - // Hide block outline when an image is floated - &:before { - content: none; + // Hide block outline when an image is floated. + .editor-block-list__block-edit { + &:before { + content: none; + } + } + + // The padding collapses, but the outline is still 1px to compensate for. + .editor-block-contextual-toolbar { + margin-bottom: 1px; } } @@ -432,6 +445,7 @@ > .editor-block-mover { display: none; } + @include break-wide() { > .editor-block-mover { display: block; @@ -455,10 +469,10 @@ right: -$border-width; } - // compensate for main container padding, subtract border + // Compensate for main container padding and subtract border. @include break-small() { - margin-left: -$block-side-ui-padding + $border-width; - margin-right: -$block-side-ui-padding + $border-width; + margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; + margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; } > .editor-block-list__block-edit { @@ -470,7 +484,7 @@ margin-right: -$block-side-ui-padding - $block-padding; } - // this explicitly sets the width of the block, to override the fit-content from the image block + // This explicitly sets the width of the block, to override the fit-content from the image block. figure { width: 100%; } @@ -579,6 +593,14 @@ display: block; } } +} + + +/** + * Mobile unified toolbar. + */ + +.editor-block-list__block { // Show side UI inline below the block on mobile. .editor-block-list__block-mobile-toolbar { @@ -640,6 +662,12 @@ float: left; } } + + // sth + &[data-align="full"] .editor-block-list__block-mobile-toolbar { + margin-left: 0; + margin-right: 0; + } } @@ -856,7 +884,11 @@ z-index: z-index( '.editor-block-list__breadcrumb' ); // Position in the top right of the border - right: -$block-parent-side-ui-clearance; + right: -$block-side-ui-clearance; + + @include break-small() { + right: -$block-parent-side-ui-clearance; + } top: 0; // Nested diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss index 68c229dfaa9ccb..3a5c27b33580e2 100644 --- a/editor/components/default-block-appender/style.scss +++ b/editor/components/default-block-appender/style.scss @@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; right: $item-spacing; // show on the right on mobile @include break-small { - left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance; + left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; right: auto; } @@ -85,6 +85,10 @@ $empty-paragraph-height: $text-editor-font-size * 4; .editor-inserter__toggle { transition: opacity 0.2s; border-radius: 50%; + width: $block-side-ui-width; + height: $block-side-ui-width; + top: 4px; + padding: 4px; // use opacity to work in various editor styles &:not( :hover ) { diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss index 76a5fc757ad9bf..de84d289ee0bf8 100644 --- a/editor/components/post-title/style.scss +++ b/editor/components/post-title/style.scss @@ -9,15 +9,29 @@ .editor-post-title__input { display: block; width: 100%; - padding: #{ $block-padding + 5px } $parent-block-padding; margin: 0; box-shadow: none; - border: 1px solid transparent; background: transparent; font-family: $editor-font; line-height: $default-line-height; transition: border .1s ease-out; + // Show wider parent padding on Desktop breakpoints. + padding: #{ $block-padding + 5px } $block-padding; + + @include break-small() { + padding: #{ $block-padding + 5px } $parent-block-padding; + } + + // Stack borders on mobile. + border: 1px solid transparent; + border-left-width: 0; + border-right-width: 0; + + @include break-small() { + border-width: 1px; + } + // Match h1 heading font-size: 2.441em; font-weight: 600;