diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index de61d106f..38302959e 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -6,6 +6,7 @@ /* core */ +@import 'media-box'; @import 'entypo'; @import 'icons'; @import 'mentions'; diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index 5de2c2f43..67a654a93 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -1,11 +1,12 @@ .comment_stream { .show_comments { + margin-top: 5px; border-top: 1px solid $border-grey; - padding: 10px; a { color: $text-grey; font-size: 13px; } + .media { margin-top: 10px; } } .comments > .comment, .comment.new_comment_form_wrapper { .avatar { @@ -33,9 +34,11 @@ float: right; } padding-left: 12px; + width: 95%; display: none; } .comment_box { + width: 95%; height: 35px; resize: none; } diff --git a/app/assets/stylesheets/media-box.scss b/app/assets/stylesheets/media-box.scss new file mode 100644 index 000000000..2c11626d9 --- /dev/null +++ b/app/assets/stylesheets/media-box.scss @@ -0,0 +1,17 @@ +.media { margin: 10px; } + +.media, +.bd { + overflow: hidden; + _overflow: visible; + zoom: 1; +} + +.media .img { + float: left; + margin-right: 10px; +} + +.media .img img { display: block } +.media .imgEt { float: right; margin-left: 10px; } + diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss index 79e41ec73..0166d1802 100644 --- a/app/assets/stylesheets/single-post-view.scss +++ b/app/assets/stylesheets/single-post-view.scss @@ -19,6 +19,9 @@ line-height: $font-size-base; } } + .bd { + padding-left: 10px; + } } .near-from { color: $text-grey; diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss index eb2eb9a7b..2449a3c47 100644 --- a/app/assets/stylesheets/stream_element.scss +++ b/app/assets/stylesheets/stream_element.scss @@ -1,5 +1,8 @@ #main_stream .stream_element, #main_stream > div > .photo { + & > .media { + margin: 0px; + } &.deleting { > .media { opacity: 0.3; } .control-icons { display: none !important; } @@ -8,43 +11,48 @@ #main_stream > div > .photo { & > .media { - background: $white; - box-shadow: $card-shadow; - margin: 0 0 15px; - padding: 10px; - > .control-icons { - border-radius: 4px; - padding-left: 5px; - position: absolute; - right: 20px; - text-align: center; - top: 1px; + overflow: visible; + > .bd { + position: relative; + overflow: inherit; + > .control-icons { + border-radius: 4px; + padding-left: 5px; + position: absolute; + right: 6px; + text-align: center; + top: 1px; + } } - &:hover > .control-icons { background: $white; } + &:hover > .bd > .control-icons { background: $white; } } .thumbnail { - border: none; + padding: 10px; + margin: 0 0 15px; + background: $white; border-radius: 0; - margin: 0; - padding: 0; + box-shadow: $card-shadow; img.big_photo { max-height: 200px; } } } #main_stream .stream_element { + padding: 10px; + margin-bottom: 20px; background-color: $white; border: 1px solid $light-grey; box-shadow: $card-shadow; - margin-bottom: 20px; - padding: 10px; & > .media { &.shield-active .nsfw-hidden { display: none; } &:not(.shield-active) .nsfw-shield { display: none; } &:not(.shield-off) .nsfw-off { display: none; } - > .media-object .avatar.small { - height: 50px; - width: 50px; + & > .img > .avatar { + margin-top: 5px; + &.small { + height: 50px; + width: 50px; + } } .author-name { font-weight: bold; @@ -58,10 +66,10 @@ line-height: $font-size-small; } .likes { - margin: 10px; + margin-top: 10px; font-size: 12px; line-height: 16px; - .author-name { display: inline-block; } + .author-name, .bd { display: inline-block; } .author-name { margin-right: 3px; } .entypo-heart { display: inline-block; @@ -70,7 +78,6 @@ margin-top: -2px; margin-right: 5px; } - .media-left { padding-right: 0; } } .stream_photo { float: left; @@ -96,10 +103,10 @@ div.reshare { border-left: 2px solid $border-grey; - padding-left: 10px; + margin-top: 3px; & > .media .avatar { - margin-top: 3px; + margin-top: 5px; height: 30px; width: 30px; } diff --git a/app/assets/templates/comment-stream_tpl.jst.hbs b/app/assets/templates/comment-stream_tpl.jst.hbs index 2a05ae017..ac8f118e4 100644 --- a/app/assets/templates/comment-stream_tpl.jst.hbs +++ b/app/assets/templates/comment-stream_tpl.jst.hbs @@ -12,15 +12,13 @@ {{#if loggedIn}}