Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

t/ckeditor5/416: Feature: Introduced the ck-media-phone RWD mixin; improved responsive of various views #204

Merged
merged 8 commits into from
Oct 26, 2018
Merged

t/ckeditor5/416: Feature: Introduced the ck-media-phone RWD mixin; improved responsive of various views #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e979d63
Added a @media query mixin for narrow screens
oleq Oct 12, 2018
73c3532
Made the image text alternative, link and media embed UI responsive i…
oleq Oct 12, 2018
93d94f2
Improved the media query mixin.
oleq Oct 12, 2018
b6c7ad2
Renamed the media query mixin.
oleq Oct 12, 2018
69411a1
Fixed broken input error in the media embed form when the viewport is…
oleq Oct 12, 2018
93dd8e2
Renamed media mixin ck-media-narrow->ck-media-phone.
oleq Oct 15, 2018
18edfca
Merge branch 'master' into t/ckeditor5/416
oleq Oct 25, 2018
33c974c
Increased the padding of the buttons in the form on mobiles to make i…
oleq Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions theme/ckeditor5-image/textalternativeform.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* For licensing, see LICENSE.md.
*/

@import "../mixins/_rwd.css";

.ck.ck-text-alternative-form {
padding: var(--ck-spacing-standard);

Expand All @@ -14,4 +16,32 @@
& > :not(:first-child) {
margin-left: var(--ck-spacing-standard);
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-labeled-input {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

& .ck-input-text {
min-width: 0;
width: 100%;
}
}

& .ck-button {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);
margin-left: 0;

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
31 changes: 30 additions & 1 deletion theme/ckeditor5-link/linkactions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
@import "../mixins/_focus.css";
@import "../mixins/_shadow.css";
@import "../mixins/_rwd.css";

.ck.ck-link-actions {
padding: var(--ck-spacing-standard);
Expand Down Expand Up @@ -55,7 +56,35 @@
outline: none;
}

& > :not(:first-child) {
& .ck-button:not(.ck-link-actions__preview) {
margin-left: var(--ck-spacing-standard);
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-button.ck-link-actions__preview {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

& .ck-button__label {
min-width: 0;
max-width: 100%;
}
}

& .ck-button:not(.ck-link-actions__preview) {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);
margin-left: 0;

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
31 changes: 31 additions & 0 deletions theme/ckeditor5-link/linkform.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* For licensing, see LICENSE.md.
*/

@import "../mixins/_rwd.css";

.ck.ck-link-form {
padding: var(--ck-spacing-standard);

Expand All @@ -14,4 +16,33 @@
& > :not(:first-child) {
margin-left: var(--ck-spacing-standard);
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-labeled-input {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

& .ck-input-text {
min-width: 0;
width: 100%;
}
}

& .ck-button {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);
margin-left: 0;

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}

35 changes: 35 additions & 0 deletions theme/ckeditor5-media-embed/mediaform.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* For licensing, see LICENSE.md.
*/

@import "../mixins/_rwd.css";

.ck.ck-media-form {
padding: var(--ck-spacing-standard);

Expand All @@ -13,4 +15,37 @@
& > :not(:first-child) {
margin-left: var(--ck-spacing-standard);
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-labeled-input {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

& .ck-input-text {
min-width: 0;
width: 100%;
}

/* Let the long error messages wrap in the narrow form. */
& .ck-labeled-input__error {
white-space: normal;
}
}

& .ck-button {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);
margin-left: 0;

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
10 changes: 10 additions & 0 deletions theme/mixins/_rwd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
* Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

@define-mixin ck-media-phone {
@media screen and (max-width: 600px) {
@mixin-content;
}
}