Polish Editor and Toolbar position in the different breakpoints

WordPress · Oct 27, 2017 · 591e55e · 591e55e
1 parent aa9c1ac
commit 591e55e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 31 deletions.
diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss
@@ -4,24 +4,24 @@ body.gutenberg-editor-page {
 	#update-nag, .update-nag {
 		display: none;
 	}
-	
+
 	#wpcontent {
 		padding-left: 0;
 	}
-	
+
 	#wpbody-content {
 		padding-bottom: 0;
 	}
-	
+
 	#wpfooter {
 		display: none;
 	}
-	
+
 	.a11y-speak-region {
 		left: -1px;
 		top: -1px;
 	}
-	
+
 	svg {
 		fill: currentColor;
 	}
@@ -54,23 +54,26 @@ body.gutenberg-editor-page {
 
 .gutenberg__editor {
 	position: relative;
-	height: calc( 100vh - #{ $admin-bar-height-big } );
+	height: calc( 100vh - #{ $admin-bar-height-big} );
+	padding-top: $header-height + $stacked-toolbar-height;
 
+	// The WP header height changes at this breakpoint
 	@include break-medium {
 		height: calc( 100vh - #{ $admin-bar-height } );
 	}
 
+	// The block toolbar disappears at this breakpoint
+	@include break-large {
+		padding-top: $header-height;
+	}
+
 	img {
 		max-width: 100%;
 	}
 
 	iframe {
 		width: 100%;
 	}
-
-	@include break-small() {
-		padding-top: $header-height;
-	}
 }
 
 .editor-post-title,

diff --git a/editor/header/style.scss b/editor/header/style.scss
@@ -11,13 +11,8 @@
 	left: 0;
 	right: 0;
 
-	top: 0;
-	position: sticky;
-
-	@include break-small() {
-		top: $admin-bar-height-big;
-		position: fixed;
-	}
+	top: $admin-bar-height-big;
+	position: fixed;
 
 	@include break-medium() {
 		top: $admin-bar-height;
@@ -139,6 +134,17 @@
 	border-bottom: 1px solid $light-gray-500;
 	min-height: $stacked-toolbar-height;
 
+	.is-sidebar-opened & {
+		display: none;
+	}
+
+	@include break-medium {
+		.is-sidebar-opened & {
+			display: block;
+			right: $sidebar-width;
+		}
+	}
+
 	// merge toolbars after this breakpoint
 	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
 		padding-left: $item-spacing;
@@ -148,5 +154,9 @@
 		background: none;
 		border-bottom: none;
 		min-height: auto;
+
+		.is-sidebar-opened & {
+			right: auto;
+		}
 	}
 }
diff --git a/editor/layout/style.scss b/editor/layout/style.scss
@@ -10,11 +10,6 @@
 .editor-layout__content {
 	display: flex;
 	flex-direction: column;
-	margin-top: #{ -1 * $header-height };
-
-	@include break-medium {
-		margin-top: 0;
-	}
 }
 
 .editor-layout__editor {

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -2,22 +2,14 @@
 	position: relative;
 	height: 100%;
 	margin: 0 auto;
-	padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
+	padding: 50px 0 0;
 
 	&,
 	& p {
 		font-family: $editor-font;
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
 	}
-
-	@include break-small() {
-		padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
-	}
-
-	@include break-large() {
-		padding: 60px 0;
-	}
 }
 
 .editor-visual-editor {