diff --git a/js/forum/src/components/CommentPost.js b/js/forum/src/components/CommentPost.js index f7ce0533d..ef40cdb1c 100644 --- a/js/forum/src/components/CommentPost.js +++ b/js/forum/src/components/CommentPost.js @@ -10,6 +10,8 @@ import Composer from 'flarum/components/Composer'; import ItemList from 'flarum/utils/ItemList'; import listItems from 'flarum/helpers/listItems'; import Button from 'flarum/components/Button'; +import Dropdown from 'flarum/components/Dropdown'; +import PostControls from 'flarum/utils/PostControls'; /** * The `CommentPost` component displays a standard `comment`-typed post. This @@ -42,6 +44,8 @@ export default class CommentPost extends Post { } content() { + const controls = PostControls.controls(this.props.post, this).toArray(); + return [
,
@@ -49,8 +53,17 @@ export default class CommentPost extends Post { ?
: m.trust(this.props.post.contentHtml())}
, - , - + , + ]; } diff --git a/js/forum/src/components/Post.js b/js/forum/src/components/Post.js index d86151089..85e34a398 100644 --- a/js/forum/src/components/Post.js +++ b/js/forum/src/components/Post.js @@ -45,13 +45,7 @@ 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()}
diff --git a/less/forum/Post.less b/less/forum/Post.less index 31201f8bd..61e83803b 100644 --- a/less/forum/Post.less +++ b/less/forum/Post.less @@ -2,12 +2,13 @@ // 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; @@ -16,12 +17,12 @@ } .Post-controls { float: right; - margin-top: -8px; - margin-left: 10px; + // margin-top: -8px; + // margin-left: 10px; } .Post-header { - margin-bottom: 10px; + margin-bottom: 15px; color: @muted-color; &, a { @@ -50,7 +51,7 @@ h3, h3 a { color: @heading-color; font-weight: bold; - font-size: 15px; + font-size: 14px; } .UserCard { @@ -234,6 +235,8 @@ } } .Post-footer { + margin-top: 20px; + > ul { > li { margin-bottom: 5px; @@ -245,17 +248,19 @@ } } .Post-actions { - margin-top: 10px; + float: right; + margin-top: -3px; .transition(opacity 0.2s); @media @tablet-up { margin-bottom: -10px; - opacity: 0; + opacity: 0.5; } > ul { > li { - margin-right: 10px; + margin-right: 0; + margin-left: -5px; display: inline-block; } } @@ -328,33 +333,35 @@ } } +@avatar-column-width: 85px; + @media @tablet-up { .Post { - padding-left: 20px + 90px; + padding-left: 20px + @avatar-column-width; - .Post-controls { - opacity: 0; - transition: opacity 0.2s; - } - &:hover .Post-controls, .Post-controls.open { - opacity: 1; - } + // .Post-controls { + // opacity: 0.5; + // transition: opacity 0.2s; + // } + // &:hover .Post-controls, .Post-controls.open { + // opacity: 1; + // } } .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; }