Merge pull request #1089 from WordPress/update/mobile-inserter

Improve mobile inserter and post settings
WordPress · Jun 9, 2017 · 7940244 · 7940244
2 parents 845dd39 + 4ee47a2
commit 7940244
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 7 deletions.
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -7,6 +7,7 @@ $z-layers: (
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,
 	'.editor-visual-editor__block-controls': 1,
 	'.components-form-toggle__input': 1,
+	'.editor-sidebar': 19,
 	'.editor-header': 20,
 	'.editor-post-visibility__dialog': 30,
 	'.editor-post-schedule__dialog': 30,

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -33,6 +33,12 @@
 		z-index: z-index( '.editor-mode-switcher .dashicon' );
 		margin-left: -24px;
 		margin-top: -1px;
+
+		display: none;
+
+		@include break-small {
+			display: block;
+		}
 	}
 
 	&:hover,

diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
@@ -1,13 +1,16 @@
 .editor-inserter {
 	display: inline-block;
-	position: relative;
 	background: none;
 	border: none;
 	padding: 0;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 	z-index: z-index( '.editor-inserter' );
+
+	@include break-medium {
+		position: relative;
+	}
 }
 
 .editor-inserter__toggle {
@@ -31,13 +34,22 @@
 }
 
 .editor-inserter__menu {
-	width: 280px;
 	box-shadow: $shadow-popover;
 	border: 1px solid $light-gray-500;
 	position: absolute;
-	left: -122px;
 	background: $white;
 
+	left: 0;
+	right: 0;
+
+	// inserter becomes popup
+	@include break-medium {
+		width: 280px;
+		left: -122px;
+		right: auto;
+		height: auto;
+	}
+
 	&.is-top {
 		bottom: 42px;
 
@@ -66,7 +78,11 @@
 	}
 
 	&.is-bottom {
-		top: 42px;
+		top: $admin-bar-height-big + $item-spacing -1px;
+
+		@include break-medium {
+			top: $admin-bar-height + $item-spacing;
+		}
 
 		.editor-inserter__arrow {
 			top: -10px;
@@ -110,10 +126,22 @@
 	position: absolute;
 	width: 0;
 	z-index: z-index( '.editor-inserter__arrow' );
+
+	display: none;
+
+	@include break-medium {
+		display: block;
+	}
 }
 
 .editor-inserter__content {
-	max-height: 50vh;
+	height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } );
+
+	@include break-medium {
+		height: auto;
+		max-height: 50vh;
+	}
+
 	overflow: auto;
 	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );
 

diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
@@ -1,12 +1,17 @@
 .editor-sidebar {
-	position: fixed;
+	position: sticky;
+	z-index: z-index( '.editor-sidebar' );
 	right: 0;
 	top: $admin-bar-height-big + $header-height;
 	bottom: 0;
 	width: $sidebar-width;
 	border-left: 1px solid $light-gray-500;
 	background: $light-gray-300;
 
+	@include break-small() {
+		position: fixed;
+	}
+
 	@include break-medium() {
 		top: $admin-bar-height + $header-height;
 	}
@@ -27,7 +32,27 @@
 
 /* Visual and Text editor both */
 .editor-layout.is-sidebar-opened .editor-layout__content {
-	margin-right: $sidebar-width;
+	margin-left: -200%;
+	float: left;
+	height: 0;
+
+	@include break-small() {
+		margin-left: auto;
+		float: none;
+		height: auto;
+	}
+
+	@include break-medium() {
+		margin-right: $sidebar-width;
+	}
+}
+
+.editor-layout.is-sidebar-opened {
+	overflow: hidden;
+
+	@include break-small() {
+		overflow: auto;
+	}
 }
 
 .editor-layout.is-sidebar-opened .editor-sidebar {