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

diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss
index 9bb4e1c70dcba36a6351b97e153a44090de80cb2..4be6edb56f3632b2b2d76f9cc1627f4b8328c188 100644 (file)
--- a/resources/assets/sass/_layout.scss
+++ b/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;
   }
 }

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index d02f59e37665bc3c627a3804244fdaafc3363dce..c58f6ef476e55cac1498e5dc41ba09b4ac21ecc7 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/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,24 +34,21 @@
   }
 }
 
-@include smaller-than($m) {
-  .page-edit-toolbar #save-button {
-    position: fixed;
-    z-index: 30;
-    border-radius: 50%;
-    width: 56px;
-    height: 56px;
-    font-size: 24px;
-    right: $-m;
-    bottom: $-s;
-    box-shadow: $bs-hover;
-    background-color: currentColor;
-    svg {
-      fill: #FFF;
-    }
-    span {
-      display: none;
-    }
+.page-save-mobile-button {
+  position: fixed;
+  z-index: 30;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  font-size: 24px;
+  right: $-m;
+  bottom: $-s;
+  box-shadow: $bs-hover;
+  background-color: currentColor;
+  text-align: center;
+  svg {
+    fill: #FFF;
+    margin-right: 0;
   }
 }
 

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 34ded389ca9b9a9bdd1214eb796a8575925cedc3..4a473e53636016c3bca1ae671d18d86ffe0131de 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/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>
\ No newline at end of file