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

Fix issues with floats and the side UI on wide and fullwide #7223

Merged
merged 3 commits into from
Jun 21, 2018
Merged

Fix issues with floats and the side UI on wide and fullwide #7223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f221f5
Fix regressions with horizontal scrollbar for wide and fullwide
Jun 8, 2018
acca9d4
Address feedback.
jasmussen Jun 21, 2018
2f7c85e
Fix issue with mobile toolbar being cut on fullwide
jasmussen Jun 21, 2018
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
2 changes: 2 additions & 0 deletions edit-post/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
16 changes: 8 additions & 8 deletions edit-post/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -69,22 +69,22 @@
// 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 {
margin-left: auto;
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;
Expand Down
68 changes: 50 additions & 18 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -432,6 +445,7 @@
> .editor-block-mover {
display: none;
}

@include break-wide() {
> .editor-block-mover {
display: block;
Expand All @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is slightly different comparing to the stuff above, is it intended to have $block-side-ui-clearance included only once?

margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
}

> .editor-block-list__block-edit {
Expand All @@ -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%;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -640,6 +662,12 @@
float: left;
}
}

// sth
&[data-align="full"] .editor-block-list__block-mobile-toolbar {
margin-left: 0;
margin-right: 0;
}
}


Expand Down Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion editor/components/default-block-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be the base for the variable I proposed above?

right: auto;
}

Expand All @@ -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 ) {
Expand Down
18 changes: 16 additions & 2 deletions editor/components/post-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down