From 6ac1c5bc21d83f26de8c93318ca68fc5ff0dadd4 Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Tue, 24 Apr 2012 13:24:46 -0700
Subject: [PATCH] images aren't darkened in wallpaper if they don't have text

---
 .../javascripts/app/views/small_frame.js      | 24 +++++++----
 .../stylesheets/new_styles/_canvas.scss       | 43 +++++++------------
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js
index 09cb73a66..33f4b9711 100644
--- a/app/assets/javascripts/app/views/small_frame.js
+++ b/app/assets/javascripts/app/views/small_frame.js
@@ -25,22 +25,28 @@ app.views.SmallFrame = app.views.Base.extend({
   },
 
   colorClass : function() {
-    var text = this.model.get("text");
-    if(text == "" || this.model.get("photos").length > 0) { return "" }
+    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 }
+
     var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
-    randomColor += " sticky-note"
-    
+
+    var textClass;
     if(text.length > 240) {
-      return "blog-text x2 width"
+      textClass = "blog-text x2 width"
     } else if(text.length > 140) {
-      return randomColor
-    } else if(text.length > 35) {
-      return randomColor
+      textClass = randomColor
+    } else if(text.length > 50) {
+      textClass = randomColor
     } else {
-      return "big-text " + randomColor
+      textClass =  "big-text " + randomColor
     }
+
+    return [baseClass, textClass, "sticky-note"].join(" ")
   },
 
+
   dimensionsClass : function() {
     /* by default, make it big if it's a fav */
     if(this.model.get("favorite")) { return "x2 width height" }
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index f5eee9c13..d39722516 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -29,7 +29,7 @@ $sand : rgb(245, 239, 237);
 
 body {
   background-color : #F6F6F6;
-  background-image : image_url('pattern.jpg');
+  background-image : image_url('pattern.jpg')
 }
 
 .canvas-frame {
@@ -60,7 +60,6 @@ body {
     p {
       font-size: inherit;
       line-height: inherit;
-      word-break : hyphenate;
     }
 
     position : relative;
@@ -103,19 +102,15 @@ body {
   .fav {
     position : absolute;
     z-index : 100;
-    top : 5px;
-    right : 5px;
+    top : 10px;
+    right : 10px;
   }
 
   .info {
     @include transition(bottom);
     @include opacity(0.8);
-    @include box-shadow(0,1px,5px,rgba(0,0,0,0.8));
 
-    border : 1px solid rgba(255,255,255,0.5);
-    background-color : rgb(255,255,255);
-
-    z-index : 30;
+    background-color : rgba(255,255,255,0.4);
 
     position : absolute;
     bottom : -30px;
@@ -139,6 +134,8 @@ body {
   }
 
   .text-content {
+    @include opacity(0.65);
+
     position : relative;
     z-index : 10;
     color : #000;
@@ -154,25 +151,10 @@ body {
     }
   }
 
-  &.day:not(.sticky-note),
-  &.night:not(.sticky-note) {
-    .text-content {
-      padding : 10px 15px;
-      padding-bottom : 5px;
-
-      p {
-        font-size : 14px;
-        line-height : 19px;
-        color : #555;
-      }
-    }
-  }
-
   &.sticky-note {
     .content{
       min-height : $column-width + px;
       .text-content {
-        @include opacity(0.65);
         margin: 20px 20px 30px;
       }
     }
@@ -199,7 +181,6 @@ body {
         font-style : italic;
         text-align : center;
         padding: 0 20px;
-        word-break : break-all;
       }
     }
   }
@@ -216,7 +197,7 @@ body {
 
   &.blog-text {
     .text-content {
-      padding : 40px;
+      padding : 10px;
       @include opacity(0.9);
 
       p {
@@ -241,6 +222,7 @@ body {
     }
   }
 
+
   /* larger declarations */
   &.x2.width  .content { @include wide(); }
 
@@ -261,19 +243,26 @@ body {
     .image-container {
       background-color: black;
       display: table-cell;
+    }
 
+    img { max-height: 100% }
+
+    &.has-text{
       img {
+        //image container background is black, lowering opacity darkens image
         @include opacity(0.7);
       }
     }
 
+
+
     .text-content {
       position: absolute;
       left: 0;
       width: 100%;
       top: 40%;
       @include centered-frame();
-      font-size: 2em;
+      font-size: 3em;
       color: white;
       @include opacity(1);
       text-shadow : none;