Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-25 11:45:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Amended page save button layout to fix z-index issues

Browse Source 
- 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
This commit is contained in:
Dan Brown 2019-05-19 15:30:58 +01:00
parent 0c3dc50cd9
commit e1e1ea6099
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/sass/_layout.scss
View File

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

12
resources/assets/sass/_pages.scss
View File

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

6
resources/views/pages/form.blade.php
View File

@ -12,7 +12,7 @@
{{--Header Bar--}} {{--Header Bar--}}
<div class="primary-background-light toolbar page-edit-toolbar"> <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"> <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> <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> <span>{{-- Prevents button jumping on menu show --}}</span>
</div> </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> </div>
</div> </div>
@ -120,4 +120,6 @@
@endif @endif
</div> </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> </div>