FEATURE: Topic admin menu sticks to bottom on mobile. (#8620)

Our current topic admin menu is not always fully visible on a mobile
device, therefore some options are difficult to click.

To solve this issue, we can display the admin menu on the bottom of the
screen on mobile devices.
This commit is contained in:
Krzysztof Kotlarek 2019-12-30 08:15:46 +11:00 committed by GitHub
parent 041067cc21
commit b725252cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 6 deletions

View File

@ -39,14 +39,15 @@ createWidget("topic-admin-menu-button", {
fixed: attrs.fixed,
topic: attrs.topic,
openUpwards: attrs.openUpwards,
rightSide: attrs.rightSide,
rightSide: !this.site.mobileView && attrs.rightSide,
actionButtons: []
});
// We don't show the button when expanded on the right side
// We don't show the button when expanded on the right side on desktop
if (
menu.attrs.actionButtons.length &&
!(attrs.rightSide && state.expanded)
(menu.attrs.actionButtons.length &&
!(attrs.rightSide && state.expanded)) ||
this.site.mobileView
) {
result.push(
this.attach("button", {
@ -250,7 +251,7 @@ export default createWidget("topic-admin-menu", {
buildAttributes(attrs) {
let { top, left, outerHeight } = attrs.position;
const position = attrs.fixed ? "fixed" : "absolute";
const position = attrs.fixed || this.site.mobileView ? "fixed" : "absolute";
if (attrs.rightSide) {
return;
@ -265,6 +266,11 @@ export default createWidget("topic-admin-menu", {
bottom = bottom - (documentHeight - mainHeight) - outerHeight;
}
if (this.site.mobileView) {
bottom = 0;
left = 0;
}
return {
style: `position: ${position}; bottom: ${bottom}px; left: ${left}px;`
};
@ -287,7 +293,17 @@ export default createWidget("topic-admin-menu", {
this.state
);
return [
h("div.header", [
h("h3", I18n.t("topic.actions.title")),
h(
"div",
this.attach("button", {
action: "clickOutside",
icon: "close",
className: "close-button"
})
)
]),
h(
"ul",
attrs.actionButtons

View File

@ -29,6 +29,30 @@
width: 100%;
margin-bottom: 5px;
}
.header {
.close-button {
display: none;
}
}
@include breakpoint(mobile-extra-large) {
width: 100%;
padding: 0;
.header {
padding: 10px 0 0 10px;
display: flex;
justify-content: space-between;
.close-button {
display: block;
background: transparent;
}
}
ul {
margin-top: 0;
}
}
}
.modal-body.feature-topic {