diff --git a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 index 1598eb1ae..3b70d394d 100644 --- a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 +++ b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 @@ -9,6 +9,32 @@ import PinnedButton from 'discourse/components/pinned-button'; import TopicNotificationsButton from 'discourse/components/topic-notifications-button'; import DiscourseContainerView from 'discourse/views/container'; +const MainPanel = Discourse.ContainerView.extend({ + elementId: 'topic-footer-main-buttons', + topicBinding: 'controller.content', + + init() { + this._super(); + + const topic = this.get('topic'); + if (!topic.get('isPrivateMessage')) { + // We hide some controls from private messages + if (this.get('topic.details.can_invite_to')) { + this.attachViewClass(InviteReplyButton); + } + this.attachViewClass(BookmarkButton); + this.attachViewClass(ShareButton); + if (this.get('topic.details.can_flag_topic')) { + this.attachViewClass(FlagTopicButton); + } + } + if (this.get('topic.details.can_create_post')) { + this.attachViewClass(ReplyButton); + } + } + +}); + export default DiscourseContainerView.extend({ elementId: 'topic-footer-buttons', topicBinding: 'controller.content', @@ -26,20 +52,9 @@ export default DiscourseContainerView.extend({ if (Discourse.User.currentProp("staff")) { this.attachViewClass(TopicAdminMenuButton); } - if (!topic.get('isPrivateMessage')) { - // We hide some controls from private messages - if (this.get('topic.details.can_invite_to')) { - this.attachViewClass(InviteReplyButton); - } - this.attachViewClass(BookmarkButton); - this.attachViewClass(ShareButton); - if (this.get('topic.details.can_flag_topic')) { - this.attachViewClass(FlagTopicButton); - } - } - if (this.get('topic.details.can_create_post')) { - this.attachViewClass(ReplyButton); - } + + this.attachViewWithArgs(viewArgs, MainPanel); + this.attachViewWithArgs(viewArgs, PinnedButton); this.attachViewWithArgs(viewArgs, TopicNotificationsButton); diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index f63cadd22..c3929fd25 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -228,40 +228,36 @@ a:hover.reply-new { } @media all -and (max-width : 940px) { +and (max-width : 1000px) { #topic-progress, #topic-progress-expanded { - left: 295px; + right: 0; + left: 0; } -} - - -@media all -and (max-width : 870px) { - - #topic-progress, #topic-progress-expanded { - left: 210px; - } - -} - - -@media all -and (max-width : 724px) { #topic-progress-wrapper { - right: 0; - #topic-progress, #topic-progress-expanded { left: auto; right: 145px; } + right: 160px; } + #topic-progress-wrapper.docked { + right: 152px; + } + + #topic-footer-main-buttons { + max-width: 70%; + } } + @media all and (max-width : 485px) { #topic-progress-wrapper.docked { display: none; - } + } + #topic-footer-main-buttons { + max-width: 100%; + } }