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
This commit is contained in:
Jonne Haß
Roger Braun
parent
b8fb70d44e
commit
fa7b756d4d
7 changed files with 80 additions and 48 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,5 +10,4 @@
|
|||
*= require vendor/facebox
|
||||
*= require vendor/fileuploader
|
||||
*= require vendor/autoSuggest
|
||||
*= require single-post-view
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
24
app/assets/stylesheets/opengraph.css.scss
Normal file
24
app/assets/stylesheets/opengraph.css.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue