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

this changes profile background colors to be dark, and sets up the groundwork for uploading user-selected background images for their profiles. all the styling is in place; what remains is creating a new image uploader and (possibly) a new controller action.

Browse source 
for information on what command to use to darken the background image that's uploaded, see line 11 in `_profile.scss`.  the current image tests in the public folder are results of the convert command noted.
This commit is contained in:
danielgrippi 2012-05-05 16:55:12 -07:00
parent 2f618f6dde
commit b5fbefad4b
15 changed files with 91 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/buttons/bday@2x-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
app/assets/images/buttons/service-icons/fb@2x-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
app/assets/images/buttons/service-icons/tumblr@2x-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
app/assets/images/buttons/service-icons/twitter@2x-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
app/assets/javascripts/app/pages/profile.js
View file

@ -2,7 +2,8 @@
//= require ../views/profile_info_view //= require ../views/profile_info_view
app.pages.Profile = app.views.Base.extend({ app.pages.Profile = app.views.Base.extend({
className : "container",
id : "profile",
templateName : "profile", templateName : "profile",

4
app/assets/stylesheets/new_styles/_base.scss
View file

@ -1,3 +1,7 @@
body {
background-image : image_url("pattern.png");
}
/* new link color */ /* new link color */
a { color : rgb(42,156,235) } a { color : rgb(42,156,235) }

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

@ -1,15 +1,9 @@
@mixin wide() { @mixin wide() {
width : $two-column-width + px; width : $two-column-width + px;
min-width : $two-column-width + px; min-width : $two-column-width + px;
max-width : $two-column-width + px; max-width : $two-column-width + px;
} }
body {
background-color : #F6F6F6;
background-image : image_url('pattern.png')
}
.canvas-frame { .canvas-frame {
float : left; float : left;
margin : 10px; margin : 10px;
@ -28,7 +22,7 @@ body {
.content { .content {
@include transition(box-shadow); @include transition(box-shadow);
@include box-shadow(0,1px,3px,rgba(0,0,0,0.2)); @include box-shadow(0,1px,10px,rgba(0,0,0,0.9));
background-image : image_url("paper-texture-1.jpg"); background-image : image_url("paper-texture-1.jpg");

22
app/assets/stylesheets/new_styles/_profile.scss
View file

@ -1,3 +1,25 @@
#profile {
color : #fff;
background : {
color : #333;
/* The background-image property will be user-generated and set in `app.pages.Profile` (app/assets/javascripts/app/pages/profile.js)
and should ONLY be set once the image is fully loaded.
Optimal imagemagick manipulation settings for uploaded image (via trial & error):
`convert -brightness-contrast -40x-50`
NOTE: I noticed that just turning the brightness down had an adverse affect on contrast,
thus the "washing out" at -50 contrast. For more info on this specific command, read the documentation
on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */
image : url('/imagetest.jpg');
size : cover;
attachment : fixed;
}
}
/* getting started pulse animation */ /* getting started pulse animation */
#composer-button.pulse { #composer-button.pulse {
-webkit-animation: opacity-pulse 1s infinite; -webkit-animation: opacity-pulse 1s infinite;

12
app/assets/templates/profile-info.jst.hbs
View file

@ -8,7 +8,7 @@
{{#if location}} {{#if location}}
<span class="stat"> <span class="stat">
<a href="http://maps.google.com/maps?q={{location}}" target="_blank"> <a href="http://maps.google.com/maps?q={{location}}" target="_blank">
<i class="icon-map-marker"></i> <i class="icon-map-marker icon-white"></i>
</a> </a>
{{location}} {{location}}
</span> </span>
@ -17,7 +17,7 @@
{{#if birthday}} {{#if birthday}}
<span class="stat"> <span class="stat">
<img src='{{imageUrl "buttons/bday@2x.png"}}' class="cake" /> <img src='{{imageUrl "buttons/bday@2x-white.png"}}' class="cake" />
{{birthday}} {{birthday}}
</span> </span>
<span class="divider">•</span> <span class="divider">•</span>
@ -25,20 +25,20 @@
<span class="stat services"> <span class="stat services">
<a href="https://facebook.com" class="service" target="_blank"> <a href="https://facebook.com" class="service" target="_blank">
<img src='{{imageUrl "buttons/service-icons/fb@2x.png"}}' /> <img src='{{imageUrl "buttons/service-icons/fb@2x-white.png"}}' />
</a> </a>
<a href="https://twitter.com" class="service" target="_blank"> <a href="https://twitter.com" class="service" target="_blank">
<img src='{{imageUrl "buttons/service-icons/twitter@2x.png"}}' /> <img src='{{imageUrl "buttons/service-icons/twitter@2x-white.png"}}' />
</a> </a>
<a href="https://tumblr.com" class="service" target="_blank"> <a href="https://tumblr.com" class="service" target="_blank">
<img src='{{imageUrl "buttons/service-icons/tumblr@2x.png"}}' /> <img src='{{imageUrl "buttons/service-icons/tumblr@2x-white.png"}}' />
</a> </a>
</span> </span>
{{#if isOwnProfile}} {{#if isOwnProfile}}
<span class="divider">•</span> <span class="divider">•</span>
<a href="/profile/edit" title="Edit Profile" rel="tooltip" style="margin-left:2px;"> <a href="/profile/edit" title="Edit Profile" rel="tooltip" style="margin-left:2px;">
<i class="icon-cog"></i> <i class="icon-cog icon-white"></i>
</a> </a>
{{/if}} {{/if}}
</div> </div>

110
app/assets/templates/profile.jst.hbs
View file

@ -1,60 +1,62 @@
<div id="top-right-nav"> <div class="container">
{{#if showFollowButton}} <div id="top-right-nav">
<a href="#" onClick="alert('Not yet implemented!')" id="follow-button"> {{#if showFollowButton}}
<span class="label label-inverse"> <a href="#" onClick="alert('Not yet implemented!')" id="follow-button">
<i class="icon-plus icon-white"></i> <span class="label label-inverse">
<span> <i class="icon-plus icon-white"></i>
FOLLOW <span>
FOLLOW
</span>
</span> </span>
</span> </a>
</a> {{/if}}
{{/if}}
{{#if current_user.guid}} {{#if current_user.guid}}
<a href="/" id="home-button"> <a href="/" id="home-button">
<span class="label label-inverse"> <span class="label label-inverse">
<i class="icon-home icon-white"></i> <i class="icon-home icon-white"></i>
<span> <span>
HOME HOME
</span>
</span> </span>
</span> </a>
</a> {{else}}
{{else}} <a href="/" id="home-button">
<a href="/" id="home-button"> <span class="label label-inverse">
<span class="label label-inverse"> <span>
<span> DIASPORA
DIASPORA </span>
</span> </span>
</span> </a>
</a> {{/if}}
{{/if}}
{{#if isOwnProfile}} {{#if isOwnProfile}}
<a href="/users/sign_out" title="Log out" id="logout-button"> <a href="/users/sign_out" title="Log out" id="logout-button">
<span class="label label-inverse"> <span class="label label-inverse">
<i class="icon-off icon-white"></i> <i class="icon-off icon-white"></i>
</span> </span>
</a> </a>
{{/if}} {{/if}}
</div>
<section id="profile-info"/>
<div id="composer" style="display:none;">
<iframe src="/posts/new" height=500 width=700 style="border:none;"></iframe>
</div>
<section id="profile-controls">
{{#if isOwnProfile}}
<a href="#composer" id="composer-button" class="control small" rel="facebox">
<img src='{{imageUrl "buttons/pub@2x.png"}}' title="New Post" rel="tooltip"/>
</a>
<a href="#" id="edit-mode-toggle" class="control small">
<img src='{{imageUrl "buttons/edit@2x.png"}}' title="Edit Posts" rel="tooltip"/>
</a>
{{/if}}
</section>
<section id="canvas"></section>
<div id="paginate"><span class="loader hidden"/></div>
</div> </div>
<section id="profile-info"/>
<div id="composer" style="display:none;">
<iframe src="/posts/new" height=500 width=700 style="border:none;"></iframe>
</div>
<section id="profile-controls">
{{#if isOwnProfile}}
<a href="#composer" id="composer-button" class="control small" rel="facebox">
<img src='{{imageUrl "buttons/pub@2x.png"}}' title="New Post" rel="tooltip"/>
</a>
<a href="#" id="edit-mode-toggle" class="control small">
<img src='{{imageUrl "buttons/edit@2x.png"}}' title="Edit Posts" rel="tooltip"/>
</a>
{{/if}}
</section>
<section id="canvas"></section>
<div id="paginate"><span class="loader hidden"/></div>

BIN
public/imagetest-unmodified.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 239 KiB

BIN
public/imagetest.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
public/imagetest2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/img/glyphicons-halflings-white.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/img/glyphicons-halflings.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.3 KiB