Updated markdown editor for mobile

Also tweaked padding and responsivness on many common elements

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

@@ -71,6 +71,19 @@ class MarkdownEditor {
             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();

resources/assets/sass/_blocks.scss

@@ -189,11 +189,21 @@
     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($s) {
+  .content-wrap.card {
+    padding: $-m $-s;
+  }
+}
 
 /**
  * Tags

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;

resources/assets/sass/_header.scss

@@ -145,12 +145,13 @@ header .search-box {
   padding: 0 $-xs;
   position: absolute;
   right: $-m;
-  top: 8px;
+  top: 13px;
   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;

resources/assets/sass/_layout.scss

@@ -53,6 +53,9 @@
     grid-row-gap: 0;
     grid-column-gap: 0;
   }
+  &.no-row-gap {
+    grid-row-gap: 0;
+  }
 }
 
 @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;
-    .content-wrap.card {
-      padding: $-l $-xl;
-    }
   }
 }
 @include larger-than($xxl) {

resources/assets/sass/_pages.scss

@@ -8,6 +8,7 @@
   .edit-area {
     flex: 1;
     flex-direction: column;
+    z-index: 1;
   }
 
   .mce-tinymce {

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="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;

resources/views/common/header.blade.php

@@ -55,13 +55,13 @@
                         </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>
-                                <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>
-                                <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>

resources/views/common/home.blade.php

@@ -8,7 +8,7 @@
     </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">

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">
 
-                <div class="markdown-editor-wrap">
+                <div class="markdown-editor-wrap active">
                     <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>
@@ -102,7 +102,7 @@
 
                 <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>

resources/views/settings/index.blade.php

@@ -3,7 +3,7 @@
 @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>

resources/views/settings/maintenance.blade.php

@@ -3,7 +3,7 @@
 @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>

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