From b083560266a787637f7b63421244d3aca5e2e108 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Fri, 6 Mar 2015 19:00:00 +0100 Subject: [PATCH] Improve Bootstrap stream style --- app/assets/stylesheets/application.scss | 2 +- app/assets/stylesheets/comments.scss | 4 +-- app/assets/stylesheets/conversations.scss | 2 +- app/assets/stylesheets/invitations.scss | 2 +- app/assets/stylesheets/new_styles/_base.scss | 1 + .../stylesheets/new_styles/_registration.scss | 2 +- .../stylesheets/new_styles/_variables.scss | 11 -------- app/assets/stylesheets/poll.scss | 2 +- app/assets/stylesheets/profile.scss | 2 +- app/assets/stylesheets/publisher.scss | 2 +- app/assets/stylesheets/single-post-view.scss | 27 ++++--------------- app/assets/stylesheets/sizes.scss | 2 ++ app/assets/stylesheets/stream-faces.scss | 2 +- app/assets/stylesheets/stream_element.scss | 10 ++++--- .../templates/comment-stream_tpl.jst.hbs | 2 +- 15 files changed, 26 insertions(+), 47 deletions(-) delete mode 100644 app/assets/stylesheets/new_styles/_variables.scss create mode 100644 app/assets/stylesheets/sizes.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 7821b63c8..574baa2e1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,9 +3,9 @@ @import 'perfect-scrollbar'; @import "colors"; +@import 'sizes'; @import 'mixins'; @import 'new_styles/new_mixins'; -@import 'new_styles/variables'; /* core */ @import 'flash_messages'; diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index bd2e04329..a67eee015 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -8,14 +8,14 @@ } .media { margin-top: 10px; } } - .comments > .comment { + .comments > .comment, .comment.new_comment_form_wrapper { .avatar { + margin-top: 5px; height: 30px; width: 30px; } margin: 0; border-top: 1px dotted $border-grey; - &.no-border { border: none; } padding: 10px 0; .comment-content p:last-of-type { margin-bottom: 0; } diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss index 19f0ba0a1..9b0852163 100644 --- a/app/assets/stylesheets/conversations.scss +++ b/app/assets/stylesheets/conversations.scss @@ -101,7 +101,7 @@ .img { line-height: 15px; } .subject { - font-size: 14px; + font-size: $font-size-text; > * { overflow: hidden; white-space: nowrap; diff --git a/app/assets/stylesheets/invitations.scss b/app/assets/stylesheets/invitations.scss index 606f67dc4..79d7db5ec 100644 --- a/app/assets/stylesheets/invitations.scss +++ b/app/assets/stylesheets/invitations.scss @@ -7,7 +7,7 @@ #invitationsModal { .modal-header, .modal-body { color: $text; - font-size: 14px; + font-size: $font-size-text; text-align: initial; } #paste_link { font-weight: 700; } diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index cf199b77c..2d09eb0aa 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -7,6 +7,7 @@ body { body { margin-top: 40px; padding : none; + font-size: $font-size-text; &.lock { overflow: hidden; diff --git a/app/assets/stylesheets/new_styles/_registration.scss b/app/assets/stylesheets/new_styles/_registration.scss index 34964b3a7..e3db7b530 100644 --- a/app/assets/stylesheets/new_styles/_registration.scss +++ b/app/assets/stylesheets/new_styles/_registration.scss @@ -40,7 +40,7 @@ font-size: 16px; height: 40px; padding: 10px 10px 10px 130px; - line-height: 20px; + line-height: $line-height; box-sizing: border-box; width: 100%; border-bottom: 1px solid $border-grey; diff --git a/app/assets/stylesheets/new_styles/_variables.scss b/app/assets/stylesheets/new_styles/_variables.scss deleted file mode 100644 index a53110274..000000000 --- a/app/assets/stylesheets/new_styles/_variables.scss +++ /dev/null @@ -1,11 +0,0 @@ -$container-width : 1170; - -$margin-between-columns : 30; -$column-width : 295 - $margin-between-columns; -$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ; -$two-column-width : $raw-two-column-width - 30; //simply subtract an arbitrary ammount :) - -$margin-between-rows : 20; - -$row-height : $column-width; -$two-row-height : $raw-two-column-width - 20; diff --git a/app/assets/stylesheets/poll.scss b/app/assets/stylesheets/poll.scss index 5f0a764d2..2db4e0e6b 100644 --- a/app/assets/stylesheets/poll.scss +++ b/app/assets/stylesheets/poll.scss @@ -8,7 +8,7 @@ display: block; font-size: 13px; font-weight: normal; - line-height: 20px; + line-height: $line-height; padding-left: 20px; input[type=radio] { diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss index c7078af50..ca064c76c 100644 --- a/app/assets/stylesheets/profile.scss +++ b/app/assets/stylesheets/profile.scss @@ -38,7 +38,7 @@ margin-bottom: 20px; .tag { background-color: transparent; - font-size: 14px; + font-size: $font-size-text; } .tag:not(.entypo) { font-weight: 700; diff --git a/app/assets/stylesheets/publisher.scss b/app/assets/stylesheets/publisher.scss index c2531ec60..7287500fd 100644 --- a/app/assets/stylesheets/publisher.scss +++ b/app/assets/stylesheets/publisher.scss @@ -78,7 +78,7 @@ } .mentions-input-box .mentions { - line-height: 20px !important; + line-height: $line-height !important; } &.with_attachments .row-fluid#photodropzone_container { diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss index d03a1b2cb..8d532088b 100644 --- a/app/assets/stylesheets/single-post-view.scss +++ b/app/assets/stylesheets/single-post-view.scss @@ -17,7 +17,7 @@ .post_scope { margin-right: 5px; } .status-message-location { padding-top: 2px; - line-height: 14px; + line-height: $font-size-text; } } .avatar.medium { @@ -106,7 +106,7 @@ } } a.post_report > i { - font-size: 14px; + font-size: $font-size-text; } i.cross { font-size: 20px; @@ -162,24 +162,10 @@ margin-left: 0; padding-left: 15px; - .comments .comment { - border-top: none; - border-bottom: solid 1px #cccccc; - padding-top: 10px; - padding-bottom: 10px; - margin: 10px; - p { - margin: 0 0 1em 0; - word-wrap: break-word; - &:last-child { - margin-bottom: 0; - } - } - .avatar { - height: 35px; - width: 35px; - } + .comment.media .img { + margin-left: 5px; } + .no_comments { padding-top: 10px; padding-bottom: 10px; @@ -189,9 +175,6 @@ margin-bottom: 30px; } - .new_comment_form_wrapper { - border-bottom: none; - } a { color: $blue; } diff --git a/app/assets/stylesheets/sizes.scss b/app/assets/stylesheets/sizes.scss new file mode 100644 index 000000000..3679382d4 --- /dev/null +++ b/app/assets/stylesheets/sizes.scss @@ -0,0 +1,2 @@ +$font-size-text: 13px; +$line-height: 20px; diff --git a/app/assets/stylesheets/stream-faces.scss b/app/assets/stylesheets/stream-faces.scss index 4d2ae989d..b05f19f43 100644 --- a/app/assets/stylesheets/stream-faces.scss +++ b/app/assets/stylesheets/stream-faces.scss @@ -1,7 +1,7 @@ #selected_aspect_contacts .avatar { height: 32px; width: 32px; - margin-bottom: -2px; + margin-bottom: 2px; } .stream-faces a:hover { text-decoration: none; } diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss index 6838d39da..3c1ca3cc0 100644 --- a/app/assets/stylesheets/stream_element.scss +++ b/app/assets/stylesheets/stream_element.scss @@ -46,9 +46,12 @@ border-bottom: 1px solid $border-grey; padding: 10px; & > .media { - & > .img > .avatar.small { - height: 50px; - width: 50px; + & > .img > .avatar { + margin-top: 5px; + &.small { + height: 50px; + width: 50px; + } } .author { font-weight: bold; @@ -122,6 +125,7 @@ margin-top: 3px; & > .media .avatar { + 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 9ea1ce300..1ba92fe98 100644 --- a/app/assets/templates/comment-stream_tpl.jst.hbs +++ b/app/assets/templates/comment-stream_tpl.jst.hbs @@ -11,7 +11,7 @@
{{#if loggedIn}} -