Editors: Adjusted new design for mobile and dark mode

Tested new design across FF, Chrome, and Gnome web (webkit)

Author: ssddanbrown

resources/js/components/editor-toolbox.js

@@ -8,6 +8,7 @@ export class EditorToolbox extends Component {
         this.buttons = this.$manyRefs.tabButton;
         this.contentElements = this.$manyRefs.tabContent;
         this.toggleButton = this.$refs.toggle;
+        this.editorWrapEl = this.container.closest('.page-editor');
 
         this.setupListeners();
 
@@ -30,8 +31,9 @@ export class EditorToolbox extends Component {
 
     toggle() {
         this.container.classList.toggle('open');
-        const expanded = this.container.classList.contains('open') ? 'true' : 'false';
-        this.toggleButton.setAttribute('aria-expanded', expanded);
+        const isOpen = this.container.classList.contains('open');
+        this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        this.editorWrapEl.classList.toggle('toolbox-open', isOpen);
     }
 
     setActiveTab(tabName, openToolbox = false) {

resources/sass/_pages.scss

@@ -23,7 +23,7 @@
   width: 100%;
   border-radius: 8px;
   box-shadow: $bs-card;
-  background-color: #FFF;
+  @include lightDark(background-color, #FFF, #333)
 }
 
 .page-edit-toolbar {
@@ -34,13 +34,23 @@
   align-items: center;
 }
 
-.page-editor-wysiwyg .page-edit-toolbar,
-.page-editor-wysiwyg .page-editor-page-area {
-  max-width: 1140px;
+@include larger-than($xxl) {
+  .page-editor-wysiwyg .page-edit-toolbar,
+  .page-editor-wysiwyg .page-editor-page-area {
+    max-width: 1140px;
+  }
+
+  .page-editor-wysiwyg .floating-toolbox {
+    position: absolute;
+  }
 }
 
-.page-editor-markdown .floating-toolbox {
-  position: relative;
+@include smaller-than($m) {
+  .page-edit-toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 }
 
 .title-input.page-title {
@@ -88,8 +98,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
     overflow-x: scroll;
     overflow-y: visible;
   }
-  .page-edit-toolbar .grid.third {
-    display: block;
+  .page-edit-toolbar {
     white-space: nowrap;
     > div {
       display: inline-block;
@@ -101,10 +110,10 @@ body.tox-fullscreen, body.markdown-fullscreen {
   position: fixed;
   z-index: 30;
   border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  font-size: 24px;
-  right: $-m;
+  width: 52px;
+  height: 52px;
+  font-size: 26px;
+  right: $-xs;
   bottom: $-s;
   box-shadow: $bs-hover;
   background-color: currentColor;
@@ -202,7 +211,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
 }
 
-// Attribute form
+// Page editor sidebar toolbox
 .floating-toolbox {
   @include lightDark(background-color, #FFF, #222);
   overflow: hidden;
@@ -214,7 +223,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   box-shadow: $bs-card;
   margin-bottom: auto;
   margin-left: $-l;
-  position: absolute;
+  position: relative;
   &.open {
     position: relative;
     right: 0;
@@ -242,6 +251,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
   .tabs {
     border-right: 1px solid #DDD;
+    @include lightDark(border-right-color, #DDD, #000);
     width: 40px;
     flex: 0 1 auto;
     margin-right: -1px;
@@ -300,6 +310,33 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
 }
 
+@include smaller-than($xxl) {
+  .floating-toolbox {
+    margin-left: $-s;
+  }
+}
+
+@include smaller-than($s) {
+  .page-editor-page-area-wrap {
+    margin: 4px !important;
+  }
+  .floating-toolbox {
+    margin-left: 4px;
+  }
+  .floating-toolbox .tabs {
+    width: 32px;
+  }
+  .floating-toolbox .tabs-inner > button {
+    font-size: 12px;
+  }
+  .page-edit-toolbar {
+    padding-block: 0 !important;
+  }
+  .page-editor.toolbox-open .page-editor-page-area {
+    display: none;
+  }
+}
+
 .toolbox-tab-content {
   display: none;
   overflow-y: auto;

resources/views/pages/parts/form.blade.php

@@ -20,7 +20,7 @@
     {{--Header Toolbar--}}
     @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
 
-    <div class="flex flex-fill mx-s mb-s justify-center">
+    <div class="flex flex-fill mx-s mb-s justify-center page-editor-page-area-wrap">
         <div class="page-editor-page-area flex-container-column flex flex-fill">
             {{--Title input--}}
             <div class="title-input page-title clearfix">