diff --git a/js/forum/src/components/CommentPost.js b/js/forum/src/components/CommentPost.js index f7ce0533d..0a81c97e1 100644 --- a/js/forum/src/components/CommentPost.js +++ b/js/forum/src/components/CommentPost.js @@ -49,8 +49,7 @@ export default class CommentPost extends Post { ?
: m.trust(this.props.post.contentHtml())}
, - , - + ]; } @@ -185,13 +184,4 @@ export default class CommentPost extends Post { footerItems() { return new ItemList(); } - - /** - * Build an item list for the post's actions. - * - * @return {ItemList} - */ - actionItems() { - return new ItemList(); - } } diff --git a/js/forum/src/components/Post.js b/js/forum/src/components/Post.js index d86151089..d91728233 100644 --- a/js/forum/src/components/Post.js +++ b/js/forum/src/components/Post.js @@ -2,6 +2,8 @@ import Component from 'flarum/Component'; import SubtreeRetainer from 'flarum/utils/SubtreeRetainer'; import Dropdown from 'flarum/components/Dropdown'; import PostControls from 'flarum/utils/PostControls'; +import listItems from 'flarum/helpers/listItems'; +import ItemList from 'flarum/utils/ItemList'; /** * The `Post` component displays a single post. The basic post template just @@ -45,15 +47,21 @@ export default class Post extends Component { return (
- {controls.length ? Dropdown.component({ - children: controls, - className: 'Post-controls', - buttonClassName: 'Button Button--icon Button--flat', - menuClassName: 'Dropdown-menu--right', - icon: 'ellipsis-v' - }) : ''} - {this.content()} +
); })()} @@ -78,4 +86,13 @@ export default class Post extends Component { content() { return ''; } + + /** + * Build an item list for the post's actions. + * + * @return {ItemList} + */ + actionItems() { + return new ItemList(); + } } diff --git a/less/forum/DiscussionPage.less b/less/forum/DiscussionPage.less index 5c95be9ae..5ec63c81f 100644 --- a/less/forum/DiscussionPage.less +++ b/less/forum/DiscussionPage.less @@ -54,7 +54,7 @@ @media @tablet-up { .DiscussionPage-stream { - margin-right: 200px; + margin-right: 225px; } } diff --git a/less/forum/Post.less b/less/forum/Post.less index 2a1d6d2fa..2ce55d9e0 100644 --- a/less/forum/Post.less +++ b/less/forum/Post.less @@ -2,26 +2,22 @@ // Posts .Post { - padding: 30px 20px; + padding: 20px 20px 25px; margin: -1px -20px; transition: 0.2s box-shadow, top 0.2s, opacity 0.2s; position: relative; top: 0; border-radius: @border-radius; + .clearfix(); &.editing { top: 5px; opacity: 0.5; } } -.Post-controls { - float: right; - margin-top: -8px; - margin-left: 10px; -} .Post-header { - margin-bottom: 10px; + margin-bottom: 15px; color: @muted-color; &, a { @@ -50,7 +46,7 @@ h3, h3 a { color: @heading-color; font-weight: bold; - font-size: 15px; + font-size: 14px; } .UserCard { @@ -147,6 +143,9 @@ .Post-header, .Post-header a, .PostUser h3, .PostUser h3 a { color: @muted-more-color; } + &:not(.revealContent) .Post-header { + margin-bottom: 0; + } .Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { position: absolute; visibility: hidden; @@ -208,7 +207,7 @@ } } .EventPost-info { - font-size: 15px; + font-size: 14px; } .DiscussionRenamedPost-old, .DiscussionRenamedPost-new { @@ -234,6 +233,8 @@ } } .Post-footer { + margin-top: 20px; + > ul { > li { margin-bottom: 5px; @@ -245,18 +246,25 @@ } } .Post-actions { - margin-top: 10px; + float: right; + margin-top: -10px; .transition(opacity 0.2s); + .EventPost &, .Post--hidden & { + margin-top: -27px; + } + @media @tablet-up { - margin-bottom: -10px; + margin-bottom: -15px; opacity: 0; } > ul { > li { - margin-right: 10px; + margin-right: 0; + margin-left: -5px; display: inline-block; + vertical-align: top; } } .Post:hover & { @@ -292,14 +300,6 @@ } @media @phone { - .Post-controls { - margin-top: -6px; - margin-right: -8px; - - .Dropdown-toggle { - opacity: 0.5; - } - } .Post-header { .Avatar { .Avatar--size(32px); @@ -328,33 +328,27 @@ } } +@avatar-column-width: 85px; + @media @tablet-up { .Post { - padding-left: 20px + 90px; - - .Post-controls { - opacity: 0; - transition: opacity 0.2s; - } - &:hover .Post-controls, .Post-controls.open { - opacity: 1; - } + padding-left: 20px + @avatar-column-width; } .PostUser-avatar { - margin-left: -90px; + margin-left: -@avatar-column-width; float: left; .Avatar--size(64px); } .PostUser-badges { float: left; position: relative; - margin-left: -85px; + margin-left: -@avatar-column-width + 5px; margin-top: -3px; width: 64px; } .EventPost-icon { text-align: right; - margin-left: -90px; + margin-left: -@avatar-column-width; width: 64px; font-size: 22px; }