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

images aren't darkened in wallpaper if they don't have text

Browse source
This commit is contained in:
Dennis Collinson 2012-04-24 13:24:46 -07:00
parent 0dcb0f6446
commit 6ac1c5bc21
2 changed files with 31 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,22 +25,28 @@ app.views.SmallFrame = app.views.Base.extend({
}, },
colorClass : function() { colorClass : function() {
var text = this.model.get("text"); var text = this.model.get("text")
if(text == "" || this.model.get("photos").length > 0) { return "" } , 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'])); var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
randomColor += " sticky-note"
var textClass;
if(text.length > 240) { if(text.length > 240) {
return "blog-text x2 width" textClass = "blog-text x2 width"
} else if(text.length > 140) { } else if(text.length > 140) {
return randomColor textClass = randomColor
} else if(text.length > 35) { } else if(text.length > 50) {
return randomColor textClass = randomColor
} else { } else {
return "big-text " + randomColor textClass = "big-text " + randomColor
} }
return [baseClass, textClass, "sticky-note"].join(" ")
}, },
dimensionsClass : function() { dimensionsClass : function() {
/* by default, make it big if it's a fav */ /* by default, make it big if it's a fav */
if(this.model.get("favorite")) { return "x2 width height" } if(this.model.get("favorite")) { return "x2 width height" }

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

@ -29,7 +29,7 @@ $sand : rgb(245, 239, 237);
body { body {
background-color : #F6F6F6; background-color : #F6F6F6;
background-image : image_url('pattern.jpg'); background-image : image_url('pattern.jpg')
} }
.canvas-frame { .canvas-frame {
@ -60,7 +60,6 @@ body {
p { p {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
word-break : hyphenate;
} }
position : relative; position : relative;
@ -103,19 +102,15 @@ body {
.fav { .fav {
position : absolute; position : absolute;
z-index : 100; z-index : 100;
top : 5px; top : 10px;
right : 5px; right : 10px;
} }
.info { .info {
@include transition(bottom); @include transition(bottom);
@include opacity(0.8); @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 : rgba(255,255,255,0.4);
background-color : rgb(255,255,255);
z-index : 30;
position : absolute; position : absolute;
bottom : -30px; bottom : -30px;
@ -139,6 +134,8 @@ body {
} }
.text-content { .text-content {
@include opacity(0.65);
position : relative; position : relative;
z-index : 10; z-index : 10;
color : #000; 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 { &.sticky-note {
.content{ .content{
min-height : $column-width + px; min-height : $column-width + px;
.text-content { .text-content {
@include opacity(0.65);
margin: 20px 20px 30px; margin: 20px 20px 30px;
} }
} }
@ -199,7 +181,6 @@ body {
font-style : italic; font-style : italic;
text-align : center; text-align : center;
padding: 0 20px; padding: 0 20px;
word-break : break-all;
} }
} }
} }
@ -216,7 +197,7 @@ body {
&.blog-text { &.blog-text {
.text-content { .text-content {
padding : 40px; padding : 10px;
@include opacity(0.9); @include opacity(0.9);
p { p {
@ -241,6 +222,7 @@ body {
} }
} }
/* larger declarations */ /* larger declarations */
&.x2.width .content { @include wide(); } &.x2.width .content { @include wide(); }
@ -261,19 +243,26 @@ body {
.image-container { .image-container {
background-color: black; background-color: black;
display: table-cell; display: table-cell;
}
img { max-height: 100% }
&.has-text{
img { img {
//image container background is black, lowering opacity darkens image
@include opacity(0.7); @include opacity(0.7);
} }
} }
.text-content { .text-content {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
top: 40%; top: 40%;
@include centered-frame(); @include centered-frame();
font-size: 2em; font-size: 3em;
color: white; color: white;
@include opacity(1); @include opacity(1);
text-shadow : none; text-shadow : none;