Merge pull request #5809 from svbergerem/refactor-post-content-css

Refactor post content css, fix margin-bottom for lists in comments

app/assets/stylesheets/application.scss

@@ -79,6 +79,9 @@
 @import 'comments';
 @import 'diaspora_jsxc';
 @import 'chat';
+@import 'markdown-content';
+@import 'oembed';
+@import 'post-content';
 
 /* right bar */
 @import 'sidebar';

app/assets/stylesheets/comments.scss

@@ -17,7 +17,6 @@
     margin: 0;
     border-top: 1px dotted $border-grey;
     padding: 10px 0;
-    .comment-content p:last-of-type { margin-bottom: 0; }
 
     .info {
       margin-top: 5px;

app/assets/stylesheets/markdown-content.scss

@@ -0,0 +1,11 @@
+.markdown-content {
+  p { margin: 0 0 0.8em; }
+  p:last-child { margin-bottom: 0; }
+
+  ul, ol {
+    margin-top:0.8em;
+    margin-bottom:0.8em;
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+  }
+}

app/assets/stylesheets/oembed.scss

@@ -0,0 +1,12 @@
+.oembed {
+  background: image-url("ajax-loader2.gif") no-repeat center center;
+  margin: 10px auto;
+  width: 100%;
+  .thumb {
+    @include video-overlay;
+  }
+  iframe, .thumb img {
+    width: 100%;
+    min-height: 60%;
+  }
+}

app/assets/stylesheets/post-content.scss

@@ -0,0 +1,21 @@
+.post-content {
+  .photo_attachments {
+    margin-top: 7px;
+    padding-bottom: 10px;
+    text-align: center;
+    img {
+      &.big_stream_photo {
+        display: block;
+        max-width: 100%;
+      }
+      &.thumb_small {
+        display: inline;
+        max-width: 50px;
+        max-height: 50px;
+      }
+      margin-left: auto;
+      margin-right: auto;
+      padding-bottom: 5px;
+    }
+  }
+}

app/assets/stylesheets/single-post-view.scss

@@ -97,38 +97,10 @@
     margin-left: 20px;
     padding-top: 20px;
     width: auto;
-    p {
-      margin: 0 0 1em 0;
-    }
+
+    .oembed { width: 95%; }
     .photo_attachments {
-      padding-bottom: 10px;
-      text-align: center;
-      img {
-        &.big_stream_photo {
-          display: block;
-          max-width: 90%;
-        }
-        &.thumb_small {
-          display: inline;
-          max-width: 50px;
-          max-height: 50px;
-        }
-        margin-left: auto;
-        margin-right: auto;
-        padding-bottom: 5px;
-      }
-    }
-    .oembed {
-      background: image-url("ajax-loader2.gif") no-repeat center center;
-      float: left;
-      width: 95%;
-      .thumb {
-        @include video-overlay;
-      }
-      iframe, .thumb img {
-        width: 100%;
-        min-height: 60%;
-      }
+      img.big_stream_photo { max-width: 90%; }
     }
   }
 }

app/assets/stylesheets/stream_element.scss

@@ -76,30 +76,6 @@
         margin-right: 5px;
       }
     }
-    .youtube-player, .vimeo-player {
-      border: none;
-      height: 304px;
-      width: 410px;
-    }
-    .photo_attachments {
-      margin-top: 7px;
-      padding-bottom: 10px;
-      text-align: center;
-      img {
-        &.big_stream_photo {
-          display: block;
-          max-width: 90%;
-        }
-        &.thumb_small {
-          display: inline;
-          max-width: 50px;
-          max-height: 50px;
-        }
-        margin-left: auto;
-        margin-right: auto;
-        padding-bottom: 5px;
-      }
-    }
     .stream_photo {
       float: left;
       margin-top: 6px;
@@ -134,18 +110,6 @@
     overflow: hidden;
     position: relative;
 
-    p {
-      margin: 0 0 0.8em;
-    }
-    p:last-of-type {
-      margin: 0;
-    }
-    ul, ol {
-      margin-top:0.8em;
-      margin-bottom:0.8em;
-      &:first-child { margin-top: 0; }
-      &:nth-last-child(4){ margin-bottom: 0; }
-    }
     .expander {
       position: absolute;
       bottom: 0;
@@ -163,20 +127,6 @@
       @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%);
       background-color: transparent;
     }
-
-    .oembed {
-      background: image-url('ajax-loader2.gif') no-repeat center center;
-      float: left;
-      width: 100%;
-
-      .thumb {
-        @include video-overlay();
-      }
-
-      iframe, .thumb img {
-        width: 100%;
-      }
-    }
   }
 
   &.highlighted {

app/assets/templates/comment_tpl.jst.hbs

@@ -24,7 +24,7 @@
       {{name}}
     {{/linkToAuthor}}
 
-    <div class="collapsible comment-content">
+    <div class="collapsible comment-content markdown-content">
       {{{text}}}
     </div>
 

app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs

@@ -25,7 +25,7 @@
             {{/linkToAuthor}}
           {{/if}}
         </span>
-            
+
         <div class='info'>
           {{#if public}}
             <span class='post_scope' title="{{t "stream.public"}}">
@@ -95,6 +95,6 @@
   {{/if}}
 </div>
 <div id='body' class='row-fluid'>
-  <div id='real-post-content' class='span12'>
+  <div id='real-post-content' class='post-content span12'>
   </div>
 </div>

app/assets/templates/status-message_tpl.jst.hbs

@@ -15,7 +15,9 @@
 {{/if}}
 
 <div class="collapsible">
-  {{{text}}}
+  <div class="markdown-content">
+    {{{text}}}
+  </div>
   <div class="oembed"></div>
   <div class="opengraph"></div>
   <div class="poll"></div>