From ab7ac667d8fc2981598488cc7d0dc378fc5f1b76 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Sat, 21 Apr 2012 20:42:50 -0700 Subject: [PATCH] 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. --- app/assets/images/pattern.jpg | Bin 0 -> 12690 bytes .../javascripts/app/views/small_frame.js | 76 ++++++++----- .../stylesheets/new_styles/_canvas.scss | 107 ++---------------- app/models/photo.rb | 6 +- .../app/views/small_frame_view_spec.js | 32 +----- 5 files changed, 68 insertions(+), 153 deletions(-) create mode 100644 app/assets/images/pattern.jpg diff --git a/app/assets/images/pattern.jpg b/app/assets/images/pattern.jpg new file mode 100644 index 0000000000000000000000000000000000000000..341404b529503732035d6ca35f2581a7857437f7 GIT binary patch literal 12690 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%0AN}S8M!%m9JmD|Ca0i(`MAlRhAOJnx(z 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 literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js index b8ce1e1f9..f85b7985d 100644 --- a/app/assets/javascripts/app/views/small_frame.js +++ b/app/assets/javascripts/app/views/small_frame.js @@ -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) diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss index b214df154..225830fff 100644 --- a/app/assets/stylesheets/new_styles/_canvas.scss +++ b/app/assets/stylesheets/new_styles/_canvas.scss @@ -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 {} - -} \ No newline at end of file +} diff --git a/app/models/photo.rb b/app/models/photo.rb index 05d9fb4ce..9dabd2ac5 100644 --- a/app/models/photo.rb +++ b/app/models/photo.rb @@ -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 diff --git a/spec/javascripts/app/views/small_frame_view_spec.js b/spec/javascripts/app/views/small_frame_view_spec.js index e4b07598c..d848fec91 100644 --- a/spec/javascripts/app/views/small_frame_view_spec.js +++ b/spec/javascripts/app/views/small_frame_view_spec.js @@ -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