only focus on photos for now with ratios. one thing at a time, yo.
i've temporarily removed all the arbitrary text switching for now (which is still in version control // which we will get to later) also moved photo dimensions into a dimensions hash in photo.rb.
This commit is contained in:
danielgrippi
parent
0279874e32
commit
ab7ac667d8
5 changed files with 68 additions and 153 deletions
BIN
app/assets/images/pattern.jpg
Normal file
BIN
app/assets/images/pattern.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -15,38 +15,62 @@ app.views.SmallFrame = app.views.Base.extend({
|
|||
},
|
||||
|
||||
postRenderTemplate : function() {
|
||||
this.$el.addClass(this.photoClass() + ' ' + this.textClass())
|
||||
this.$el.addClass(this.dimensionsClass())
|
||||
},
|
||||
|
||||
textClass : function(){
|
||||
var textLength = this.model.get("text").length
|
||||
, baseClass = "text ";
|
||||
dimensionsClass : function() {
|
||||
var firstPhoto = this.model.get("photos")[0]
|
||||
, className = "photo ";
|
||||
|
||||
if(textLength <= 20){
|
||||
return baseClass + "extra-small"
|
||||
} else if(textLength <= 140) {
|
||||
return baseClass + "small"
|
||||
} else if(textLength <= 500) {
|
||||
return baseClass + "medium"
|
||||
} else {
|
||||
return baseClass + "large"
|
||||
if(!firstPhoto ||
|
||||
(firstPhoto && !firstPhoto.dimensions.height || !firstPhoto.dimensions.width)) { return className }
|
||||
|
||||
return(className + ratio(firstPhoto.dimensions))
|
||||
|
||||
function ratio(dimensions) {
|
||||
var ratio = (dimensions.width / dimensions.height)
|
||||
|
||||
console.log(ratio, dimensions)
|
||||
|
||||
if(ratio > 1.5) {
|
||||
return "x2 width"
|
||||
} else if(ratio < 0.75) {
|
||||
return "x2 height"
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
photoClass : function(){
|
||||
var photoCount = this.model.get('photos').length
|
||||
, baseClass = "photo ";
|
||||
|
||||
if(photoCount == 0 ) {
|
||||
return ""
|
||||
} else if(photoCount == 1){
|
||||
return baseClass + 'one'
|
||||
} else if(photoCount == 2 ) {
|
||||
return baseClass + 'two'
|
||||
} else {
|
||||
return baseClass + 'many'
|
||||
}
|
||||
},
|
||||
// textClass : function(){
|
||||
// var textLength = this.model.get("text").length
|
||||
// , baseClass = "text ";
|
||||
//
|
||||
// if(textLength <= 20){
|
||||
// return baseClass + "extra-small"
|
||||
// } else if(textLength <= 140) {
|
||||
// return baseClass + "small"
|
||||
// } else if(textLength <= 500) {
|
||||
// return baseClass + "medium"
|
||||
// } else {
|
||||
// return baseClass + "large"
|
||||
// }
|
||||
// },
|
||||
//
|
||||
// photoClass : function(){
|
||||
// var photoCount = this.model.get('photos').length
|
||||
// , baseClass = "photo ";
|
||||
//
|
||||
// if(photoCount == 0 ) {
|
||||
// return ""
|
||||
// } else if(photoCount == 1){
|
||||
// return baseClass + 'one'
|
||||
// } else if(photoCount == 2 ) {
|
||||
// return baseClass + 'two'
|
||||
// } else {
|
||||
// return baseClass + 'many'
|
||||
// }
|
||||
// },
|
||||
|
||||
goToPost : function() {
|
||||
app.router.navigate(this.model.url(), true)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
$container-width : 1170;
|
||||
|
||||
$margin-between-columns : 20;
|
||||
$margin-between-columns : 30;
|
||||
$column-width : 255 - $margin-between-columns;
|
||||
$two-column-width : ($column-width * 2) + ($margin-between-columns * 2);
|
||||
|
||||
|
||||
$margin-between-rows : 20;
|
||||
|
||||
$row-height : $column-width;
|
||||
|
|
@ -24,6 +23,7 @@ $two-row-height : $two-column-width;
|
|||
|
||||
body {
|
||||
background-color : #F6F6F6;
|
||||
background-image : image_url('pattern.jpg')
|
||||
}
|
||||
|
||||
#canvas {
|
||||
|
|
@ -34,14 +34,12 @@ body {
|
|||
float : left;
|
||||
margin : 10px;
|
||||
|
||||
//clear : both; // here for testing!
|
||||
|
||||
.content {
|
||||
@include transition(box-shadow);
|
||||
@include box-shadow(0,1px,3px,rgba(0,0,0,0.2));
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0,1px,3px,rgba(0,0,0,0.5));
|
||||
@include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +64,7 @@ body {
|
|||
max-width : $column-width + px;
|
||||
|
||||
overflow : hidden;
|
||||
padding : 10px;
|
||||
padding : 20px;
|
||||
|
||||
/* used in masking photos with overflow: hidden; */
|
||||
.image-container {
|
||||
|
|
@ -80,8 +78,10 @@ body {
|
|||
}
|
||||
|
||||
.image-set {
|
||||
float : left;
|
||||
width : 100%;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
clear : all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,92 +89,7 @@ body {
|
|||
&.x2.width .content { @include wide(); }
|
||||
&.x2.height .content { @include tall(); }
|
||||
|
||||
&.text {
|
||||
&.extra-small .content {
|
||||
font-weight : bold;
|
||||
font-size: 2.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
&.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%; }
|
||||
|
||||
&.content {
|
||||
display: table;
|
||||
}
|
||||
|
||||
&.small .content {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.25em;
|
||||
|
||||
text-decoration: bold;
|
||||
}
|
||||
&.medium .content {
|
||||
@include tall();
|
||||
font-size: 1.6em;
|
||||
}
|
||||
&.large .content { @include wide() }
|
||||
}
|
||||
|
||||
&.photo {
|
||||
&.one .content {
|
||||
//padding : 0;
|
||||
//
|
||||
//min-height : $column-width + 10 + px;
|
||||
//max-height : $column-width + 10 + px;
|
||||
//
|
||||
//min-width : $column-width + 10 + px;
|
||||
//max-width : $column-width + 10 + px;
|
||||
|
||||
.text-content {
|
||||
position : absolute;
|
||||
padding : 10px;
|
||||
bottom : 0;
|
||||
color : #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&.two .content {
|
||||
// @include tall();
|
||||
// .image-container {
|
||||
// width : 50%;
|
||||
// }
|
||||
}
|
||||
&.many .content { @include tall(); @include wide(); }
|
||||
}
|
||||
|
||||
&.text.small + .photo.one .content {
|
||||
|
||||
}
|
||||
&.text.small + .photo.two .content { @include wide() }
|
||||
&.text.small + .photo.many .content { @include tall(); @include wide(); }
|
||||
|
||||
&.text.medium + .photo.one .content {}
|
||||
&.text.medium + .photo.two .content {}
|
||||
&.text.medium + .photo.many .content {}
|
||||
|
||||
&.text.large.photo.one .content {
|
||||
@include tall(); @include wide();
|
||||
.text-content {
|
||||
max-height: 26%;
|
||||
padding : 20px;
|
||||
color : #333;
|
||||
}
|
||||
|
||||
.image-set {
|
||||
height: 65%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
|
||||
img {
|
||||
width : 100%;
|
||||
max-height : none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.text.large + .photo.two .content {}
|
||||
&.text.large + .photo.many .content {}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@ class Photo < ActiveRecord::Base
|
|||
:medium => photo.url(:thumb_medium),
|
||||
:large => photo.url(:scaled_full) }
|
||||
}, :as => :sizes
|
||||
t.add :height
|
||||
t.add :width
|
||||
t.add lambda { |photo|
|
||||
{ :height => photo.height,
|
||||
:width => photo.width }
|
||||
}, :as => :dimensions
|
||||
end
|
||||
|
||||
mount_uploader :processed_image, ProcessedImage
|
||||
|
|
|
|||
|
|
@ -13,35 +13,9 @@ describe("app.views.SmallFrame", function(){
|
|||
beforeEach(function(){
|
||||
this.view.render()
|
||||
});
|
||||
|
||||
it("should have an image for each photoAttr on the model", function(){
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
describe("textClass", function(){
|
||||
it("returns and 'text extra-small' with a post with text longer than 140 characters", function(){
|
||||
expect(this.view.textClass()).toBe("text extra-small")
|
||||
});
|
||||
|
||||
it("returns 'text medium' if if it is less than 500 characters", function(){
|
||||
this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
|
||||
"dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
|
||||
"jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj "})
|
||||
expect(this.view.textClass()).toBe("text medium")
|
||||
});
|
||||
|
||||
it("returns 'text large' if if it is more than 500 characters", function(){
|
||||
this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
|
||||
"dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
|
||||
"jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj f;lkajs;dflkjasd;lfkja;sldkjf;alskdjfs" +
|
||||
"as;lkdfj;asldfkj;alsdkjf;laksdjf;lasdkjf;lasdkj;lafkja;sldkjf;alsdkjf;laskjf;laskdjf;laksjdf;laksjdf;lk;" +
|
||||
"a;dslkf;laskjdf;lakjsdf;lkasd;lfkja;sldkfj;o sdfsdfsdf" +
|
||||
"sdfsdfsdfsdfsdfdsdsfsdfsfsdsfdsf;lgkjs;dlkfj;alsdkjf;laksdjf;lkasjdf;lkajsdf;lkjasd;flkjasd;lfkjas;dlkfj;alsdkjf" +
|
||||
"as;dlfk;alsdkjf;lkasdf;lkjasd;flkjasd;lfkjasdkl;" +
|
||||
"asl;dkfj;asldkfj;alsdkfj;alsdfjk" +
|
||||
"askdjf;laksdf;lkdflkjhasldfhoiawufjkhasugfoiwaufaw "})
|
||||
expect(this.view.textClass()).toBe("text large")
|
||||
})
|
||||
describe("photos", function() {
|
||||
// ratio pending...
|
||||
})
|
||||
})
|
||||
});
|
||||
Loading…
Reference in a new issue