Improve Bootstrap stream style

15 files changed, 26 insertions, 47 deletions

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 @@
 <div class="comments"> </div>
 
 {{#if loggedIn}}
-  <div class="comment no-border media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
+  <div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
     {{#with current_user}}
       <a href="/people/{{guid}}" class="img">
         {{{personImage this}}}