mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 19:56:05 +00:00
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
This commit is contained in:
parent
0c3dc50cd9
commit
e1e1ea6099
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,24 +34,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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%;
|
width: 56px;
|
||||||
width: 56px;
|
height: 56px;
|
||||||
height: 56px;
|
font-size: 24px;
|
||||||
font-size: 24px;
|
right: $-m;
|
||||||
right: $-m;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user