UX: Don't display the timeline on thinner browser widths

This commit is contained in:
Robin Ward 2016-05-25 13:29:47 -04:00
parent 288b407bd1
commit 1584033d7a
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
6 changed files with 47 additions and 22 deletions

View File

@ -0,0 +1,26 @@
export default Ember.Component.extend({
showTimeline: null,
_checkSize() {
const width = $(window).width();
this.set('showTimeline', width > 1012);
},
didInsertElement() {
this._super();
if (!this.site.mobileView) {
$(window).on('resize.discourse-topic-navigation', () => this._checkSize());
this._checkSize();
} else {
this.set('showTimeline', false);
}
},
willDestroyElement() {
this._super();
if (!this.site.mobileView) {
$(window).off('resize.discourse-topic-navigation');
}
}
});

View File

@ -15,9 +15,9 @@ export default Ember.Component.extend({
(this.get('delegated') || []).forEach(m => this.set(m, m));
},
@computed('userWantsToJump')
hidden(userWantsToJump) {
return !userWantsToJump && !this.site.mobileView;
@computed('userWantsToJump', 'showTimeline')
hidden(userWantsToJump, showTimeline) {
return !userWantsToJump && showTimeline;
},
keyboardTrigger(kbdEvent) {

View File

@ -42,16 +42,6 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
'replyToPost'
],
@computed
showTimeline() {
return !this.site.mobileView;
},
@computed('showTimeline')
loadingClass(showTimeline) {
return showTimeline ? 'timeline-loading' : undefined;
},
_titleChanged: function() {
const title = this.get('model.title');
if (!Ember.isEmpty(title)) {

View File

@ -0,0 +1,6 @@
export default Ember.Mixin.create({
init() {
this._super();
(this.get('delegated') || []).forEach(m => this.set(m, m));
},
});

View File

@ -0,0 +1 @@
{{yield showTimeline}}

View File

@ -71,16 +71,18 @@
<section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
<div class="posts-wrapper">
{{#if showTimeline}}
{{topic-timeline topic=model
enteredIndex=enteredIndex
loading=model.postStream.loading
delegated=topicDelegated}}
{{else}}
{{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
{{/if}}
{{#topic-navigation as |showTimeline|}}
{{#if showTimeline}}
{{topic-timeline topic=model
enteredIndex=enteredIndex
loading=model.postStream.loading
delegated=topicDelegated}}
{{else}}
{{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
{{/if}}
{{topic-progress topic=model delegated=topicDelegated}}
{{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
{{/topic-navigation}}
{{conditional-loading-spinner condition=model.postStream.loadingAbove}}