seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-819 VRFS-76 band profile updates

This commit is contained in:
Brian Smith 2013-11-02 02:10:35 -04:00
parent cb44901c03
commit d063ba2a37
10 changed files with 309 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.idea
*~
*.swp
HTML

BIN
web/app/assets/images/content/icon_followers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

BIN
web/app/assets/images/content/icon_friend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
web/app/assets/images/content/icon_recordings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

BIN
web/app/assets/images/content/icon_session_tiny.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 B

64
web/app/assets/javascripts/profile.js
View File

@ -8,6 +8,8 @@
var userId;
var user = {};
var instrument_logo_map = context.JK.getInstrumentIconMap24();
var proficiencyDescriptionMap = {
"1": "BEGINNER",
"2": "INTERMEDIATE",
@ -481,21 +483,53 @@
processData:false,
success: function(response) {
$.each(response, function(index, val) {
var template = $('#template-profile-bands').html();
var bandHtml = context.JK.fillTemplate(template, {
bandId: val.id,
band_url: "/#/bandProfile/" + val.id,
avatar_url: context.JK.resolveAvatarUrl(val.logo_url),
name: val.name,
location: val.location,
genres: formatGenres(val.genres)
});
$('#profile-bands').append(bandHtml);
// build band member HTML
var musicianHtml = '';
if ("musicians" in val) {
for (var i=0; i < val.musicians.length; i++) {
var musician = val.musicians[i];
var instrumentLogoHtml = '';
if ("instruments" in musician) {
for (var j=0; j < musician.instruments.length; j++) {
var instrument = musician.instruments[j];
var inst = '../assets/content/icon_instrument_default24.png';
if (instrument.instrument_id in instrument_logo_map) {
inst = instrument_logo_map[instrument.instrument_id];
}
instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
}
}
// this template is in _findSession.html.erb
var musicianTemplate = $('#template-musician-info').html();
musicianHtml += context.JK.fillTemplate(musicianTemplate, {
avatar_url: context.JK.resolveAvatarUrl(musician.photo_url),
profile_url: "/#/profile/" + musician.id,
musician_name: musician.name,
instruments: instrumentLogoHtml
});
}
}
var template = $('#template-profile-bands').html();
var bandHtml = context.JK.fillTemplate(template, {
bandId: val.id,
biography: val.biography,
band_url: "/#/bandProfile/" + val.id,
avatar_url: context.JK.resolveAvatarUrl(val.logo_url),
name: val.name,
location: val.location,
genres: formatGenres(val.genres),
follower_count: val.follower_count,
recording_count: val.recording_count,
session_count: val.session_count,
musicians: musicianHtml
});
// wire up Band Follow button click handler
var following = isFollowingBand(val.id);
configureBandFollowingButton(following, val.id);
$('#profile-bands').append(bandHtml);
// wire up Band Follow button click handler
var following = isFollowingBand(val.id);
configureBandFollowingButton(following, val.id);
});
},
error: app.ajaxError
@ -518,7 +552,7 @@
function addBandFollowing(evt) {
evt.stopPropagation();
var bandId = $(this).parent().attr('band-id');
var bandId = $(this).parent().parent().attr('band-id');
var newFollowing = {};
newFollowing.band_id = bandId;
@ -532,7 +566,7 @@
data: JSON.stringify(newFollowing),
processData: false,
success: function(response) {
renderActive(); // refresh stats
renderBands(); // refresh stats
configureBandFollowingButton(true, bandId);
},
error: app.ajaxError

370
web/app/assets/stylesheets/client/content.css.scss
View File

@ -1,271 +1,271 @@
/* This is simply Jeff's content.css file */
@charset "UTF-8";
#content {
background-color: #353535;
border: 1px solid #ed3618;
clear: both;
float: left;
margin-top: 39px;
height: auto;
width: auto;
position:relative;
padding-bottom:3px;
background-color: #353535;
border: 1px solid #ed3618;
clear: both;
float: left;
margin-top: 39px;
height: auto;
width: auto;
position:relative;
padding-bottom:3px;
}
.content-head {
height:21px;
padding:4px;
background-color:#ED3618;
height:21px;
padding:4px;
background-color:#ED3618;
}
.content-icon {
margin-right:10px;
float:left;
margin-right:10px;
float:left;
}
.content-head h1 {
margin: -6px 0px 0px 0px;
padding:0;
float:left;
font-weight:100;
font-size:24px;
margin: -6px 0px 0px 0px;
padding:0;
float:left;
font-weight:100;
font-size:24px;
}
.content-nav {
float:right;
margin-right:10px;
float:right;
margin-right:10px;
}
.home-icon {
float:left;
margin-right:20px;
float:left;
margin-right:20px;
}
.content-nav a.arrow-right {
float:left;
display:block;
margin-top:2px;
margin-right:10px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #FFF;
float:left;
display:block;
margin-top:2px;
margin-right:10px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #FFF;
}
.content-nav a.arrow-left {
float:left;
display:block;
margin-top:2px;
margin-right:20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right:7px solid #FFF;
float:left;
display:block;
margin-top:2px;
margin-right:20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right:7px solid #FFF;
}
#content-scroller, .content-scroller {
height:inherit;
position:relative;
display:block;
overflow:auto;
height:inherit;
position:relative;
display:block;
overflow:auto;
}
.content-wrapper {
padding:10px 30px 10px 36px;
font-size:15px;
color:#ccc;
border-bottom: dotted 1px #444;
overflow-x:hidden;
white-space:nowrap;
padding:10px 30px 10px 36px;
font-size:15px;
color:#ccc;
border-bottom: dotted 1px #444;
overflow-x:hidden;
white-space:nowrap;
}
.create-session-left {
width:50%;
float:left;
width:50%;
float:left;
}
.create-session-right {
width:45%;
float:right;
font-size:13px;
width:45%;
float:right;
font-size:13px;
}
.content-wrapper h2 {
color:#fff;
font-weight:600;
font-size:24px;
color:#fff;
font-weight:600;
font-size:24px;
}
.content-wrapper select, .content-wrapper textarea, .content-wrapper input[type=text], .content-wrapper input[type=password], div.friendbox, .ftue-inner input[type=text], .ftue-inner input[type=password], .dialog-inner textarea, .dialog-inner input[type=text] {
font-family:"Raleway", arial, sans-serif;
background-color:#c5c5c5;
border:none;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
color:#666;
font-family:"Raleway", arial, sans-serif;
background-color:#c5c5c5;
border:none;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
color:#666;
}
.create-session-description {
padding:5px;
width:100%;
height:80px;
padding:5px;
width:100%;
height:80px;
}
.friendbox {
padding:5px;
width:100%;
height:60px;
padding:5px;
width:100%;
height:60px;
}
.invite-friend {
margin:0px 4px 4px 4px;
float:left;
display:block;
background-color:#666;
color:#fff;
font-size:12px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding:2px 2px 2px 4px;
margin:0px 4px 4px 4px;
float:left;
display:block;
background-color:#666;
color:#fff;
font-size:12px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding:2px 2px 2px 4px;
}
.content-wrapper div.friendbox input[type=text] {
-webkit-box-shadow: inset 0px 0px 0px 0px #888;
box-shadow: inset 0px 0px 0px 0px #888;
color:#666;
font-style:italic;
-webkit-box-shadow: inset 0px 0px 0px 0px #888;
box-shadow: inset 0px 0px 0px 0px #888;
color:#666;
font-style:italic;
}
#genrelist, #musicianlist {
position:relative;
z-index:99;
width: 175px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color:#C5C5C5;
border: none;
color:#333;
font-weight:400;
padding:0px 0px 0px 8px;
height:20px;
line-height:20px;
overflow:hidden;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
position:relative;
z-index:99;
width: 175px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color:#C5C5C5;
border: none;
color:#333;
font-weight:400;
padding:0px 0px 0px 8px;
height:20px;
line-height:20px;
overflow:hidden;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
}
#musicianlist, .session-controls #genrelist {
width: 150px;
width: 150px;
}
#genrelist a, #musicianlist a {
color:#333;
text-decoration:none;
color:#333;
text-decoration:none;
}
.genre-wrapper, .musician-wrapper {
float:left;
width:175px;
height:127px;
overflow:auto;
float:left;
width:175px;
height:127px;
overflow:auto;
}
.musician-wrapper, .session-controls .genre-wrapper {
width:150px;
width:150px;
}
.genrecategory {
font-size:11px;
float:left;
width:135px;
font-size:11px;
float:left;
width:135px;
}
.filtercategory, .session-controls .genrecategory {
font-size:11px;
float:left;
width:110px;
font-size:11px;
float:left;
width:110px;
}
a.arrow-up {
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #333;
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #333;
}
a.arrow-down {
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
}
.settings-session-description {
padding:10px;
width:300px;
padding:10px;
width:300px;
}
#session-controls {
width:100%;
padding:11px 0px 11px 0px;
background-color:#4c4c4c;
min-height:20px;
overflow-x:hidden;
}
width:100%;
padding:11px 0px 11px 0px;
background-color:#4c4c4c;
min-height:20px;
overflow-x:hidden;
}
#session-controls .searchbox {
float:left;
width:140px;
margin-left: 10px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color:#C5C5C5;
border: none;
color:#333;
font-weight:400;
padding:0px 0px 0px 8px;
height:20px;
line-height:20px;
overflow:hidden;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
float:left;
width:140px;
margin-left: 10px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color:#C5C5C5;
border: none;
color:#333;
font-weight:400;
padding:0px 0px 0px 8px;
height:20px;
line-height:20px;
overflow:hidden;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
}
#session-controls input[type=text] {
background-color:#c5c5c5;
border:none;
color:#666;
background-color:#c5c5c5;
border:none;
color:#666;
}
.avatar-tiny {
float:left;
padding:1px;
width:24px;
height:24px;
background-color:#ed3618;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
float:left;
padding:1px;
width:24px;
height:24px;
background-color:#ed3618;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
}
.ftue-background {
background-image:url(../images/content/bkg_ftue.jpg);
background-repeat:no-repeat;
background-size:cover;
min-height:475px;
min-width:672px;
background-image:url(../images/content/bkg_ftue.jpg);
background-repeat:no-repeat;
background-size:cover;
min-height:475px;
min-width:672px;
}
table.generaltable {
@ -350,3 +350,33 @@ ul.shortcuts {
white-space:normal;
}
.smallbutton {
font-size:10px !important;
padding:2px 8px !important;
}
.whitespace {
white-space:normal;
}
.w0 {width:0% !important}
.w5 {width:5% !important}
.w10 {width:10% !important}
.w15 {width:15% !important}
.w20 {width:20% !important}
.w25 {width:25% !important}
.w30 {width:30% !important}
.w35 {width:35% !important}
.w40 {width:40% !important}
.w45 {width:45% !important}
.w50 {width:50% !important}
.w55 {width:55% !important}
.w60 {width:60% !important}
.w65 {width:65% !important}
.w70 {width:70% !important}
.w75 {width:75% !important}
.w80 {width:80% !important}
.w85 {width:85% !important}
.w90 {width:90% !important}
.w95 {width:95% !important}
.w100 {width:100% !important}

23
web/app/assets/stylesheets/client/profile.css.scss
View File

@ -144,7 +144,7 @@
}
.profile-bands {
width:215px;
width:100%;
min-height:90px;
background-color:#242323;
position:relative;
@ -173,6 +173,15 @@
padding-right:5px;
}
.profile-band-list-result {
width:100%;
min-height:85px;
background-color:#242323;
position:relative;
margin:10px 0px 10px 0px;
padding-bottom:5px;
}
.profile-social-left {
float:left;
width:32%;
@ -216,3 +225,15 @@
.profile-block-city {
font-size:12px;
}
.profile-musicians {
margin-top:-3px;
font-size:11px;
}
.profile-musicians td {
border-right:none;
border-top:none;
padding:3px;
vertical-align:middle;
}

19
web/app/views/api_users/band_index.rabl
View File

@ -1,7 +1,24 @@
collection @bands
# do not retrieve all child collections when showing a list of bands
attributes :id, :name, :location, :photo_url, :logo_url
attributes :id, :name, :city, :state, :country, :location, :website, :biography, :photo_url, :logo_url, :liker_count, :follower_count, :recording_count, :session_count
node :musicians do |band|
unless band.users.nil? || band.users.size == 0
child :users => :musicians do
attributes :id, :first_name, :last_name, :name, :photo_url
# TODO: figure out how to omit empty arrays
node :instruments do |user|
unless user.instruments.nil? || user.instruments.size == 0
child :musician_instruments => :instruments do
attributes :instrument_id, :description, :proficiency_level, :priority
end
end
end
end
end
end
node :genres do |band|
unless band.genres.nil? || band.genres.size == 0

23
web/app/views/clients/_profile.html.erb
View File

@ -66,6 +66,8 @@
<br clear="all" />
</div>
<div id="profile-bands" class="profile-wrapper">
<div class="profile-band-list-result">
</div>
<br clear="all" />
</div>
<div id="profile-social" class="profile-wrapper">
@ -106,12 +108,25 @@
<div class="avatar-small">
<img src="{avatar_url}" width="275" height="183" />
</div>
<div class="profile-band-name"><a href="{band_url}">{name}</a><br />
<div class="profile-band-name">
{name}<br />
<span class="profile-band-location">{location}</span>
<br clear="left" /><br />
<div style="width:50px;">{genres}</div><br /><br />
{follower_count}&nbsp;<img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;
{recording_count}&nbsp;<img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;
{session_count}&nbsp;<img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
</div>
<div style="height:90px" class="left ml20 f11 whitespace w35"><br />
{biography}<br /><br />
<a class="button-orange smallbutton m0" href="{band_url}">PROFILE</a>&nbsp;&nbsp;
<a id="btn-follow-band" class="button-orange smallbutton m0">FOLLOW</a>
</div>
<div class="left ml10 w25">
<table class="profile-musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>
</div>
<br clear="left" />
<div class="profile-band-genres">{genres}</div>
<a id="btn-follow-band" class="button-orange smallbutton right">FOLLOW</a>
</div>
</script>