浏览代码

Improved RWD of demos in Examples section.

dkonopka 6 年之前
父节点
当前提交
5deccac26d

+ 36 - 0
docs/_snippets/examples/document-editor.html

@@ -200,4 +200,40 @@
 	.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>

+ 14 - 34
docs/assets/styles.css

@@ -2,46 +2,26 @@
  * 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;
 	}
 }
 
-/* https://github.com/ckeditor/ckeditor5/issues/1350
-https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
-@media only screen and (min-width: 960px) and (max-width: 1360px) {
-	/* 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/5598. */
+@media only screen and (max-width: 1360px) {
+	.main .main__content-inner {
+		max-width: 960px;
 	}
 }
-
-/* https://github.com/ckeditor/ckeditor5/issues/913 */
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
 @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/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;
+	.main .main__content--no-toc .main__content-inner {
+		/* Because there is `width: auto`, we need to set something minimal. */
+		min-width: 860px;
 	}
 }
 

+ 1 - 0
docs/examples/builds/balloon-block-editor.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 30
+classes: main__content--no-toc
 ---
 
 # Balloon block editor

+ 1 - 0
docs/examples/builds/balloon-editor.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 30
+classes: main__content--no-toc
 ---
 
 # Balloon editor

+ 1 - 0
docs/examples/builds/classic-editor.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 10
+classes: main__content--no-toc
 ---
 
 # Classic editor

+ 1 - 0
docs/examples/builds/custom-build.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 40
+classes: main__content--no-toc
 ---
 
 # Custom build

+ 1 - 1
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

+ 1 - 0
docs/examples/builds/inline-editor.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 20
+classes: main__content--no-toc
 ---
 
 # Inline editor