diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js index 5105f7710..75366e8ca 100644 --- a/app/assets/javascripts/app/views/small_frame.js +++ b/app/assets/javascripts/app/views/small_frame.js @@ -9,6 +9,14 @@ app.views.SmallFrame = app.views.Base.extend({ "click .fav" : "goToPost" }, + subviews : { + '.embed-frame' : "oEmbedView" + }, + + oEmbedView : function(){ + return new app.views.OEmbed({model : this.model}) + }, + presenter : function(){ //todo : we need to have something better for small frame text, probably using the headline() scenario. return _.extend(this.defaultPresenter(), @@ -28,7 +36,7 @@ app.views.SmallFrame = app.views.Base.extend({ var text = this.model.get("text") , baseClass = $.trim(text).length == 0 ? "no-text" : 'has-text'; - if(baseClass == "no-text" || this.model.get("photos").length > 0) { return baseClass } + if(baseClass == "no-text" || this.model.get("photos").length > 0 || this.model.get("o_embed_cache")) { return baseClass } var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand'])); @@ -48,14 +56,7 @@ app.views.SmallFrame = app.views.Base.extend({ dimensionsClass : function() { - /* by default, make it big if it's a fav */ - if(this.model.get("favorite")) { return "x2 width height" } - - if(this.model.get("o_embed_cache")) { - return("x2 width") - } - return '' - + return (this.model.get("favorite")) ? "x2 width height" : "" }, favoritePost : function(evt) { diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss index 98b12d4cd..77dced423 100644 --- a/app/assets/stylesheets/_mixins.css.scss +++ b/app/assets/stylesheets/_mixins.css.scss @@ -88,4 +88,15 @@ $default-border-radius: 3px; -webkit-animation: $name $speed $easing; -moz-animation: $name $speed $easing; -ms-animation: $name $speed $easing; -} \ No newline at end of file +} + +@mixin video-overlay(){ + .video-overlay { + background : image-url('video-overlay.png') no-repeat center center; + position : absolute; + top : 0; + left : 0; + right : 0; + bottom : 0; + } +} diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 586d6b95d..617fa46dd 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1843,14 +1843,10 @@ ul#press_logos .thumb :position relative :cursor pointer + @include video-overlay() + + - .video-overlay - :background image-url('video-overlay.png') no-repeat center center - :position absolute - :top 0 - :left 0 - :right 0 - :bottom 0 .conversation_participants :z-index 3 diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 8263aa83d..c221fbc59 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -12,4 +12,7 @@ @import 'new_styles/profile'; /* font overrides */ -@import 'new_styles/typography'; \ No newline at end of file +@import 'new_styles/typography'; + + +@include video-overlay(); diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 6f0efc4c7..880ea1dd0 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -14,9 +14,6 @@ a { color : rgb(42,156,235) !important; } } } -img { - max-height: 70%; -} .photoset { @include center(horizontal); @@ -169,6 +166,10 @@ article { //mood posts width: 960px; margin: 0 auto; + img { + max-height: 70%; + } + @include centered-frame(); .container { padding: 70px 0; diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss index ab58f4dad..9c1baf850 100644 --- a/app/assets/stylesheets/new_styles/_canvas.scss +++ b/app/assets/stylesheets/new_styles/_canvas.scss @@ -87,15 +87,18 @@ body { } .embed-frame { - position : absolute; - top : 0; - left : 0; - width : 100%; - height : 100%; + + .thumb { + position : relative; + } + img { + width: 100%; + } iframe { height : 100%; width : 100%; + max-height: 222px; } } diff --git a/app/assets/templates/small-frame.jst.hbs b/app/assets/templates/small-frame.jst.hbs index 61117ce6f..9e1f3a639 100644 --- a/app/assets/templates/small-frame.jst.hbs +++ b/app/assets/templates/small-frame.jst.hbs @@ -18,11 +18,7 @@ {{/if}} - {{#if o_embed_cache.data}} -
- {{/if}} + {{#if text}}