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;
}