Improved markdown mobile editor experience

- Updated styles of codemirror area to be a bit more forefull in taking
up space.
- Added a fullscreen toggle as a backup option.

For #1675

diff --git a/resources/icons/fullscreen.svg b/resources/icons/fullscreen.svg
new file mode 100644 (file)
index 0000000..d00b574
--- /dev/null
+++ b/resources/icons/fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
\ No newline at end of file

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 331cf2f01a9321d77d742eadd51cdc0ad77f1608..25d6bde47aa9771b2fef3fbff890f51121dd0809 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -76,6 +76,7 @@ class MarkdownEditor {
                 return;
             }
             if (action === 'insertDrawing') this.actionStartDrawing();
+            if (action === 'fullscreen') this.actionFullScreen();
         });
 
         // Mobile section toggling
@@ -480,6 +481,13 @@ class MarkdownEditor {
         });
     }
 
+    // Make the editor full screen
+    actionFullScreen() {
+        const alreadyFullscreen = this.elem.classList.contains('fullscreen');
+        this.elem.classList.toggle('fullscreen', !alreadyFullscreen);
+        document.body.classList.toggle('markdown-fullscreen', !alreadyFullscreen);
+    }
+
     // Scroll to a specified text
     scrollToText(searchText) {
         if (!searchText) {

diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index 1807217a375d2f0a77f5fe10ea80113ee57ea490..c8b4a2b223e3afb602017a5ad43d9b5193a1dc02 100644 (file)
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -38,6 +38,7 @@ return [
     'reset' => 'Reset',
     'remove' => 'Remove',
     'add' => 'Add',
+    'fullscreen' => 'Fullscreen',
 
     // Sort Options
     'sort_options' => 'Sort Options',

diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index e3f7028eb349c1566019aff588df91656310d8b5..28c7776083c86687cececd0aebaf6bf75dff8251 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -403,6 +403,7 @@ span.CodeMirror-selectedtext { background: none; }
   left: 0;
   width: 100%;
   height: 100%;
+  margin-bottom: 0;
 }
 
 /**

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 1e0c908f965e36a48e58ed1ce20886ee47a632bd..3e7ff60f357c9598f7f450a57371200dfc25405f 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -62,6 +62,13 @@
     width: 50%;
     max-width: 50%;
   }
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 2;
+  }
 }
 
 @include smaller-than($m) {
@@ -71,6 +78,7 @@
   #markdown-editor .markdown-editor-wrap {
     width: 100%;
     max-width: 100%;
+    flex-grow: 1;
   }
   #markdown-editor .editor-toolbar {
     padding: 0;
@@ -83,12 +91,15 @@
     border-bottom: 1px solid #DDD;
     display: block;
   }
-  .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
+  .markdown-editor-wrap:not(.active) .editor-toolbar + div,
+  .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
+  .markdown-editor-wrap:not(.active) .markdown-display {
     display: none;
   }
   #markdown-editor .markdown-editor-wrap:not(.active) {
     flex-grow: 0;
     flex: none;
+    min-height: 0;
   }
 }
 

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index 709b1a7efe845b85dd6c55027d6d7be2fd5d3f37..9281a21946db4c75a6211cdf2ee20568640cd6b7 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -20,10 +20,17 @@
   }
 }
 
-body.mce-fullscreen .page-editor .edit-area {
+body.mce-fullscreen .page-editor .edit-area,
+body.markdown-fullscreen .page-editor .edit-area {
   z-index: 12;
 }
 
+body.mce-fullscreen, body.markdown-fullscreen {
+  .page-editor, .flex-fill {
+    overflow: visible;
+  }
+}
+
 @include smaller-than($s) {
   .page-edit-toolbar {
     overflow-x: scroll;

diff --git a/resources/views/pages/markdown-editor.blade.php b/resources/views/pages/markdown-editor.blade.php
index 52644113802d419ed0e8bdafaede843dc0110fe4..85afbea069ab4726c6588971445e439d65ebb5d2 100644 (file)
--- a/resources/views/pages/markdown-editor.blade.php
+++ b/resources/views/pages/markdown-editor.blade.php
@@ -9,17 +9,21 @@
             <div class="float right buttons">
                 @if(config('services.drawio'))
                     <button class="text-button" type="button" data-action="insertDrawing">@icon('drawing'){{ trans('entities.pages_md_insert_drawing') }}</button>
-                    &nbsp;|&nbsp
+                    <span class="mx-xs text-muted">|</span>
                 @endif
                 <button class="text-button" type="button" data-action="insertImage">@icon('image'){{ trans('entities.pages_md_insert_image') }}</button>
-                &nbsp;|&nbsp;
+                <span class="mx-xs text-muted">|</span>
                 <button class="text-button" type="button" data-action="insertLink">@icon('link'){{ trans('entities.pages_md_insert_link') }}</button>
+                <span class="mx-xs text-muted">|</span>
+                <button class="text-button" type="button" data-action="fullscreen">@icon('fullscreen'){{ trans('common.fullscreen') }}</button>
             </div>
         </div>
 
         <div markdown-input class="flex flex-fill">
-                        <textarea  id="markdown-editor-input"  name="markdown" rows="5"
-                                   @if($errors->has('markdown')) class="text-neg" @endif>@if(isset($model) || old('markdown')){{ old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown) }}@endif</textarea>
+            <textarea id="markdown-editor-input"
+                      @if($errors->has('markdown')) class="text-neg" @endif
+                      name="markdown"
+                      rows="5">@if(isset($model) || old('markdown')){{ old('markdown') ?? ($model->markdown === '' ? $model->html : $model->markdown) }}@endif</textarea>
         </div>
 
     </div>