mirror of
https://github.com/flarum/framework.git
synced 2025-02-08 14:42:01 +08:00
1d6616a419
Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
35 lines
758 B
JavaScript
Executable File
35 lines
758 B
JavaScript
Executable File
import Ember from 'ember';
|
|
|
|
/**
|
|
The back/pin button group in the top-left corner of Flarum's interface.
|
|
*/
|
|
export default Ember.Component.extend({
|
|
classNames: ['back-button'],
|
|
classNameBindings: ['active', 'className'],
|
|
|
|
active: Ember.computed.or('target.paneIsShowing', 'target.paneIsPinned'),
|
|
|
|
mouseEnter: function() {
|
|
this.get('target').send('showPane');
|
|
},
|
|
|
|
mouseLeave: function() {
|
|
this.get('target').send('hidePane');
|
|
},
|
|
|
|
actions: {
|
|
back: function() {
|
|
this.get('target').send('transitionFromBackButton');
|
|
this.set('target', null);
|
|
},
|
|
|
|
togglePinned: function() {
|
|
this.get('target').send('togglePinned');
|
|
},
|
|
|
|
toggleDrawer: function() {
|
|
this.sendAction('toggleDrawer');
|
|
}
|
|
}
|
|
});
|