FIX: visual improvements to admin topic menu (#8638)

* 10 px padding from the bottom to look better on rounded phones
* dark cloak on other elements to emphasize admin menu
* slide up animation
This commit is contained in:
Krzysztof Kotlarek 2019-12-31 11:52:25 +11:00 committed by GitHub
parent d048464b03
commit 764e01b597
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 0 deletions

View File

@ -73,6 +73,11 @@ createWidget("topic-admin-menu-button", {
hideAdminMenu() {
this.state.expanded = false;
this.state.position = null;
if (this.site.mobileView) {
$("#topic-progress-wrapper").css("z-index", "");
$(".header-cloak").hide();
}
},
showAdminMenu(e) {
@ -98,6 +103,12 @@ createWidget("topic-admin-menu-button", {
if (this.attrs.fixed) {
position.left += $button.width() - 203;
}
if (this.site.mobileView) {
$("#topic-progress-wrapper").css("z-index", "auto");
$(".header-cloak").show();
}
this.state.position = position;
},

View File

@ -39,6 +39,18 @@
@include breakpoint(mobile-extra-large) {
width: 100%;
padding: 0;
padding-bottom: env(safe-area-inset-bottom);
z-index: 1000;
@keyframes slideUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
animation: slideUp 0.3s;
.header {
padding: 10px 0 0 10px;