diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss index b81e0309c..1e56a06d1 100644 --- a/app/assets/stylesheets/_mixins.css.scss +++ b/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; - -moz-box-shadow: $left $top $blur $color; - box-shadow: $left $top $blur $color; + -webkit-box-shadow: $left $top $blur $color; + -moz-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; diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index b07c39418..6d425392b 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1,11 +1,13 @@ @import 'compass' -@import 'ui.css.scss' -@import '_mixins.css.scss' -@import '_flash_messages.scss' +@import 'ui' +@import '_mixins' +@import '_flash_messages' @import 'new_styles/_spinner' -@import 'sidebar.css.scss' -@import 'header.css.scss' -@import 'sprites.css.scss' + +@import 'sidebar' +@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 diff --git a/app/assets/stylesheets/default.css b/app/assets/stylesheets/default.css index d8f1156b9..a598329ab 100644 --- a/app/assets/stylesheets/default.css +++ b/app/assets/stylesheets/default.css @@ -10,5 +10,4 @@ *= require vendor/facebox *= require vendor/fileuploader *= require vendor/autoSuggest -*= require single-post-view */ diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 5f5de6250..036094341 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -4,11 +4,9 @@ /* core */ @import 'new_styles/flash_messages'; -@import 'sprites.css.scss'; -@import 'header.css.scss'; +@import 'sprites'; @import 'new_styles/base'; -@import 'new_styles/interactions'; @import 'new_styles/viewer_nav'; /* font overrides */ @@ -21,5 +19,8 @@ @import 'new_styles/forms'; - -@include video-overlay(); +/* new SPV */ +@import 'header'; +@import 'bootstrap-headerfix'; +@import 'opengraph'; +@import 'single-post-view'; diff --git a/app/assets/stylesheets/opengraph.css.scss b/app/assets/stylesheets/opengraph.css.scss new file mode 100644 index 000000000..950f72011 --- /dev/null +++ b/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; + } + } +} diff --git a/app/assets/stylesheets/single-post-view.css.sass b/app/assets/stylesheets/single-post-view.css.sass index 038b0c76f..dbc12821c 100644 --- a/app/assets/stylesheets/single-post-view.css.sass +++ b/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 - diff --git a/app/helpers/layout_helper.rb b/app/helpers/layout_helper.rb index 1053b1ca6..68989714e 100644 --- a/app/helpers/layout_helper.rb +++ b/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-headerfix') + stylesheet_link_tag('bootstrap-complete') else stylesheet_link_tag 'blueprint', :media => 'screen' end