Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move post permalink to beneath title on mobile. #16277

Merged
merged 5 commits into from
Jul 7, 2019
Merged

Move post permalink to beneath title on mobile. #16277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad4b8dc
Move post permalink to beneath title on mobile.
tellthemachines Jun 25, 2019
48b2c51
Stop button text overflowing on IE.
tellthemachines Jun 25, 2019
6ac67da
Adjust margins and borders.
tellthemachines Jun 26, 2019
d8b32f0
Increase spacing between permalink elements.
tellthemachines Jun 27, 2019
804165c
Adjust margin and padding.
tellthemachines Jul 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions packages/editor/src/components/post-permalink/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
Expand All @@ -56,7 +67,7 @@
color: $dark-gray-200;
text-decoration: underline;
margin-right: 10px;
width: 100%;
flex-grow: 1;
overflow: hidden;
position: relative;
white-space: nowrap;
Expand Down
18 changes: 13 additions & 5 deletions packages/editor/src/components/post-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,19 @@
.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;

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;
Expand Down