Amended page save button layout to fix z-index issues

- Added a new mobile save button instead of trying to reposition the
original.
- Also recuced the point where the editor top toolbar will collapse to
become x-scrollable.

Fixes #1424

resources/assets/sass/_layout.scss

@@ -59,7 +59,7 @@
 }
 
 @include smaller-than($m) {
-  .grid.third {
+  .grid.third:not(.no-break) {
     grid-template-columns: 1fr 1fr;
   }
   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
@@ -81,7 +81,7 @@
 }
 
 @include smaller-than($s) {
-  .grid.third {
+  .grid.third:not(.no-break) {
     grid-template-columns: 1fr;
   }
 }

resources/assets/sass/_pages.scss

@@ -20,11 +20,10 @@
   }
 }
 
-@include smaller-than($m) {
+@include smaller-than($s) {
   .page-edit-toolbar {
     overflow-x: scroll;
     overflow-y: visible;
-    z-index: 12;
   }
   .page-edit-toolbar .grid.third {
     display: block;
@@ -35,8 +34,7 @@
   }
 }
 
-@include smaller-than($m) {
-  .page-edit-toolbar #save-button {
+.page-save-mobile-button {
   position: fixed;
   z-index: 30;
   border-radius: 50%;
@@ -47,12 +45,10 @@
   bottom: $-s;
   box-shadow: $bs-hover;
   background-color: currentColor;
+  text-align: center;
   svg {
     fill: #FFF;
-    }
-    span {
-      display: none;
-    }
+    margin-right: 0;
   }
 }
 

resources/views/pages/form.blade.php

@@ -12,7 +12,7 @@
 
     {{--Header Bar--}}
     <div class="primary-background-light toolbar page-edit-toolbar">
-        <div class="grid third v-center">
+        <div class="grid third no-break v-center">
 
             <div class="action-buttons text-left px-m py-xs">
                 <a href="{{ back()->getTargetUrl() }}" class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
@@ -49,7 +49,7 @@
                     <span>{{-- Prevents button jumping on menu show --}}</span>
                 </div>
 
-                <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>
+                <button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
             </div>
         </div>
     </div>
@@ -120,4 +120,6 @@
         @endif
 
     </div>
+
+    <button type="submit" id="save-button-mobile" title="{{ trans('entities.pages_save') }}" class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
 </div>