IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/widgets/topic-admin-menu.js.es6
View File

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

12
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -39,6 +39,18 @@
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
width: 100%; width: 100%;
padding: 0; 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 { .header {
padding: 10px 0 0 10px; padding: 10px 0 0 10px;