mirror of
https://github.com/flarum/framework.git
synced 2025-05-23 15:19:56 +08:00
Significantly improve mobile UX
Most of #137 done. - Use FastClick to make everything feel more responsive - Use transforms for animations to make them silky smooth - Style the drawer the same as the header to keep things simple - Revert to fixed composer, but allow it to be minimised - Add a separate notifications page for mobile so it’s easy to go back - Add indicator to the menu button when there are unread notifications - Close the drawer when navigating away - Make dropdowns/modals scrollable - Many other mobile tweaks and bug fixes Didn’t take much care to keep CSS clean, due to #103
This commit is contained in:
@ -18,15 +18,14 @@ export default class BackButton extends Component {
|
||||
m('button.btn.btn-default.btn-icon.back', {onclick: history.back.bind(history)}, icon('chevron-left icon')),
|
||||
pane && pane.active ? m('button.btn.btn-default.btn-icon.pin'+(pane.pinned ? '.active' : ''), {onclick: pane.togglePinned.bind(pane)}, icon('thumb-tack icon')) : '',
|
||||
]) : (this.props.drawer ? [
|
||||
m('button.btn.btn-default.btn-icon.drawer-toggle', {onclick: this.toggleDrawer.bind(this)}, icon('reorder icon'))
|
||||
m('button.btn.btn-default.btn-icon.drawer-toggle', {
|
||||
onclick: app.drawer.toggle.bind(app.drawer),
|
||||
className: app.session.user() && app.session.user().unreadNotificationsCount() ? 'unread-notifications' : ''
|
||||
}, icon('reorder icon'))
|
||||
] : ''));
|
||||
}
|
||||
|
||||
onload(element, isInitialized, context) {
|
||||
context.retain = true;
|
||||
}
|
||||
|
||||
toggleDrawer() {
|
||||
$('body').toggleClass('drawer-open');
|
||||
}
|
||||
}
|
||||
|
@ -21,7 +21,7 @@ export default class DropdownSplit extends Component {
|
||||
|
||||
return m('div', {className: 'dropdown dropdown-split btn-group item-count-'+(items.length)+' '+this.props.className}, [
|
||||
ActionButton.component(buttonProps),
|
||||
m('a[href=javascript:;]', {className: 'dropdown-toggle '+this.props.buttonClass, 'data-toggle': 'dropdown'}, [
|
||||
m('a[href=javascript:;]', {className: 'dropdown-toggle btn-icon '+this.props.buttonClass, 'data-toggle': 'dropdown'}, [
|
||||
icon('caret-down icon-caret'),
|
||||
icon((this.props.icon || 'ellipsis-v')+' icon'),
|
||||
]),
|
||||
|
@ -4,7 +4,7 @@ import icon from 'flarum/helpers/icon'
|
||||
export default class NavItem extends Component {
|
||||
view() {
|
||||
var active = this.constructor.active(this.props);
|
||||
return m('li'+(active ? '.active' : ''), m('a', {
|
||||
return m('li'+(active ? '.active' : ''), m('a.has-icon', {
|
||||
href: this.props.href,
|
||||
onclick: this.props.onclick,
|
||||
config: m.route
|
||||
|
Reference in New Issue
Block a user