Merge branch 'compact-posts'

js/forum/src/components/CommentPost.js

@@ -49,8 +49,7 @@ 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>,
+      <footer className="Post-footer"><ul>{listItems(this.footerItems().toArray())}</ul></footer>
-      <aside className="Post-actions"><ul>{listItems(this.actionItems().toArray())}</ul></aside>
     ];
   }
 
@@ -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();
-  }
 }

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 (
             <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()}
+              <aside className="Post-actions">
+                <ul>
+                  {listItems(this.actionItems().toArray())}
+                  {controls.length ? <li>
+                    <Dropdown
+                      className="Post-controls"
+                      buttonClassName="Button Button--icon Button--flat"
+                      menuClassName="Dropdown-menu--right"
+                      icon="ellipsis-h">
+                      {controls}
+                    </Dropdown>
+                  </li> : ''}
+                </ul>
+              </aside>
             </div>
           );
         })()}
@@ -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();
+  }
 }

less/forum/DiscussionPage.less

@@ -54,7 +54,7 @@
 
 @media @tablet-up {
   .DiscussionPage-stream {
-    margin-right: 200px;
+    margin-right: 225px;
   }
 }
 

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;
+    padding-left: 20px + @avatar-column-width;
-
-    .Post-controls {
-      opacity: 0;
-      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;
   }