From 44c9c207e28a6dc74c6272400c6a6c5a21eaf074 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 11:34:06 +0200 Subject: [PATCH 1/6] Update placeholder text contrast Fixes #1302 --- editor/assets/stylesheets/main.scss | 8 ++++---- editor/modes/visual-editor/block-list.js | 2 +- editor/modes/visual-editor/style.scss | 2 +- editor/post-title/index.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 7b250eba9d375c..c925426273b1b1 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -71,16 +71,16 @@ body.gutenberg_page_gutenberg-demo { padding: 6px 10px; &::-webkit-input-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &::-moz-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &:-ms-input-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &:-moz-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } } } diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js index 27864e959e0c0b..f5a0b1eb558657 100644 --- a/editor/modes/visual-editor/block-list.js +++ b/editor/modes/visual-editor/block-list.js @@ -229,7 +229,7 @@ class VisualEditorBlockList extends Component { type="text" readOnly className="editor-visual-editor__placeholder" - value={ ! blocks.length ? __( 'Write your story.' ) : __( 'Continue writing…' ) } + value={ ! blocks.length ? __( 'Write your story' ) : __( 'Continue writing…' ) } onFocus={ ! blocks.length ? this.appendDefaultBlock : noop } onClick={ !! blocks.length ? this.appendDefaultBlock : noop } onKeyDown={ !! blocks.length ? this.onPlaceholderKeyDown : noop } diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index f8411f8cce6b3f..c197444cb6e68e 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -283,7 +283,7 @@ $sticky-bottom-offset: 20px; transition: 0.2s outline; text-align: left; width: 100%; - color: $light-gray-700; + color: $dark-gray-300; font-size: $editor-font-size; line-height: $editor-line-height; cursor: text; diff --git a/editor/post-title/index.js b/editor/post-title/index.js index ecb6f5680b524e..fa22b7434e9b5e 100644 --- a/editor/post-title/index.js +++ b/editor/post-title/index.js @@ -99,7 +99,7 @@ class PostTitle extends Component { className="editor-post-title__input" value={ title } onChange={ this.onChange } - placeholder={ __( 'Add title…' ) } + placeholder={ __( 'Add title' ) } onFocus={ this.onSelect } onClick={ this.onSelect } onKeyDown={ this.onKeyDown } From bfabbc9411e481196987f9a977c46419d69e1941 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 11:40:28 +0200 Subject: [PATCH 2/6] Polish in-text inserter This normalizes the color with placeholder text, and polishes the alignment a little. --- editor/modes/visual-editor/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index c197444cb6e68e..0171688d918540 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -251,6 +251,15 @@ $sticky-bottom-offset: 20px; .editor-visual-editor .editor-inserter { margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick + + .editor-inserter__toggle { + color: $dark-gray-300; + margin: 4px 0 0 4px; // align better with text blocks + } + + .editor-inserter__toggle.components-icon-button:not(:disabled):hover { + color: $blue-medium-500; + } } .editor-visual-editor .editor-visual-editor__insertion-point { From e4ba891dabc09015d5cfc33e841922bc22077c27 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 12:01:56 +0200 Subject: [PATCH 3/6] Fix inserter in text regression on mobile. --- editor/modes/visual-editor/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 0171688d918540..c0415770c28af9 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -250,7 +250,9 @@ $sticky-bottom-offset: 20px; } .editor-visual-editor .editor-inserter { - margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick + @include break-small { + margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick + } .editor-inserter__toggle { color: $dark-gray-300; From a97d41963ab1432f0997756f5bf9fa5905598001 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 12:56:42 +0200 Subject: [PATCH 4/6] Improve mobile a bit. Hide movers and config toolbars on the side. These will be resurfaced as part of a separate effort in #705. --- editor/block-mover/style.scss | 7 ++++++ editor/block-settings-menu/style.scss | 7 ++++++ editor/modes/visual-editor/style.scss | 34 ++++++++++++++++++++------- 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index f24ebe8f9a1a28..f36e9e9c51bb86 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -3,6 +3,13 @@ top: 10px; left: 0; padding: 0 14px 20px 0; // handles hover area + + // Mobile, to be revisited + display: none; + + @include break-small { + display: block; + } } .editor-block-mover__control { diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index 8fe513cb4e4099..cee3d28ad06ddd 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -2,6 +2,13 @@ position: absolute; top: 10px; right: 0; + + // Mobile, to be revisited + display: none; + + @include break-small { + display: block; + } } .editor-block-settings-menu__control { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index c0415770c28af9..ecbb38b1e80cf8 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -29,19 +29,30 @@ margin-bottom: 5px; max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ); position: relative; - // The block mover needs to stay inside the block to allow clicks when hovering the block - padding: $block-padding $block-padding + $block-mover-padding-visible; + + padding: $block-padding; + + @include break-small { + // The block mover needs to stay inside the block to allow clicks when hovering the block + padding: $block-padding $block-padding + $block-mover-padding-visible; + } &:before { z-index: z-index( '.editor-visual-editor__block:before' ); content: ''; position: absolute; - top: 0; - bottom: 0; - left: $block-mover-padding-visible; - right: $block-mover-padding-visible; outline: 1px solid transparent; transition: 0.2s outline; + top: 0; + bottom: 0; + + left: 0; + right: 0; + + @include break-small { + left: $block-mover-padding-visible; + right: $block-mover-padding-visible; + } } &.is-hovered:before { @@ -211,14 +222,16 @@ z-index: z-index( '.editor-visual-editor__block-controls' ); margin-top: -$block-controls-height - $item-spacing; margin-bottom: $item-spacing + 20px; // 20px is the offset from the bottom of the selected block where it stops sticking - height: $block-controls-height; width: 0; white-space: nowrap; - top: $header-height + $item-spacing; + // Mobile viewport + margin-left: -$block-padding; + margin-right: -$block-padding; + // Larger viewports @include break-small() { - top: $header-height + $admin-bar-height-big + $item-spacing; + margin-left: 0; } @include break-medium() { @@ -240,6 +253,7 @@ $sticky-bottom-offset: 20px; .editor-visual-editor__block-controls .components-toolbar { margin-right: -1px; + // Larger viewports @include break-small() { margin-right: $item-spacing; } @@ -250,6 +264,8 @@ $sticky-bottom-offset: 20px; } .editor-visual-editor .editor-inserter { + margin: $item-spacing; + @include break-small { margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick } From 718f55e33556d78686d65ffbeee668603479ce2d Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 13:14:20 +0200 Subject: [PATCH 5/6] Improve responsiveness of title. Needs more work. --- editor/post-title/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss index cd2bd8aaade867..714d9d1c6ae984 100644 --- a/editor/post-title/style.scss +++ b/editor/post-title/style.scss @@ -2,9 +2,13 @@ .editor-post-title { margin-left: auto; margin-right: auto; - max-width: $visual-editor-max-width; position: relative; margin-bottom: 10px; + max-width: $visual-editor-max-width - ( 2 * $block-mover-margin ); + + @include break-small { + max-width: $visual-editor-max-width; + } h1 { outline: 1px solid transparent; From 13e21782ee5b4bf2c4a814f9ebd2d678e0270454 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 26 Jun 2017 13:28:18 +0200 Subject: [PATCH 6/6] Fix sticky regression. --- editor/modes/visual-editor/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index ecbb38b1e80cf8..9fd89aaa94274f 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -226,6 +226,7 @@ white-space: nowrap; // Mobile viewport + top: $header-height - 1px; margin-left: -$block-padding; margin-right: -$block-padding;