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ß 2013-08-18 00:30:29 +02:00 committed by Roger Braun
parent b8fb70d44e
commit fa7b756d4d
7 changed files with 80 additions and 48 deletions

View file

@ -108,6 +108,9 @@ $default-border-radius: 3px;
}
@mixin video-overlay(){
position: relative;
cursor: pointer;
.video-overlay {
background : {
color: rgba(0,0,0, .65);

View file

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

View file

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

View file

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

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

View file

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

View file

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