nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DC MS reworking newprofile grid WHOA

Browse source
This commit is contained in:
Dennis Collinson 2012-04-23 16:29:19 -07:00
parent affba80524
commit 0e8fd604e9
3 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/app/views/canvas_view.js
View file

@ -4,7 +4,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
this.collection = this.stream.items
this.postClass = app.views.SmallFrame
this.setupInfiniteScroll()
this.stream.bind("reLayout", this.reRender, this)
this.stream.bind("reLayout", this.reLayout, this)
},
renderTemplate : function() {
@ -13,12 +13,24 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
}, this))
//needs to be defered so it happens after html rendering finishes
_.defer(_.bind(this.mason, this))
// Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
// ever little bit for a while after loading
// gross hax, bro ;-p
_.delay(_.bind(this.reLayout, this), 200)
_.delay(_.bind(this.reLayout, this), 500)
_.delay(_.bind(this.reLayout, this), 1000)
_.delay(_.bind(this.reLayout, this), 2000)
_.delay(_.bind(this.reLayout, this), 3000)
_.delay(_.bind(this.reLayout, this), 4000)
_.delay(_.bind(this.reLayout, this), 5000)
},
addPostView : function(post) {
_.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
},
mason : function() {
this.$el.isotope({
itemSelector : '.canvas-frame',
@ -28,7 +40,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
})
},
reRender : function(){
reLayout : function(){
this.$el.isotope("reLayout")
}
}));

3
app/assets/javascripts/app/views/small_frame.js
View file

@ -23,6 +23,7 @@ app.views.SmallFrame = app.views.Base.extend({
var text = this.model.get("text");
if(text == "" || this.model.get("photos").length > 0) { return "" }
var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
randomColor += " sticky-note"
if(text.length > 240) {
return "blog-text x2 width"
@ -49,7 +50,7 @@ app.views.SmallFrame = app.views.Base.extend({
if(this.model.get("o_embed_cache")) {
return("x2 width")
}
return ''
return(className + ratio(firstPhoto.dimensions))
function ratio(dimensions) {

25
app/assets/stylesheets/new_styles/_canvas.scss
View file

@ -1,9 +1,9 @@
$container-width : 1170;
$margin-between-columns : 30;
$column-width : 255 - $margin-between-columns;
$column-width : 295 - $margin-between-columns;
$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
$two-column-width : $raw-two-column-width + 7; //why do we need these extra 7?
$two-column-width : $raw-two-column-width - 30; //simply subtract an arbitrary ammount :)
$margin-between-rows : 20;
@ -67,27 +67,21 @@ body {
background-color : #fff;
min-height : $column-width + px;
max-height : $column-width + px;
width : $column-width + px;
min-width : $column-width + px;
max-width : $column-width + px;
overflow : hidden;
padding : 20px;
//padding : 20px;
/* used in masking photos with overflow: hidden; */
.image-container {
position : absolute;
overflow : hidden;
top : 0;
left : 0;
min-width : 100%;
width : 100%;
img {
max-height : 100%;
width: 100%;
max-width : 100%;
}
}
@ -184,16 +178,9 @@ body {
/* larger declarations */
&.x2.width .content { @include wide(); }
&.x2.height .content { @include tall(); }
&.x2.width .content img { max-height: none; max-width: none; min-width: 100%; }
&.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }
&.scale-vertical .content img,
&.scale-vertical .content .image-container {height : 100%; max-width : none; }
&.scale-horizontal .content img,
&.scale-horizontal .content .image-container {width : 100%; max-height : none; }
&.scale-horizontal .content .image-container {width : 100%; }
}