Updated markdown editor for mobile

Also tweaked padding and responsivness on many common elements

diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js
index b8e2bc040c8fe4db7795259cbcbaf515ff3830f1..96cc1e6d10d228a9e8047d53da4e8969abc07238 100644 (file)
--- a/resources/assets/js/components/markdown-editor.js
+++ b/resources/assets/js/components/markdown-editor.js
@@ -71,6 +71,19 @@ class MarkdownEditor {
             if (action === 'insertDrawing') this.actionStartDrawing();
         });
 
             if (action === 'insertDrawing') this.actionStartDrawing();
         });
 

+        // Mobile section toggling
+        this.elem.addEventListener('click', event => {
+            const toolbarLabel = event.target.closest('.editor-toolbar-label');
+            if (!toolbarLabel) return;
+
+            const currentActiveSections = this.elem.querySelectorAll('.markdown-editor-wrap');
+            for (let activeElem of currentActiveSections) {
+                activeElem.classList.remove('active');
+            }
+
+            toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
+        });
+

         window.$events.listen('editor-markdown-update', value => {
             this.cm.setValue(value);
             this.updateAndRender();
         window.$events.listen('editor-markdown-update', value => {
             this.cm.setValue(value);
             this.updateAndRender();

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 278917cd5ae6844efba124dbf2884381e75e3d17..efdefc016fbdc3dc6196f9641f09af21251a4e77 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -189,11 +189,21 @@
     width: 100%;
   }
 }
     width: 100%;
   }
 }

+@include smaller-than($xxl) {
+  .content-wrap.card {
+    padding: $-l $-xl;
+  }
+}

 @include smaller-than($m) {
   .content-wrap.card {
     padding: $-m $-l;
   }
 }
 @include smaller-than($m) {
   .content-wrap.card {
     padding: $-m $-l;
   }
 }

