Răsfoiți Sursa

Merge pull request #1362 from ckeditor/t/1349

Docs: The navigation hint in the Examples index should respond to the type of the layout (desktop vs. mobile). Closes #1349.
Damian Konopka 7 ani în urmă
părinte
comite
fbb03b4985

+ 1 - 1
docs/api/index.md

@@ -5,7 +5,7 @@ category: api-reference
 # API documentation
 # API documentation
 
 
 <info-box>
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor API.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor API.
 </info-box>
 </info-box>
 
 
 ## Popular API pages
 ## Popular API pages

+ 16 - 0
docs/assets/styles.css

@@ -44,3 +44,19 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 		padding-right: 300px;
 		padding-right: 300px;
 	}
 	}
 }
 }
+
+/* https://github.com/ckeditor/ckeditor5/issues/1349 */
+.main .navigation-hint_mobile {
+	display: none;
+}
+
+/* https://github.com/ckeditor/ckeditor5/issues/1349 */
+@media only screen and (max-width: 960px) {
+	.main .navigation-hint_desktop {
+		display: none;
+	}
+
+	.main .navigation-hint_mobile {
+		display: inline;
+	}
+}

+ 1 - 1
docs/builds/index.md

@@ -11,7 +11,7 @@ meta-description: Learn how to install, integrate, configure and develop CKEdito
 CKEditor 5 Builds are the fastest and easiest way to use CKEditor 5 in your application.
 CKEditor 5 Builds are the fastest and easiest way to use CKEditor 5 in your application.
 
 
 <info-box>
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor 5 Builds documentation.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 Builds documentation.
 </info-box>
 </info-box>
 
 
 ## Related links
 ## Related links

+ 1 - 1
docs/examples/index.md

@@ -9,7 +9,7 @@ meta-description: Navigate through CKEditor 5 examples to see what you are able
 # Examples
 # Examples
 
 
 <info-box>
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor 5 examples. Visit the {@link features/index Features} section to see even more examples!
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 examples. Visit the {@link features/index Features} section to see even more examples!
 </info-box>
 </info-box>
 
 
 ## Related links
 ## Related links

+ 1 - 1
docs/features/index.md

@@ -7,7 +7,7 @@ toc: false
 # Features
 # Features
 
 
 <info-box>
 <info-box>
-	Use the **navigation tree on the left** to navigate through selected CKEditor 5 features.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through selected CKEditor 5 features.
 </info-box>
 </info-box>
 
 
 ## Features availability
 ## Features availability

+ 1 - 1
docs/framework/index.md

@@ -11,7 +11,7 @@ meta-description: Learn how to install, integrate, configure and develop CKEdito
 CKEditor 5 Framework is a set of components allowing you to create any kind of rich text editing solution.
 CKEditor 5 Framework is a set of components allowing you to create any kind of rich text editing solution.
 
 
 <info-box>
 <info-box>
-    Use the **navigation tree on the left** to navigate through CKEditor 5 Framework documentation.
+    Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 Framework documentation.
 </info-box>
 </info-box>
 
 
 ## Related links
 ## Related links