Merge pull request #5609 from ckeditor/i/5598

Docs: Improved RWD of the demos in the "Examples" section. Closes #5598.
ckeditor · Oct 17, 2019 · 6a869ff · 6a869ff
2 parents 7bff23b + 243752c
commit 6a869ff
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 25 deletions.
diff --git a/docs/_snippets/examples/document-editor.html b/docs/_snippets/examples/document-editor.html
@@ -200,4 +200,40 @@ <h3 style="text-align:center;">Welcome letter</h3>
 	.document-editor .ck-content table td {
 		vertical-align: middle;
 	}
+
+	@media only screen and (max-width: 960px) {
+		/* Because on mobile 2cm paddings are to big. */
+		.document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			padding: 1.5em;
+		}
+	}
+
+	@media only screen and (max-width: 1200px) {
+		.main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			width: 100%;
+		}
+	}
+
+	/* Style document editor a'ka Google Docs.*/
+	@media only screen and (min-width: 1360px) {
+		.main .main__content.main__content-wide {
+			padding-right: 0;
+		}
+	}
+
+	@media only screen and (min-width: 1600px) {
+		.main .main__content.main__content-wide {
+			width: 24cm;
+		}
+
+		.main .main__content.main__content-wide .main__content-inner {
+			width: auto;
+			margin: 0 50px;
+		}
+
+		/* Keep "page" look based on viewport width. */
+		.main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			width: 60%;
+		}
+	}
 </style>
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -2,12 +2,12 @@
  * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  */
 
-/* https://github.com/ckeditor/ckeditor5/issues/913 */
-@media only screen and (min-width: 1600px) {
-	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
-	.main .main__content .main__content-inner,
-	.main .main__content-wide .main__content-inner {
-		width: 840px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (min-width: 960px) and (max-width: 1024px ) {
+	.main .main__content {
+		/* Reduce content width including side navigation (340px). */
+		max-width: calc( 100% - 340px );
+		min-width: auto;
 	}
 }
 
@@ -17,31 +17,22 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
 	.main .main__content .main__content-inner,
 	.main .main__content-wide .main__content-inner {
-		max-width: 900px;
 		padding-left: 30px;
 		padding-right: 30px
 	}
 }
 
-/* https://github.com/ckeditor/ckeditor5/issues/913 */
-@media only screen and (min-width: 1360px) {
-	.main .main__content.main__content-wide {
-		padding-right: 0;
-	}
-
-	.main .main__content-wide .main__content-inner {
-		max-width: 840px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (max-width: 1360px) {
+	.main .main__content-inner {
+		max-width: 960px;
 	}
 }
-
-/* https://github.com/ckeditor/ckeditor5/issues/1007 */
-@media only screen and (min-width: 1600px) {
-	.main .main__content.main__content-wide {
-		/*
-		 * `.main__content` by default has 760px width and 340px right padding.
-		 * `.main__content-wide` is 40px wider (800px), that's why we are reducing this right padding.
-		 */
-		padding-right: 300px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (min-width: 1360px) {
+	.main .main__content--no-toc .main__content-inner {
+		/* Because there is `width: auto`, we need to set some minimal value. */
+		min-width: 910px;
 	}
 }
 

diff --git a/docs/examples/builds/balloon-block-editor.md b/docs/examples/builds/balloon-block-editor.md
@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 30
+classes: main__content--no-toc
 ---
 
 # Balloon block editor

diff --git a/docs/examples/builds/balloon-editor.md b/docs/examples/builds/balloon-editor.md
@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 30
+classes: main__content--no-toc
 ---
 
 # Balloon editor

diff --git a/docs/examples/builds/classic-editor.md b/docs/examples/builds/classic-editor.md
@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 10
+classes: main__content--no-toc
 ---
 
 # Classic editor

diff --git a/docs/examples/builds/custom-build.md b/docs/examples/builds/custom-build.md
@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 40
+classes: main__content--no-toc
 ---
 
 # Custom build

diff --git a/docs/examples/builds/document-editor.md b/docs/examples/builds/document-editor.md
@@ -1,7 +1,7 @@
 ---
 category: examples-builds
 order: 30
-classes: main__content-wide
+classes: 'main__content-wide main__content--no-toc'
 ---
 
 # Document editor

diff --git a/docs/examples/builds/inline-editor.md b/docs/examples/builds/inline-editor.md
@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 20
+classes: main__content--no-toc
 ---
 
 # Inline editor