Merge pull request #5735 from svbergerem/improve-bootstrap-stream-style

Improve Bootstrap stream style

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';

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; }
 

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;

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; }

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;

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;

app/assets/stylesheets/new_styles/_variables.scss

@@ -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;

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] {

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;

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 {

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 {
+  .comment.media .img {
-    border-top: none;
+    margin-left: 5px;
-    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;
-    }
   }
+
   .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;
   }

app/assets/stylesheets/sizes.scss

@@ -0,0 +1,2 @@
+$font-size-text: 13px;
+$line-height: 20px;

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; }

app/assets/stylesheets/stream_element.scss

@@ -46,9 +46,12 @@
   border-bottom: 1px solid $border-grey;
   padding: 10px;
   & > .media {
-    & > .img > .avatar.small {
+    & > .img > .avatar {
-      height: 50px;
+      margin-top: 5px;
-      width: 50px;
+      &.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;
     }

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}}}