From 79d8b48deadcb388f0b50ba5c01959c92b460316 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 12 Oct 2018 15:01:19 +0200 Subject: [PATCH 1/3] Made the media embed UI responsive when the screen is narrow. --- theme/mediaform.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/theme/mediaform.css b/theme/mediaform.css index f5a0faa..ed0b5eb 100644 --- a/theme/mediaform.css +++ b/theme/mediaform.css @@ -3,9 +3,13 @@ * For licensing, see LICENSE.md. */ +@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css"; + .ck.ck-media-form { display: flex; align-items: flex-start; + flex-direction: row; + flex-wrap: nowrap; & .ck-labeled-input { display: inline-block; @@ -14,4 +18,16 @@ & .ck-label { display: none; } + + @mixin ck-media-mobile { + flex-wrap: wrap; + + & .ck-labeled-input { + flex-basis: 100%; + } + + & .ck-button { + flex-basis: 50%; + } + } } From 1550fbcacdfe0a593da89412100e28d54480f408 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 12 Oct 2018 15:04:11 +0200 Subject: [PATCH 2/3] Renamed the media query mixin. --- theme/mediaform.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/mediaform.css b/theme/mediaform.css index ed0b5eb..8cbf356 100644 --- a/theme/mediaform.css +++ b/theme/mediaform.css @@ -19,7 +19,7 @@ display: none; } - @mixin ck-media-mobile { + @mixin ck-media-narrow { flex-wrap: wrap; & .ck-labeled-input { From 8060e77e7ff228d5386cfdc61225429de177478a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 15 Oct 2018 10:55:13 +0200 Subject: [PATCH 3/3] Renamed media mixin ck-media-narrow->ck-media-phone. --- theme/mediaform.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/mediaform.css b/theme/mediaform.css index 8cbf356..2a7f25d 100644 --- a/theme/mediaform.css +++ b/theme/mediaform.css @@ -19,7 +19,7 @@ display: none; } - @mixin ck-media-narrow { + @mixin ck-media-phone { flex-wrap: wrap; & .ck-labeled-input {