diff --git a/app/coffee/modules/common.coffee b/app/coffee/modules/common.coffee index 4742b208..d02c9881 100644 --- a/app/coffee/modules/common.coffee +++ b/app/coffee/modules/common.coffee @@ -118,8 +118,8 @@ ChangesDirective = -> containerTemplate = _.template("""
<% if (showMoreEnabled){ %> - - Show <%- howManyMore %> more + + + Show previous comments (<%- howManyMore %> more) <% } %>
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index a77f7b9d..4c78bdbc 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -160,7 +160,7 @@ } .comment-list { - padding: 1rem 2rem; + padding: 1rem; } .us-detail-status { diff --git a/app/styles/modules/common/comments.scss b/app/styles/modules/common/comments.scss index 2c1d1a31..59c2fc85 100644 --- a/app/styles/modules/common/comments.scss +++ b/app/styles/modules/common/comments.scss @@ -24,6 +24,19 @@ } } +a.show-more-comments { + @extend %small; + border-bottom: 1px solid $gray-light; + border-top: 1px solid $gray-light; + color: $gray-light; + display: block; + padding: 1rem 0 1rem 1rem; + &:hover { + @include transition (background .2s ease-in); + background: lighten($green-taiga, 60%); + } +} + .comment-single { @include table-flex; border-bottom: 2px solid $gray-light; @@ -95,17 +108,19 @@ margin-left: .5rem; } } -.comment-list.activeanimation { - .comment-single.ng-enter:last-child, - .comment-single.ng-leave:last-child { - @include transition(all .3s ease-in); - } - .comment-single.ng-enter:last-child, - .comment-single.ng-leave.ng-leave-active:last-child { - opacity: 0; - } - .comment-single.ng-leave:last-child, - .comment-single.ng-enter.ng-enter-active:last-child { - opacity: 1; +.comment-list { + &.activeanimation { + .comment-single.ng-enter:last-child, + .comment-single.ng-leave:last-child { + @include transition(all .3s ease-in); + } + .comment-single.ng-enter:last-child, + .comment-single.ng-leave.ng-leave-active:last-child { + opacity: 0; + } + .comment-single.ng-leave:last-child, + .comment-single.ng-enter.ng-enter-active:last-child { + opacity: 1; + } } }