diff --git a/app/assets/stylesheets/mobile/comments.scss b/app/assets/stylesheets/mobile/comments.scss index 704b33db2..feed33d84 100644 --- a/app/assets/stylesheets/mobile/comments.scss +++ b/app/assets/stylesheets/mobile/comments.scss @@ -1,8 +1,5 @@ .bottom-bar { - border-radius: 0 0 5px 5px; z-index: 3; - display: block; - position: relative; padding: 8px 10px 10px; background: $background-grey; margin-top: 10px; @@ -10,6 +7,17 @@ min-height: 22px; overflow: hidden; + &, + .comment-stats { + border-bottom-left-radius: $border-radius-small; + border-bottom-right-radius: $border-radius-small; + } + + .post-actions-container { + display: flex; + justify-content: space-between; + } + > a, .show-comments, .show-comments > [class^="entypo"] { @@ -38,7 +46,6 @@ } %stats { - float: right; position: relative; display: flex; @@ -46,9 +53,9 @@ color: $text-color; font-family: $font-family-base; font-size: $font-size-base; - line-height: 22px; + line-height: 24px; margin-left: 5px; - vertical-align: top; + vertical-align: text-bottom; z-index: 2; } @@ -67,7 +74,6 @@ } .entypo-reshare.active { color: $blue; } - .entypo-heart.active { color: $red; } } @@ -77,7 +83,10 @@ .comment-stats { @extend %stats; - bottom: 25px; + background: $background-grey; + border-top: 1px solid $border-grey; + flex-direction: row-reverse; + padding: 3px; } %action { @@ -108,16 +117,19 @@ .stream-element .comments { margin: 0; - margin-top: 10px; padding: 0; width: 100%; .content { padding: 0; } .comment { - border-top: 1px solid $border-medium-grey; - padding: 10px 0 0; + background-color: $framed-background; + border: 1px solid $border-medium-grey; + border-radius: 5px; + margin-top: 10px; - &:first-child { padding-top: 20px; } + .media { + padding: 6px; + } } } diff --git a/app/assets/stylesheets/mobile/markdown_editor.scss b/app/assets/stylesheets/mobile/markdown_editor.scss index b39f5a0ba..2cc314d1e 100644 --- a/app/assets/stylesheets/mobile/markdown_editor.scss +++ b/app/assets/stylesheets/mobile/markdown_editor.scss @@ -1,5 +1,5 @@ .md-editor { - border: 1px solid $light-grey; + border: 1px solid $border-medium-grey; border-radius: $btn-border-radius-base; &.active { border-color: $text-grey; } diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss index 2a88055e6..7ee53069e 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/app/assets/stylesheets/mobile/mobile.scss @@ -516,9 +516,13 @@ h3.ltr { font-style: inherit; font-weight: inherit; margin: 0; - padding: 15px 15px; + padding: 12px; vertical-align: baseline; word-wrap: break-word; + + p:last-child { + margin: 0; + } } form#new_conversation.new_conversation { diff --git a/app/views/shared/_stream_element.mobile.haml b/app/views/shared/_stream_element.mobile.haml index 4fd5aba2c..c76b0b0a6 100644 --- a/app/views/shared/_stream_element.mobile.haml +++ b/app/views/shared/_stream_element.mobile.haml @@ -20,16 +20,12 @@ = render "status_messages/status_message", post: post, photos: post.photos .bottom-bar.nsfw-hidden{class: ("inactive" unless defined?(expanded_info) && expanded_info)} - = render partial: "comments/post_stats", locals: {post: post} - - - if defined?(expanded_info) && expanded_info - != show_comments_link(post, "active") - .comment-container - %ul.comments - = render partial: "comments/comment", collection: post.comments.for_a_stream, locals: {post: post} - - - else - != show_comments_link(post) + .post-actions-container + != show_comments_link(post, defined?(expanded_info) && expanded_info ? "active" : "") + = render partial: "comments/post_stats", locals: {post: post} + .comment-container + %ul.comments + = render partial: "comments/comment", collection: post.comments.for_a_stream, locals: {post: post} .ajax-loader.hidden .loader