Skip to content

GitLab

D
diaspora
Commit ab7ac667 authored by danielgrippi's avatar danielgrippi
Browse files
Options

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.
parent 0279874e
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 154 deletions
app/assets/javascripts/app/views/small_frame.js
View file @ ab7ac667
......@@ -15,39 +15,63 @@ 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 ";
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"
}
},
dimensionsClass : function() {
var firstPhoto = this.model.get("photos")[0]
, className = "photo ";
if(!firstPhoto ||
(firstPhoto && !firstPhoto.dimensions.height || !firstPhoto.dimensions.width)) { return className }
return(className + ratio(firstPhoto.dimensions))
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'
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 ""
}
}
},
// 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)
}
......
app/assets/stylesheets/new_styles/_canvas.scss
View file @ ab7ac667
$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;
}
&.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(); }
}
&.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%; }
&.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 {}
}
\ No newline at end of file
}
app/models/photo.rb
View file @ ab7ac667
......@@ -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
......
spec/javascripts/app/views/small_frame_view_spec.js
View file @ ab7ac667
......@@ -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...
})
})
\ No newline at end of file
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment