1563 - Hide the always visible block navigator on smaller screens

ampproject · Nov 23, 2018 · f562534 · f562534
1 parent 48d11d1
commit f562534
Showing 1 changed file with 41 additions and 30 deletions.
diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css
@@ -446,44 +446,55 @@ div[data-amp-type="grid"] .block-library-image__resizer {
 	display: none;
 }
 
-/* 7. Block navigator */
+/*
+ * 7. Block navigator
+ * Hides the toggler and shows the navigator by default on large screens.
+ */
 
-.components-icon-button.editor-block-navigation {
-    display: none;
+@media( max-width: 949px) {
+	.editor-block-list__block-edit > div > .editor-selectors {
+		display: none;
+	}
 }
 
-.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors {
-    position: fixed;
-    left: 200px;
-    top: 150px;
-    width: 300px;
-    z-index: 80;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
+@media (min-width: 950px) {
+	.components-icon-button.editor-block-navigation {
+			display: none;
+	}
 
-.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors .editor-block-navigation__list {
-	list-style-type: none;
-}
+	.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors {
+			position: fixed;
+			left: 200px;
+			top: 150px;
+			width: 300px;
+			z-index: 80;
+			list-style-type: none;
+			padding: 0;
+			margin: 0;
+	}
 
-.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors .components-icon-button .dashicon {
-	margin-right: 5px;
-}
+	.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors .editor-block-navigation__list {
+		list-style-type: none;
+	}
 
-.editor-selectors .component-editor__selector button {
-	background: no-repeat left top;
-	padding-left: 37px;
-	height: 40px;
-	margin: 1px 0 1px 4px;
-}
+	.edit-post-visual-editor .editor-block-list__block-edit .editor-selectors .components-icon-button .dashicon {
+		margin-right: 5px;
+	}
 
-.editor-selectors .component-editor__selector .components-button:focus {
-	box-shadow: none;
-}
+	.editor-selectors .component-editor__selector button {
+		background: no-repeat left top;
+		padding-left: 37px;
+		height: 40px;
+		margin: 1px 0 1px 4px;
+	}
+
+	.editor-selectors .component-editor__selector .components-button:focus {
+		box-shadow: none;
+	}
 
-.post-type-amp_story .components-range-control__number {
-	width: 60px;
+	.post-type-amp_story .components-range-control__number {
+		width: 60px;
+	}
 }
 
 /*