mirror of
https://github.com/flarum/framework.git
synced 2025-01-24 13:35:16 +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
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
import Ember from 'ember';
|
|
|
|
var $ = Ember.$;
|
|
|
|
/**
|
|
Component for the meta part of a post header. Displays the time, and when
|
|
clicked, shows a dropdown containing more information about the post
|
|
(number, full time, permalink).
|
|
*/
|
|
export default Ember.Component.extend({
|
|
tagName: 'li',
|
|
classNames: ['dropdown'],
|
|
layoutName: 'components/discussion/post-header/meta',
|
|
|
|
// Construct a permalink by looking up the router in the container, and
|
|
// using it to generate a link to this post within its discussion.
|
|
permalink: Ember.computed('post.discusion', 'post.number', function() {
|
|
var router = this.get('controller').container.lookup('router:main');
|
|
var path = router.generate('discussion', this.get('post.discussion'), {queryParams: {start: this.get('post.number')}});
|
|
return window.location.origin+path;
|
|
}),
|
|
|
|
didInsertElement: function() {
|
|
// When the dropdown menu is shown, select the contents of the permalink
|
|
// input so that the user can quickly copy the URL.
|
|
var component = this;
|
|
this.$('a').click(function() {
|
|
setTimeout(function() { component.$('.permalink').select(); }, 1);
|
|
});
|
|
|
|
// Prevent clicking on the input from closing it.
|
|
this.$('.permalink').click(function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
});
|