From 26d1cb7e9fc51a18f52d16cd4e58c15d1c1ad605 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Tue, 8 Sep 2015 10:29:00 +0930 Subject: [PATCH 1/4] Restyle posts to be more compact, relocate controls --- .../js/forum/src/components/CommentPost.js | 17 ++++++- .../core/js/forum/src/components/Post.js | 8 +--- framework/core/less/forum/Post.less | 45 +++++++++++-------- 3 files changed, 42 insertions(+), 28 deletions(-) diff --git a/framework/core/js/forum/src/components/CommentPost.js b/framework/core/js/forum/src/components/CommentPost.js index f7ce0533d..ef40cdb1c 100644 --- a/framework/core/js/forum/src/components/CommentPost.js +++ b/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 [
,
@@ -49,8 +53,17 @@ export default class CommentPost extends Post { ?
: m.trust(this.props.post.contentHtml())}
, -
    {listItems(this.footerItems().toArray())}
, - + , +
    {listItems(this.footerItems().toArray())}
]; } diff --git a/framework/core/js/forum/src/components/Post.js b/framework/core/js/forum/src/components/Post.js index d86151089..85e34a398 100644 --- a/framework/core/js/forum/src/components/Post.js +++ b/framework/core/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/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index 31201f8bd..61e83803b 100644 --- a/framework/core/less/forum/Post.less +++ b/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-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; } From 86af56f472823c8dcfcb7847881934544b841b2c Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Tue, 8 Sep 2015 11:13:28 +0930 Subject: [PATCH 2/4] Add more breathing room between posts and sidebar --- framework/core/less/forum/DiscussionPage.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framework/core/less/forum/DiscussionPage.less b/framework/core/less/forum/DiscussionPage.less index 5c95be9ae..5ec63c81f 100644 --- a/framework/core/less/forum/DiscussionPage.less +++ b/framework/core/less/forum/DiscussionPage.less @@ -54,7 +54,7 @@ @media @tablet-up { .DiscussionPage-stream { - margin-right: 200px; + margin-right: 225px; } } From 7c2fbb37b5cb1580214e8f11ab02b2577bb9a6ee Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Tue, 8 Sep 2015 11:13:35 +0930 Subject: [PATCH 3/4] Reduce event post font size --- framework/core/less/forum/Post.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index 61e83803b..60c4f7328 100644 --- a/framework/core/less/forum/Post.less +++ b/framework/core/less/forum/Post.less @@ -209,7 +209,7 @@ } } .EventPost-info { - font-size: 15px; + font-size: 14px; } .DiscussionRenamedPost-old, .DiscussionRenamedPost-new { From 054159c27c2d1744efbfa39358ab19cc85cd3df4 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Tue, 15 Sep 2015 12:42:03 +0930 Subject: [PATCH 4/4] Clean up new post layout --- .../js/forum/src/components/CommentPost.js | 23 ------------ .../core/js/forum/src/components/Post.js | 27 ++++++++++++-- framework/core/less/forum/Post.less | 35 ++++++------------- 3 files changed, 36 insertions(+), 49 deletions(-) diff --git a/framework/core/js/forum/src/components/CommentPost.js b/framework/core/js/forum/src/components/CommentPost.js index ef40cdb1c..0a81c97e1 100644 --- a/framework/core/js/forum/src/components/CommentPost.js +++ b/framework/core/js/forum/src/components/CommentPost.js @@ -10,8 +10,6 @@ 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 @@ -44,8 +42,6 @@ export default class CommentPost extends Post { } content() { - const controls = PostControls.controls(this.props.post, this).toArray(); - return [
    {listItems(this.headerItems().toArray())}
,
@@ -53,16 +49,6 @@ export default class CommentPost extends Post { ?
: m.trust(this.props.post.contentHtml())}
, - ,
    {listItems(this.footerItems().toArray())}
]; } @@ -198,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/framework/core/js/forum/src/components/Post.js b/framework/core/js/forum/src/components/Post.js index 85e34a398..d91728233 100644 --- a/framework/core/js/forum/src/components/Post.js +++ b/framework/core/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,9 +47,21 @@ export default class Post extends Component { return (
- - {this.content()} +
); })()} @@ -72,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/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index fa84e43fe..2ce55d9e0 100644 --- a/framework/core/less/forum/Post.less +++ b/framework/core/less/forum/Post.less @@ -15,11 +15,6 @@ opacity: 0.5; } } -.Post-controls { - float: right; - // margin-top: -8px; - // margin-left: 10px; -} .Post-header { margin-bottom: 15px; @@ -148,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; @@ -249,12 +247,16 @@ } .Post-actions { float: right; - margin-top: -3px; + margin-top: -10px; .transition(opacity 0.2s); + .EventPost &, .Post--hidden & { + margin-top: -27px; + } + @media @tablet-up { - margin-bottom: -10px; - opacity: 0.5; + margin-bottom: -15px; + opacity: 0; } > ul { @@ -262,6 +264,7 @@ margin-right: 0; margin-left: -5px; display: inline-block; + vertical-align: top; } } .Post:hover & { @@ -297,14 +300,6 @@ } @media @phone { - .Post-controls { - margin-top: -6px; - margin-right: -8px; - - .Dropdown-toggle { - opacity: 0.5; - } - } .Post-header { .Avatar { .Avatar--size(32px); @@ -338,14 +333,6 @@ @media @tablet-up { .Post { padding-left: 20px + @avatar-column-width; - - // .Post-controls { - // opacity: 0.5; - // transition: opacity 0.2s; - // } - // &:hover .Post-controls, .Post-controls.open { - // opacity: 1; - // } } .PostUser-avatar { margin-left: -@avatar-column-width;