mirror of
https://github.com/codex-team/editor.js
synced 2024-05-15 21:06:52 +02:00
Responsive layout (#593)
* Mobile adaptation beginned * mobile ready * Narrow mode supported * update version * disable narrow mode testing * prod build * rm unnecessary code * Update src/styles/variables.css * rm unused code * add viewport * disable narrow mode on mobile * mobile: add bg to current block * add paddings for highlighted block * rm changelog
This commit is contained in:
Peter Savchenko
GitHub
parent
63a82d3424
commit
aab317895b
8
dist/codex-editor.js
vendored
8
dist/codex-editor.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,22 +1,27 @@
|
|||
# Changelog
|
||||
|
||||
### 2.2.26 changelog
|
||||
### 2.2.27
|
||||
|
||||
- `New` *Mobile view* — Editor now adopted for mobile devices
|
||||
- `New` *Narrow mode* — Editor now adopted for narrow containers
|
||||
|
||||
### 2.2.26
|
||||
|
||||
- `Improvements` *Caret* — Improvements of the caret behaviour: arrows, backspace and enter keys better handling.
|
||||
|
||||
### 2.2.25 changelog
|
||||
### 2.2.25
|
||||
|
||||
- `New` *Autofocus* — Now you can set focus at Editor after page has been loaded
|
||||
|
||||
### 2.2.24 changelog
|
||||
### 2.2.24
|
||||
|
||||
- `Improvements` *Paste* handling — minor paste handling improvements
|
||||
|
||||
### 2.2.23 changelog
|
||||
### 2.2.23
|
||||
|
||||
- `New` *Shortcuts* — copy and cut Blocks selected by CMD+A
|
||||
|
||||
### 2.2—2.7 changelog
|
||||
### 2.2—2.7
|
||||
|
||||
- `New` *Sanitize API* — [Sanitize Config](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#automatic-sanitize) of `Block Tools` now automatically extends by tags of `Inline Tools` that is enabled by current Tool by `inlineToolbar` option. You don't need more to specify `a, b, mark, code` manually. This feature will be added to fields that supports inline markup.
|
||||
- `New` *Block Selection* — Ability to select Block by `CMD+A`, and the whole Editor by double `CMD+A`. After that, you can copy (`CMD+C`), remove (`Backspace`) or clear (`Enter`) selected Blocks.
|
||||
|
|
|
|||
|
|
@ -43,6 +43,13 @@ body {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ce-example__content--small {
|
||||
max-width: 500px;
|
||||
border-left: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.ce-example__output {
|
||||
background: #1B202B;
|
||||
overflow-x: auto;
|
||||
|
|
@ -91,7 +98,7 @@ body {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media all and (max-width: 680px){
|
||||
@media all and (max-width: 730px){
|
||||
.ce-example__header,
|
||||
.ce-example__content{
|
||||
padding: 0 20px;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
|
||||
<link href="assets/demo.css" rel="stylesheet">
|
||||
<script src="assets/json-preview.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="ce-example">
|
||||
|
|
@ -16,7 +17,7 @@
|
|||
<a href="https://github.com/codex-editor" target="_blank">Plugins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__content">
|
||||
<div class="ce-example__content _ce-example__content--small">
|
||||
<div id="codex-editor"></div>
|
||||
|
||||
<div class="ce-example__button" id="saveButton">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "codex.editor",
|
||||
"version": "2.7.26",
|
||||
"version": "2.7.27",
|
||||
"description": "CodeX Editor. Native JS, based on API and Open Source",
|
||||
"main": "dist/codex-editor.js",
|
||||
"types": "./types/index.d.ts",
|
||||
|
|
|
|||
|
|
@ -38,15 +38,25 @@ export default class UI extends Module {
|
|||
* CodeX Editor UI CSS class names
|
||||
* @return {{editorWrapper: string, editorZone: string}}
|
||||
*/
|
||||
private get CSS(): {editorWrapper: string, editorZone: string, editorZoneHidden: string, editorLoader: string} {
|
||||
private get CSS(): {
|
||||
editorWrapper: string, editorWrapperNarrow: string, editorZone: string, editorZoneHidden: string,
|
||||
editorLoader: string,
|
||||
} {
|
||||
return {
|
||||
editorWrapper : 'codex-editor',
|
||||
editorWrapperNarrow : 'codex-editor--narrow',
|
||||
editorZone : 'codex-editor__redactor',
|
||||
editorZoneHidden : 'codex-editor__redactor--hidden',
|
||||
editorLoader : 'codex-editor__loader',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Width of center column of Editor
|
||||
* @type {number}
|
||||
*/
|
||||
public contentWidth: number = 650;
|
||||
|
||||
/**
|
||||
* HTML Elements used for UI
|
||||
*/
|
||||
|
|
@ -135,8 +145,16 @@ export default class UI extends Module {
|
|||
this.nodes.wrapper = $.make('div', this.CSS.editorWrapper);
|
||||
this.nodes.redactor = $.make('div', this.CSS.editorZone);
|
||||
|
||||
/**
|
||||
* If Editor has injected into the narrow container, enable Narrow Mode
|
||||
*/
|
||||
if (this.nodes.holder.offsetWidth < this.contentWidth) {
|
||||
this.nodes.wrapper.classList.add(this.CSS.editorWrapperNarrow);
|
||||
}
|
||||
|
||||
this.nodes.wrapper.appendChild(this.nodes.redactor);
|
||||
this.nodes.holder.appendChild(this.nodes.wrapper);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,6 +6,13 @@
|
|||
&--focused {
|
||||
background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
|
||||
border-radius: 3px;
|
||||
|
||||
@media (--mobile){
|
||||
background-image: none;
|
||||
background-color: rgba(200, 199, 219, 0.17);
|
||||
margin: 0 -10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&--selected &__content {
|
||||
|
|
@ -75,3 +82,11 @@
|
|||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.codex-editor--narrow .ce-block--focused {
|
||||
@media (--not-mobile) {
|
||||
margin-right: calc(var(--narrow-mode-right-padding) * -1);
|
||||
padding-right: var(--narrow-mode-right-padding);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-inline-tool {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,19 @@
|
|||
top: 35px;
|
||||
min-width: 124px;
|
||||
|
||||
@media (--mobile){
|
||||
bottom: 50px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 12px;
|
||||
|
||||
@media (--mobile){
|
||||
bottom: -5px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -9,27 +9,55 @@
|
|||
will-change: opacity, transform;
|
||||
display: none;
|
||||
|
||||
@media (--mobile) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 12px rgba(60, 67, 81, 0.18);
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
&--opened {
|
||||
display: block;
|
||||
/*opacity: 1;*/
|
||||
/*visibility: visible;*/
|
||||
|
||||
@media (--mobile){
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: var(--content-width);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
@media (--mobile){
|
||||
display: flex;
|
||||
align-content: center;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
max-width: calc(100% - 70px);
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__plus {
|
||||
@apply --toolbox-button;
|
||||
|
||||
position: absolute;
|
||||
left: calc(calc(var(--toolbox-buttons-size) + 10px) * -1);
|
||||
left: calc(var(--toolbox-buttons-size) * -1);
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (--mobile){
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__plus,
|
||||
|
|
@ -49,6 +77,13 @@
|
|||
padding-right: 16px;
|
||||
opacity: 0;
|
||||
|
||||
@media (--mobile){
|
||||
position: static;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--opened {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -66,3 +101,12 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for Narrow mode
|
||||
*/
|
||||
.codex-editor--narrow .ce-toolbar__plus {
|
||||
@media (--not-mobile) {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,35 @@
|
|||
.ce-toolbox {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
transition: opacity 100ms ease;
|
||||
will-change: opacity;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
transition: opacity 100ms ease;
|
||||
will-change: opacity;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&--opened {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
@media (--mobile){
|
||||
position: static;
|
||||
transform: none !important;
|
||||
align-items: center;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@apply --toolbox-button;
|
||||
}
|
||||
&--opened {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@apply --toolbox-button;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Styles for Narrow mode
|
||||
*/
|
||||
.codex-editor--narrow .ce-toolbox {
|
||||
@media (--not-mobile) {
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for narrow holder
|
||||
*/
|
||||
&--narrow &__redactor {
|
||||
@media (--not-mobile) {
|
||||
margin-right: var(--narrow-mode-right-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&--narrow .ce-toolbar__actions {
|
||||
@media (--not-mobile) {
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__loader {
|
||||
position: relative;
|
||||
height: 30vh;
|
||||
|
|
|
|||
|
|
@ -26,9 +26,15 @@
|
|||
|
||||
/**
|
||||
* Block content width
|
||||
* Should be set in a constant at the modules/ui.js
|
||||
*/
|
||||
--content-width: 650px;
|
||||
|
||||
/**
|
||||
* In narrow mode, we increase right zone contained Block Actions button
|
||||
*/
|
||||
--narrow-mode-right-padding: 50px;
|
||||
|
||||
/**
|
||||
* Toolbar buttons height and width
|
||||
*/
|
||||
|
|
@ -37,13 +43,16 @@
|
|||
/**
|
||||
* Toolbar Plus Button and Toolbox buttons height and width
|
||||
*/
|
||||
--toolbox-buttons-size: 24px;
|
||||
--toolbox-buttons-size: 34px;
|
||||
|
||||
/**
|
||||
* Confirm deletion bg
|
||||
*/
|
||||
--color-confirm: #E24A4A;
|
||||
|
||||
@custom-media --mobile (max-width: 650px);
|
||||
@custom-media --not-mobile (min-width: 651px);
|
||||
|
||||
--overlay-pane: {
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -77,10 +86,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-of-type){
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
color: var(--color-active-icon);
|
||||
|
|
|
|||
Loading…
Reference in a new issue