improve new SPV

* Hopefully fix OEmbed view
* Fix OpenGraph view
* Fix middle border
* Add spacing at the bottom
* Fix comment styles by not including old SPV styles for them (TODO: maybe rescue some stuff there, like the code tag styling)
* Fix avatar size for default avatar
* Remove border below comment pane
* Fix overflow of post body with a lot of text
* Fix stylesheet inclusion

app/assets/stylesheets/_mixins.css.scss

@@ -48,9 +48,9 @@ $default-border-radius: 3px;
 
 /* Browser compatability */
 @mixin box-shadow($left, $top, $blur, $color:#000){
-  -webkit-box-shadow: $left $top $blur $color; 
+  -webkit-box-shadow: $left $top $blur $color;
-  -moz-box-shadow: $left $top $blur $color; 
+  -moz-box-shadow: $left $top $blur $color;
-  box-shadow: $left $top $blur $color; 
+  box-shadow: $left $top $blur $color;
 }
 
 @mixin linear-gradient($from, $to, $start:0%, $end:100%){
@@ -58,7 +58,7 @@ $default-border-radius: 3px;
 
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
-  
+
   background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
   background-image: -moz-linear-gradient(top, $from $start, $to $end);
   background-image: -o-linear-gradient(top, $from $start, $to $end);
@@ -66,7 +66,7 @@ $default-border-radius: 3px;
 
 @mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){
   background-image: mix($from,$to);
-  
+
   background-image: -moz-linear-gradient(left, $from $start, $to $end);
   background-image: -o-linear-gradient(left, $from $start, $to $end);
   background-image: -webkit-linear-gradient(left, $from $start, $to $end);
@@ -108,6 +108,9 @@ $default-border-radius: 3px;
 }
 
 @mixin video-overlay(){
+  position: relative;
+  cursor: pointer;
+
   .video-overlay {
     background : {
       color: rgba(0,0,0, .65);
@@ -124,7 +127,7 @@ $default-border-radius: 3px;
     top : 50%;
     left : 10%;
     right : 10%;
-    
+
     height: 60px;
     margin-top: -40px;
     padding: 10px 7px 10px 80px;

app/assets/stylesheets/application.css.sass

@@ -1,11 +1,13 @@
 @import 'compass'
-@import 'ui.css.scss'
+@import 'ui'
-@import '_mixins.css.scss'
+@import '_mixins'
-@import '_flash_messages.scss'
+@import '_flash_messages'
 @import 'new_styles/_spinner'
-@import 'sidebar.css.scss'
+
-@import 'header.css.scss'
+@import 'sidebar'
-@import 'sprites.css.scss'
+@import 'header'
+@import 'sprites'
+@import 'opengraph'
 
 /* ====== media ====== */
 .media
@@ -526,7 +528,7 @@ form p
 
 form#update_profile_form p.checkbox_select
   label
-    :top 0   
+    :top 0
 
 form p.checkbox_select
   label
@@ -1592,32 +1594,11 @@ ul#press_logos
       :width 100%
 
       .thumb
-        :position relative
-        :cursor pointer
         @include video-overlay()
 
       iframe, .thumb img
         :width 100%
 
-    .opengraph
-      :width 100%
-      a
-        :display block
-        :text-decoration none
-        :color #000
-        :margin 10px 0px 10px 0px
-        :border-top solid 1px #DDD
-        :border-bottom solid 1px #DDD
-        :padding 10px 0px 5px 0px
-        :overflow hidden
-
-        img
-          :margin 0px 5px 5px 0px
-          :float left
-          :max-width 155px
-        .og-title
-          :margin-bottom 5px
-
 .conversation_participants
   :background
     :color $background
@@ -1730,7 +1711,7 @@ ul#press_logos
     :clear right
     :float right
     :color #aaa
-    
+
   .icons-users
     :display block
     :width 25px
@@ -2721,11 +2702,11 @@ body
 #fileInfo
   :font-size small
   :text-align right
-  :margin 5px 2px  
+  :margin 5px 2px
-  
+
 .post_preview_button
   :padding 3px 9px 4px
-  
+
 .post_preview
   :padding
     :top 5px
@@ -2774,5 +2755,5 @@ body
   a#hide_location:hover
     @include opacity(0)
     :-khtml-opacity 1
-    :opacity 1 
+    :opacity 1
     :cursor pointer

app/assets/stylesheets/default.css

@@ -10,5 +10,4 @@
 *= require vendor/facebox
 *= require vendor/fileuploader
 *= require vendor/autoSuggest
-*= require single-post-view
 */

app/assets/stylesheets/new-templates.css.scss

@@ -4,11 +4,9 @@
 
 /* core */
 @import 'new_styles/flash_messages';
-@import 'sprites.css.scss';
+@import 'sprites';
-@import 'header.css.scss';
 
 @import 'new_styles/base';
-@import 'new_styles/interactions';
 @import 'new_styles/viewer_nav';
 
 /* font overrides */
@@ -21,5 +19,8 @@
 
 @import 'new_styles/forms';
 
-
+/* new SPV */
-@include video-overlay();
+@import 'header';
+@import 'bootstrap-headerfix';
+@import 'opengraph';
+@import 'single-post-view';

app/assets/stylesheets/opengraph.css.scss

@@ -0,0 +1,24 @@
+.opengraph {
+  width: 100%;
+
+  a {
+    display: block;
+    text-decoration: none;;
+    color: #000;
+    margin: 10px 0px 10px 0px;
+    border-top: solid 1px #DDD;
+    border-bottom: solid 1px #DDD;
+    padding: 10px 0px 5px 0px;
+    overflow: hidden;
+
+    img {
+      margin: 0px 5px 5px 0px;
+      float: left;
+      max-width: 155px;
+    }
+
+    .og-title {
+      margin-bottom: 5px;
+    }
+  }
+}

app/assets/stylesheets/single-post-view.css.sass

@@ -1,10 +1,15 @@
 #single-post-container
   padding-top: 20px
+  padding-bottom: 3em
+
 #single-post-content
   #head
     color: #aaa
     font-size: 12px
   #author
+    .img
+      max-width: 25%
+    .avatar
     .bd
       padding-left: 10px
   border-right: solid 1px #ccc
@@ -12,6 +17,7 @@
   #body
     margin-left: 20px
     padding-top: 20px
+    width: auto
     .photo_attachments
       padding-bottom: 10px
       img
@@ -21,21 +27,40 @@
         padding-bottom: 5px
         max-width: 90%
 
+    .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%
+
 #single-post-interactions
+  border-left: 1px solid #ccc
+  position: relative
+  left: -1px
+  margin-left: 0
+  padding-left: 2.5%
   #likes, #reshares, #comments-meta
     padding-bottom: 5px
   .comment
     border-bottom: solid 1px #ccc
     padding-top: 10px
     padding-bottom: 10px
+
     p
       margin: 0
   textarea
     width: 95%
+  .new_comment_form_wrapper
+    border-bottom: none
   a
     color: #3f8fba
   .timeago
     color: #aaaaaa
     text-decoration: none
     font-size: smaller
-

app/helpers/layout_helper.rb

@@ -56,8 +56,7 @@ module LayoutHelper
 
   def include_base_css_framework(use_bootstrap=false)
     if use_bootstrap || @aspect == :getting_started
-      stylesheet_link_tag('bootstrap-complete') +
+      stylesheet_link_tag('bootstrap-complete')
-      stylesheet_link_tag('bootstrap-headerfix')
     else
       stylesheet_link_tag 'blueprint', :media => 'screen'
     end