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:
parent
d048464b03
commit
764e01b597
|
@ -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;
|
||||
},
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue