From ad4b8dc5a4d3ba55b94237ea013b87992c20af57 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 25 Jun 2019 17:01:28 +1000 Subject: [PATCH 1/5] Move post permalink to beneath title on mobile. --- packages/editor/src/components/post-title/style.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 8f758e9947ae7..7a2a28cedd94b 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -106,13 +106,14 @@ .editor-post-title .editor-post-permalink { font-size: $default-font-size; color: $dark-gray-900; - position: absolute; - top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size - left: 0; - right: 0; + flex-wrap: wrap; + height: auto; - @include break-small() { + @include break-mobile() { + position: absolute; + top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size left: $block-side-ui-clearance; right: $block-side-ui-clearance; + flex-wrap: nowrap; } } From 48b2c51d72208b20dac76296e266d5492a5b6322 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 25 Jun 2019 17:24:30 +1000 Subject: [PATCH 2/5] Stop button text overflowing on IE. --- packages/editor/src/components/post-permalink/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 5b13e75843994..749b2115ba3c4 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -56,7 +56,7 @@ color: $dark-gray-200; text-decoration: underline; margin-right: 10px; - width: 100%; + flex-grow: 1; overflow: hidden; position: relative; white-space: nowrap; From 6ac67da94f285fd6967d294e8f31cbf4c228e35d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 26 Jun 2019 17:15:27 +1000 Subject: [PATCH 3/5] Adjust margins and borders. --- packages/editor/src/components/post-title/style.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 7a2a28cedd94b..12949817265a7 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -108,12 +108,20 @@ color: $dark-gray-900; flex-wrap: wrap; height: auto; + position: relative; + left: $block-left-border-width; + top: -2px; + width: calc(100% - #{$block-left-border-width}); @include break-mobile() { position: absolute; top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size + right: 0; + flex-wrap: nowrap; + width: auto; + } + @include break-small() { left: $block-side-ui-clearance; right: $block-side-ui-clearance; - flex-wrap: nowrap; } } From d8b32f001d699dd41e84cb5dfa3759b53b5b4e9b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Jun 2019 10:51:24 +1000 Subject: [PATCH 4/5] Increase spacing between permalink elements. --- packages/editor/src/components/post-title/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 12949817265a7..d8d54b8d6a099 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -113,12 +113,22 @@ top: -2px; width: calc(100% - #{$block-left-border-width}); + > * { + margin-top: $grid-size-small; + margin-bottom: $grid-size-small; + } + @include break-mobile() { position: absolute; top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size right: 0; flex-wrap: nowrap; width: auto; + + > * { + margin-top: 0; + margin-bottom: 0; + } } @include break-small() { left: $block-side-ui-clearance; From 804165c1cb187c3a5324b79a998ec1854705d14a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 1 Jul 2019 10:36:24 +1000 Subject: [PATCH 5/5] Adjust margin and padding. --- .../editor/src/components/post-permalink/style.scss | 13 ++++++++++++- .../editor/src/components/post-title/style.scss | 11 ----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 749b2115ba3c4..0162eb164cccc 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -1,8 +1,9 @@ .editor-post-permalink { display: inline-flex; align-items: center; + flex-wrap: wrap; background: $white; - padding: 5px; + padding: $grid-size $grid-size 0; font-family: $default-font; font-size: $default-font-size; height: 40px; @@ -25,11 +26,21 @@ // Put toolbar snugly to edge on mobile. margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen. margin-right: -$block-padding - $border-width; + @include break-mobile() { + padding: $grid-size-small; + } @include break-small() { margin-left: -$border-width; margin-right: -$border-width; } + // Increase specificity to override margins set on label element. + &.editor-post-permalink > * { + margin-bottom: $grid-size; + @include break-mobile() { + margin-bottom: 0; + } + } button { // Prevent button shrinking in IE11 when other items have a 100% flex basis. // This should be safe to apply in all browsers because we don't want these diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index d8d54b8d6a099..3bf8c5ad9f321 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -106,29 +106,18 @@ .editor-post-title .editor-post-permalink { font-size: $default-font-size; color: $dark-gray-900; - flex-wrap: wrap; height: auto; position: relative; left: $block-left-border-width; top: -2px; width: calc(100% - #{$block-left-border-width}); - > * { - margin-top: $grid-size-small; - margin-bottom: $grid-size-small; - } - @include break-mobile() { position: absolute; top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size right: 0; flex-wrap: nowrap; width: auto; - - > * { - margin-top: 0; - margin-bottom: 0; - } } @include break-small() { left: $block-side-ui-clearance;