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 [
{listItems(this.headerItems().toArray())}
,
@@ -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;
}