Restyle posts to be more compact, relocate controls

framework/core/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 [
       <header className="Post-header"><ul>{listItems(this.headerItems().toArray())}</ul></header>,
       <div className="Post-body">
@@ -49,8 +53,17 @@ export default class CommentPost extends Post {
           ? <div className="Post-preview" config={this.configPreview.bind(this)}/>
           : m.trust(this.props.post.contentHtml())}
       </div>,
-      <footer className="Post-footer"><ul>{listItems(this.footerItems().toArray())}</ul></footer>,
+      <aside className="Post-actions"><ul>
-      <aside className="Post-actions"><ul>{listItems(this.actionItems().toArray())}</ul></aside>
+        {controls.length ? Dropdown.component({
+                children: controls,
+                className: 'Post-controls',
+                buttonClassName: 'Button Button--icon Button--flat',
+                menuClassName: 'Dropdown-menu--right',
+                icon: 'ellipsis-h'
+              }) : ''}
+        {listItems(this.actionItems().toArray())}
+      </ul></aside>,
+      <footer className="Post-footer"><ul>{listItems(this.footerItems().toArray())}</ul></footer>
     ];
   }
 

framework/core/js/forum/src/components/Post.js

@@ -45,13 +45,7 @@ export default class Post extends Component {
 
           return (
             <div>
-              {controls.length ? Dropdown.component({
+
-                children: controls,
-                className: 'Post-controls',
-                buttonClassName: 'Button Button--icon Button--flat',
-                menuClassName: 'Dropdown-menu--right',
-                icon: 'ellipsis-v'
-              }) : ''}
 
               {this.content()}
             </div>

framework/core/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-top: -8px;
-  margin-left: 10px;
+  // 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 {
+    // .Post-controls {
-      opacity: 0;
+    //   opacity: 0.5;
-      transition: opacity 0.2s;
+    //   transition: opacity 0.2s;
-    }
+    // }
-    &:hover .Post-controls, .Post-controls.open {
+    // &:hover .Post-controls, .Post-controls.open {
-      opacity: 1;
+    //   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;
   }