Consider making Fullscreen Mode effects visible only on larger screens (

#13425) * Hide the fullscreen "exit" icon on small screens When fullscreen mode is active, we place an exit/back button in the upper left corner of the screen to give users a way to exit the editor. This button persists on small screens, even though Fullscreen Mode cannot be toggled at that screen size. This commit hides the exit/back icon at small screen sizes. * Migrate more fullscreen rules to medium+ breakpoints only. * Update style.scss
WordPress · Mar 6, 2019 · 54672c9 · 54672c9
1 parent 393deea
commit 54672c9
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 53 deletions.
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -1,29 +1,32 @@
 body.js.is-fullscreen-mode {
-	// Reset the html.wp-topbar padding
-	// Because this uses negative margins, we have to compensate for the height.
-	margin-top: -$admin-bar-height-big;
-	height: calc(100% + #{ $admin-bar-height-big });
-	@include break-medium() {
-		margin-top: -$admin-bar-height;
-		height: calc(100% + #{ $admin-bar-height });
-	}
 
-	#adminmenumain,
-	#wpadminbar {
-		display: none;
-	}
+	@include break-medium {
+		// Reset the html.wp-topbar padding.
+		// Because this uses negative margins, we have to compensate for the height.
+		margin-top: -$admin-bar-height-big;
+		height: calc(100% + #{ $admin-bar-height-big });
+		@include break-medium() {
+			margin-top: -$admin-bar-height;
+			height: calc(100% + #{ $admin-bar-height });
+		}
 
-	#wpcontent,
-	#wpfooter {
-		margin-left: 0;
-	}
+		#adminmenumain,
+		#wpadminbar {
+			display: none;
+		}
+
+		#wpcontent,
+		#wpfooter {
+			margin-left: 0;
+		}
 
-	// Animations
-	@include edit-post__fade-in-animation(0.3s);
+		// Animations.
+		@include edit-post__fade-in-animation(0.3s);
 
-	.edit-post-header {
-		transform: translateY(-100%);
-		animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
+		.edit-post-header {
+			transform: translateY(-100%);
+			animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
+		}
 	}
 }
 

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -1,7 +1,14 @@
 .edit-post-fullscreen-mode-close__toolbar {
-	border-top: 0;
-	border-bottom: 0;
-	border-left: 0;
-	margin: -9px 10px -9px -10px;
-	padding: 9px 10px;
+	// Do not show the toolbar icon on small screens,
+	// when Fullscreen Mode is not an option in the "More" menu.
+	display: none;
+
+	@include break-medium() {
+		display: block;
+		border-top: 0;
+		border-bottom: 0;
+		border-left: 0;
+		margin: -9px 10px -9px -10px;
+		padding: 9px 10px;
+	}
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -20,10 +20,6 @@
 		position: fixed;
 		padding: $grid-size;
 		top: $admin-bar-height-big;
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
 	}
 
 	@include break-medium() {

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -167,10 +167,6 @@
 	left: 0;
 	overflow: auto;
 
-	body.is-fullscreen-mode & {
-		top: 0;
-	}
-
 	@include break-medium() {
 		top: $admin-bar-height;
 		left: auto;

diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
@@ -17,10 +17,6 @@
 		height: auto;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
-
-		body.is-fullscreen-mode & {
-			top: $header-height;
-		}
 	}
 
 	@include break-medium() {
@@ -41,18 +37,18 @@
 		margin-top: -1px;
 		margin-bottom: -1px;
 
-		body.is-fullscreen-mode & {
-			max-height: calc(100vh - #{ $panel-header-height });
-			@include break-small() {
-				max-height: none;
-			}
-		}
-
 		@include break-small() {
 			overflow: inherit;
 			height: auto;
 			max-height: none;
 		}
+
+		@include break-medium() {
+
+			body.is-fullscreen-mode & {
+				max-height: calc(100vh - #{ $panel-header-height });
+			}
+		}
 	}
 
 	> .components-panel .components-panel__header {

diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
@@ -3,10 +3,6 @@
 
 	@include break-small() {
 		padding-top: ($grid-size * 5) + $admin-bar-height-big;
-
-		body.is-fullscreen-mode & {
-			padding-top: $grid-size * 5;
-		}
 	}
 
 	@include break-medium() {

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -120,10 +120,6 @@ body.block-editor-page {
 		bottom: 0;
 		left: 0;
 		min-height: calc(100vh - #{ $admin-bar-height-big });
-
-		body.is-fullscreen-mode & {
-			min-height: 100vh;
-		}
 	}
 
 	// The WP header height changes at this breakpoint