Updated editor usability on mobile

resources/assets/js/components/wysiwyg-editor.js

@@ -517,6 +517,16 @@ class WysiwygEditor {
                     if (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() {
@@ -600,6 +610,7 @@ class WysiwygEditor {
 
                 // Paste image-uploads
                 editor.on('paste', event => editorPaste(event, editor, context));
+
             }
         };
     }

resources/assets/sass/_header.scss

@@ -322,21 +322,6 @@ header .search-box {
   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 {
   display: inline-block;
   padding: $-xs $-s;

resources/assets/sass/_pages.scss

@@ -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 {
   pointer-events: none;
   transform: scale(0);

resources/assets/sass/_tinymce.scss

@@ -21,6 +21,13 @@
   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 {
   flex: 1 1 auto;
   display: flex !important;

resources/views/pages/form.blade.php

@@ -11,12 +11,12 @@
     {{ csrf_field() }}
 
     {{--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="action-buttons text-left px-m py-xs">
-                <a href="{{ back()->getTargetUrl() }}" class="text-button text-primary">@icon('back'){{ trans('common.back') }}</a>
-                <a onclick="$('body>header').slideToggle();" class="text-button text-primary">@icon('swap-vertical'){{ trans('entities.pages_edit_toggle_header') }}</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')<span class="hide-under-l">{{ trans('entities.pages_edit_toggle_header') }}</span></a>
             </div>
 
             <div class="text-center px-m py-xs">
@@ -48,7 +48,7 @@
                     </ul>
                 </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>