mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
Updated editor usability on mobile
This commit is contained in:
parent
8d358e4894
commit
21e1123d12
@ -517,6 +517,16 @@ class WysiwygEditor {
|
|||||||
if (scrollId) {
|
if (scrollId) {
|
||||||
scrollToText(scrollId);
|
scrollToText(scrollId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Override for touch events to allow scroll on mobile
|
||||||
|
const container = editor.getContainer();
|
||||||
|
const toolbarButtons = container.querySelectorAll('.mce-btn');
|
||||||
|
for (let button of toolbarButtons) {
|
||||||
|
button.addEventListener('touchstart', event => {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.editor = editor;
|
||||||
});
|
});
|
||||||
|
|
||||||
function editorChange() {
|
function editorChange() {
|
||||||
@ -600,6 +610,7 @@ class WysiwygEditor {
|
|||||||
|
|
||||||
// Paste image-uploads
|
// Paste image-uploads
|
||||||
editor.on('paste', event => editorPaste(event, editor, context));
|
editor.on('paste', event => editorPaste(event, editor, context));
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -322,21 +322,6 @@ header .search-box {
|
|||||||
padding: $-s;
|
padding: $-s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: relative;
|
|
||||||
> .grid > div {
|
|
||||||
opacity: 0.8;
|
|
||||||
transition: opacity ease-in-out 120ms;
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-button {
|
|
||||||
color: #666;
|
|
||||||
fill: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons .text-button {
|
.action-buttons .text-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: $-xs $-s;
|
padding: $-xs $-s;
|
||||||
|
@ -19,6 +19,39 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include smaller-than($l) {
|
||||||
|
.page-edit-toolbar {
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: visible;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.page-edit-toolbar .grid.third {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
> div {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include smaller-than($l) {
|
||||||
|
.page-edit-toolbar #save-button {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 30;
|
||||||
|
background-color: #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
font-size: 16px;
|
||||||
|
right: $-m;
|
||||||
|
bottom: $-xs;
|
||||||
|
box-shadow: $bs-med;
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.draft-notification {
|
.draft-notification {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
|
@ -21,6 +21,13 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include smaller-than($l) {
|
||||||
|
.mce-container-body.mce-flow-layout {
|
||||||
|
overflow-x: scroll;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.edit-area.flex > div > .mce-tinymce.mce-container.mce-panel {
|
.edit-area.flex > div > .mce-tinymce.mce-container.mce-panel {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
@ -11,12 +11,12 @@
|
|||||||
{{ csrf_field() }}
|
{{ csrf_field() }}
|
||||||
|
|
||||||
{{--Header Bar--}}
|
{{--Header Bar--}}
|
||||||
<div class="primary-background-light toolbar">
|
<div class="primary-background-light toolbar page-edit-toolbar">
|
||||||
<div class="grid third v-center">
|
<div class="grid third v-center">
|
||||||
|
|
||||||
<div class="action-buttons text-left px-m py-xs">
|
<div class="action-buttons text-left px-m py-xs">
|
||||||
<a href="{{ back()->getTargetUrl() }}" class="text-button text-primary">@icon('back'){{ trans('common.back') }}</a>
|
<a href="{{ back()->getTargetUrl() }}" class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
|
||||||
<a onclick="$('body>header').slideToggle();" class="text-button text-primary">@icon('swap-vertical'){{ trans('entities.pages_edit_toggle_header') }}</a>
|
<a onclick="$('body>header').slideToggle();" class="text-button text-primary">@icon('swap-vertical')<span class="hide-under-l">{{ trans('entities.pages_edit_toggle_header') }}</span></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center px-m py-xs">
|
<div class="text-center px-m py-xs">
|
||||||
@ -48,7 +48,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" id="save-button" class="text-button text-pos-hover">@icon('save'){{ trans('entities.pages_save') }}</button>
|
<button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user