+@include smaller-than($s) {
+  .content-wrap.card {
+    padding: $-m $-s;
+  }
+}

 
 /**
  * Tags
 
 /**
  * Tags

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 9e4ef702d97a8a9e51d131421abad5fc890ccd96..f40c92a194d6ca4b636ee871b78d6c5adbb4a4ec 100644 (file)
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -63,6 +63,34 @@
   }
 }
 
   }
 }
 

+@include smaller-than($m) {
+  #markdown-editor {
+    flex-direction: column;
+  }
+  #markdown-editor .markdown-editor-wrap {
+    width: 100%;
+    max-width: 100%;
+  }
+  #markdown-editor .editor-toolbar {
+    padding: 0;
+  }
+  #markdown-editor .editor-toolbar > * {
+    padding: $-xs $-s;
+  }
+  .editor-toolbar-label {
+    float: none !important;
+    border-bottom: 1px solid #DDD;
+    display: block;
+  }
+  .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
+    display: none;
+  }
+  #markdown-editor .markdown-editor-wrap:not(.active) {
+    flex-grow: 0;
+    flex: none;
+  }
+}
+

 .markdown-display {
   padding: 0 $-m 0;
   margin-left: -1px;
 .markdown-display {
   padding: 0 $-m 0;
   margin-left: -1px;

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 00b79180309d1887d4f55a1dbfdc1c8836246f82..7fd6d7ae94fa931e3ebbccecb6bbf1d34a7a25f2 100644 (file)
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -145,12 +145,13 @@ header .search-box {
   padding: 0 $-xs;
   position: absolute;
   right: $-m;
   padding: 0 $-xs;
   position: absolute;
   right: $-m;

-  top: 8px;
+  top: 13px;

   line-height: 1;
   cursor: pointer;
   user-select: none;
   svg {
     margin: 0;
   line-height: 1;
   cursor: pointer;
   user-select: none;
   svg {
     margin: 0;

+    bottom: -2px;

   }
 }
 
   }
 }
 


@@ -302,6 +303,17 @@ header .search-box {
   }
 }
 
   }
 }
 

+@include smaller-than($m) {
+  .breadcrumb-listing-dropdown {
+    position: fixed;
+    right: auto;
+    left: $-m;
+  }
+  .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
+    max-height: 240px;
+  }
+}
+

 .faded {
   a, button, span, span > div {
     color: #666;
 .faded {
   a, button, span, span > div {
     color: #666;

diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss
index 30bbafc101e8a4b7fa0df68ec0c13a77d10786fe..137048935209292d62f466903701538f369cbf25 100644 (file)
--- a/resources/assets/sass/_layout.scss
+++ b/resources/assets/sass/_layout.scss
@@ -53,6 +53,9 @@
     grid-row-gap: 0;
     grid-column-gap: 0;
   }
     grid-row-gap: 0;
     grid-column-gap: 0;
   }

+  &.no-row-gap {
+    grid-row-gap: 0;
+  }

 }
 
 @include smaller-than($m) {
 }
 
 @include smaller-than($m) {


@@ -216,9 +219,6 @@ body.flexbox {
     grid-template-columns: 1fr 3fr;
     grid-template-rows: max-content min-content;
     padding-right: $-l;
     grid-template-columns: 1fr 3fr;
     grid-template-rows: max-content min-content;
     padding-right: $-l;

-    .content-wrap.card {
-      padding: $-l $-xl;
-    }

   }
 }
 @include larger-than($xxl) {
   }
 }
 @include larger-than($xxl) {

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index cda310caf52c91c6e3cc5f716410ee54fc8a944f..969682c3ba8c5947eb34977932f89353e1b7daaa 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -8,6 +8,7 @@
   .edit-area {
     flex: 1;
     flex-direction: column;
   .edit-area {
     flex: 1;
     flex-direction: column;

+    z-index: 1;

   }
 
   .mce-tinymce {
   }
 
   .mce-tinymce {

diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 2993425bb01e9ce754a1d9ac420b96daa48cd493..b93e79ac819e4afaef1faf960fda7f304a1653fb 100644 (file)
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -1,6 +1,6 @@
 <div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
     <div class="header p-s">
 <div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
     <div class="header p-s">

-        <div class="grid half">
+        <div class="grid half no-gap v-center">

             <div class="meta">
                 <a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
                 &nbsp;&nbsp;
             <div class="meta">
                 <a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
                 &nbsp;&nbsp;

diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index 2b83edc71d70460b2de290450130d11b924b7331..c9c301572a1754cb7794130535b740bfffd5089d 100644 (file)
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -55,13 +55,13 @@
                         </span>
                         <ul>
                             <li>
                         </span>
                         <ul>
                             <li>

-                                <a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user'){{ trans('common.view_profile') }}</a>
+                                <a href="{{ baseUrl("/user/{$currentUser->id}") }}">@icon('user'){{ trans('common.view_profile') }}</a>

                             </li>
                             <li>
                             </li>
                             <li>

-                                <a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit'){{ trans('common.edit_profile') }}</a>
+                                <a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}">@icon('edit'){{ trans('common.edit_profile') }}</a>

                             </li>
                             <li>
                             </li>
                             <li>

-                                <a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout'){{ trans('auth.logout') }}</a>
+                                <a href="{{ baseUrl('/logout') }}">@icon('logout'){{ trans('auth.logout') }}</a>

                             </li>
                         </ul>
                     </div>
                             </li>
                         </ul>
                     </div>

diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php
index 590825faf1e924d1b215b8acdadf3b24e01aa10d..53da79fd24a30b40276d2bd052dde88437f17da6 100644 (file)
--- a/resources/views/common/home.blade.php
+++ b/resources/views/common/home.blade.php
@@ -8,7 +8,7 @@
     </div>
 
     <div class="container" id="home-default">
     </div>
 
     <div class="container" id="home-default">

-        <div class="grid third gap-xxl" >
+        <div class="grid third gap-xxl no-row-gap" >

             <div>
                 @if(count($draftPages) > 0)
                     <div id="recent-drafts" class="card mb-xl">
             <div>
                 @if(count($draftPages) > 0)
                     <div id="recent-drafts" class="card mb-xl">

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 29096fc8eb421f748050511414c15e1fdf2ba1bc..7a530b0a97b942001aa9e1ef0005ec2c9394bef3 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -79,9 +79,9 @@
         @if(setting('app-editor') === 'markdown')
             <div v-pre id="markdown-editor" markdown-editor class="flex-fill flex code-fill">
 
         @if(setting('app-editor') === 'markdown')
             <div v-pre id="markdown-editor" markdown-editor class="flex-fill flex code-fill">
 

-                <div class="markdown-editor-wrap">
+                <div class="markdown-editor-wrap active">

                     <div class="editor-toolbar">
                     <div class="editor-toolbar">

-                        <span class="float left">{{ trans('entities.pages_md_editor') }}</span>
+                        <span class="float left editor-toolbar-label">{{ trans('entities.pages_md_editor') }}</span>

                         <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>
                         <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>


@@ -102,7 +102,7 @@
 
                 <div class="markdown-editor-wrap">
                     <div class="editor-toolbar">
 
                 <div class="markdown-editor-wrap">
                     <div class="editor-toolbar">

-                        <div class="">{{ trans('entities.pages_md_preview') }}</div>
+                        <div class="editor-toolbar-label">{{ trans('entities.pages_md_preview') }}</div>

                     </div>
                     <div class="markdown-display page-content">
                     </div>
                     </div>
                     <div class="markdown-display page-content">
                     </div>

diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index cf043544eebb3c5e28dc806e4c6b9fb606992199..582bb078e092eeb8d75f3e00075ca5c424feae8a 100644 (file)
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -3,7 +3,7 @@
 @section('body')
     <div class="container small">
 
 @section('body')
     <div class="container small">
 

-        <div class="grid left-focus v-center">
+        <div class="grid left-focus v-center no-row-gap">

             <div class="py-m">
                 @include('settings.navbar', ['selected' => 'settings'])
             </div>
             <div class="py-m">
                 @include('settings.navbar', ['selected' => 'settings'])
             </div>

diff --git a/resources/views/settings/maintenance.blade.php b/resources/views/settings/maintenance.blade.php
index 50f30c54b00ac5df788b579cce25ed3341261ba9..c3ca8c96fbf95102e0a88de8422036fdacfff3cf 100644 (file)
--- a/resources/views/settings/maintenance.blade.php
+++ b/resources/views/settings/maintenance.blade.php
@@ -3,7 +3,7 @@
 @section('body')
 <div class="container small">
 
 @section('body')
 <div class="container small">
 

-    <div class="grid left-focus v-center">
+    <div class="grid left-focus v-center no-row-gap">

         <div class="py-m">
             @include('settings.navbar', ['selected' => 'maintenance'])
         </div>
         <div class="py-m">
             @include('settings.navbar', ['selected' => 'maintenance'])
         </div>

diff --git a/resources/views/users/profile.blade.php b/resources/views/users/profile.blade.php
index bfa749ed9d7006474f21626de91eef132c09f844..e2689790f185516d5d34408ba21dca05c138f3f0 100644 (file)
--- a/resources/views/users/profile.blade.php
+++ b/resources/views/users/profile.blade.php
@@ -29,7 +29,7 @@
                         </div>
                         <div id="content-counts">
                             <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
                         </div>
                         <div id="content-counts">
                             <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>

-                            <div class="grid half v-center">
+                            <div class="grid half v-center no-row-gap">

                                 <div class="icon-list">
                                     <a href="#recent-pages" class="text-page icon-list-item">
                                         <span>@icon('page')</span>
                                 <div class="icon-list">
                                     <a href="#recent-pages" class="text-page icon-list-item">
                                         <span>@icon('page')</span>