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-2701 wip for musician profile UI enhancements

This commit is contained in:
Brian Smith 2015-02-21 23:26:08 -05:00
parent 6657c810ed
commit 3e473a9ec3
6 changed files with 503 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/assets/javascripts/jam_rest.js
View File

@ -1600,6 +1600,7 @@
this.cancelSession = cancelSession;
this.updateScheduledSession = updateScheduledSession;
this.getUserDetail = getUserDetail;
this.getUserProfile = getUserProfile;
this.getCities = getCities;
this.getRegions = getRegions;
this.getCountries = getCountries;

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

@ -11,9 +11,65 @@
var rest = context.JK.Rest();
var decrementedFriendCountOnce = false;
var sentFriendRequest = false;
var profileScreen = null;
var textMessageDialog = null;
var feed = null;
var profileUtils = context.JK.ProfileUtils;
var NOT_SPECIFIED_TEXT = 'Not specified';
var $screen = $('#user-profile');
var $instruments = $screen.find('#instruments');
var $musicianStatus = $screen.find('#musician-status');
var $genres = $screen.find('#genres');
var $concertCount = $screen.find('#concert-count');
var $studioCount = $screen.find('#studio-count');
var $aboutLink = $screen.find('#about-link');
var $aboutContent = $screen.find('#about-content');
var $historyLink = $screen.find('#history-link');
var $historyContent = $screen.find('#history-content');
var $bandsLink = $screen.find('#bands-link');
var $bandsContent = $screen.find('#bands-content');
var $socialLink = $screen.find('#social-link');
var $socialContent = $screen.find('#social-content');
var $favoritesLink = $screen.find('#favorites-link');
var $favoritesContent = $screen.find('#favorites-content');
var $friendStats = $screen.find('#friend-stats');
var $followerStats = $screen.find('#follower-stats');
var $sessionStats = $screen.find('#session-stats');
var $recordingStats = $screen.find('#recording-stats');
var $followingStats = $screen.find('#following-stats');
var $favoriteStats = $screen.find('#favorite-stats');
var $typeLabel = $screen.find('#type-label');
var $location = $screen.find('#location');
var $age = $screen.find('#age');
var $btnEdit = $screen.find('#btn-edit');
var $btnAddFriend = $screen.find('#btn-add-friend');
var $btnFollowUser = $screen.find('#btn-follow-user');
var $btnMessageUser = $screen.find('#btn-message-user');
var $socialLeft = $screen.find('.profile-social-left');
var $socialFriends = $screen.find('#social-friends');
var $socialFollowings = $screen.find('#social-followings');
var $socialFollowers = $screen.find('#social-followers');
var $userName = $screen.find('#username');
var $avatar = $screen.find('#avatar');
var $bioTextArea = $screen.find('.user-biography');
var $showBio = $screen.find('.have-bio');
var $noBio = $screen.find('.no-bio');
var $biographyEditor = $screen.find('.update-biography');
var $submitBiographyButton = $screen.find('#btn-update-user-biography');
var $cancelBiographyButton = $screen.find('#btn-cancel-user-biography');
var $biographyText = $screen.find('#biography');
var instrument_logo_map = context.JK.getInstrumentIconMap24();
@ -23,6 +79,27 @@
"3": "EXPERT"
};
var skillLevelMap = {
"1": "Amateur",
"2": "Professional"
}
var concertGigMap = {
"0": "zero",
"1": "under 10",
"2": "10 to 50",
"3": "50 to 100",
"4": "over 100"
}
var studioGigMap = {
"0": "zero",
"1": "under 10",
"2": "10 to 50",
"3": "50 to 100",
"4": "over 100"
}
var proficiencyCssMap = {
"1": "proficiency-beginner",
"2": "proficiency-intermediate",
@ -44,23 +121,23 @@
}
function resetForm() {
$('#profile-instruments').empty();
$instruments.empty();
$('#profile-about').show();
$('#profile-history').hide();
$('#profile-bands').hide();
$('#profile-social').hide();
$('#profile-favorites').hide();
$aboutContent.show();
$historyContent.hide();
$bandsContent.hide();
$socialContent.hide();
$favoritesContent.hide();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-about-link').addClass('active');
$aboutLink.addClass('active');
}
function initUser() {
user = null;
decrementedFriendCountOnce = false;
sentFriendRequest = false;
userDefer = rest.getUserDetail({id: userId})
userDefer = rest.getUserProfile({id: userId})
.done(function (response) {
user = response;
configureUserType();
@ -89,43 +166,43 @@
function configureUserType() {
if (isMusician()) {
$('#profile-history-link').show();
$('#profile-bands-link').show();
$('#profile-instruments').show();
$('#profile-session-stats').show();
$('#profile-recording-stats').show();
// $('#profile-following-stats').hide();
// $('#profile-favorites-stats').hide();
$('.profile-social-left').show();
$('#profile-type-label').text('musician');
$('#profile-location-label').text('Location');
$historyLink.show();
$bandsLink.show();
$instruments.show();
$sessionStats.show();
$recordingStats.show();
// $followingStats.hide();
// $favoriteStats.hide();
$socialLeft.show();
$typeLabel.text('musician');
$location.text('Location');
}
else {
$('#profile-history-link').hide();
$('#profile-bands-link').hide();
$('#profile-instruments').hide();
$('#profile-session-stats').hide();
$('#profile-recording-stats').hide();
// $('#profile-following-stats').show();
// $('#profile-favorites-stats').show();
$('.profile-social-left').hide();
$('#profile-type-label').text('fan');
$('#profile-location-label').text('Presence');
$historyLink.hide();
$bandsLink.hide();
$instruments.hide();
$sessionStats.hide();
$recordingStats.hide();
// $followingStats.show();
// $favoriteStats.show();
$socialLeft.hide();
$typeLabel.text('fan');
$location.text('Presence');
}
if (isCurrentUser()) {
$('#btn-profile-edit').show();
$('#btn-add-friend').hide();
$('#btn-follow-user').hide();
$('#btn-message-user').hide();
$btnEdit.show();
$btnAddFriend.hide();
$btnFollowUser.hide();
$btnMessageUser.hide();
}
else {
configureFriendFollowersControls();
$('#btn-profile-edit').hide();
$('#btn-add-friend').show();
$('#btn-follow-user').show();
$('#btn-message-user').show();
$btnEdit.hide();
$btnAddFriend.show();
$btnFollowUser.show();
$btnMessageUser.show();
}
}
@ -141,26 +218,30 @@
// events for main screen
function events() {
// wire up panel clicks -- these need to check deferred because they can't be hidden when in an invalid state
$('#profile-about-link').click(function () {
$aboutLink.click(function () {
renderTabDeferred(renderAbout)
});
$('#profile-history-link').click(function () {
$historyLink.click(function () {
renderTabDeferred(renderHistory)
});
$('#profile-bands-link').click(function () {
$bandsLink.click(function () {
renderTabDeferred(renderBands)
});
$('#profile-social-link').click(function () {
$socialLink.click(function () {
renderTabDeferred(renderSocial)
});
$('#profile-favorites-link').click(function () {
$favoritesLink.click(function () {
renderTabDeferred(renderFavorites)
});
// this doesn't need deferred because it's only shown when valid
$('#btn-add-friend').click(handleFriendChange);
$('#btn-follow-user').click(handleFollowingChange);
$('#btn-message-user').click(handleMessageMusician);
$btnAddFriend.click(handleFriendChange);
$btnFollowUser.click(handleFollowingChange);
$btnMessageUser.click(handleMessageMusician);
}
function handleFriendChange(evt) {
@ -221,10 +302,10 @@
function configureFriendButton() {
if (isFriend()) {
$('#btn-add-friend').text('DISCONNECT');
$btnAddFriend.text('DISCONNECT');
}
else {
$('#btn-add-friend').text('CONNECT');
$btnAddFriend.text('CONNECT');
}
}
@ -267,32 +348,32 @@
function configureFollowingButton() {
if (isFollowing()) {
$('#btn-follow-user').text('UNFOLLOW');
$btnFollowUser.text('UNFOLLOW');
}
else {
$('#btn-follow-user').text('FOLLOW');
$btnFollowUser.text('FOLLOW');
}
}
function configureEditProfileButton() {
$('#btn-follow-user').click(addFollowing);
$btnFollowUser.click(addFollowing);
}
// refreshes the currently active tab
function renderActive() {
if ($('#profile-about-link').hasClass('active')) {
if ($aboutLink.hasClass('active')) {
renderAbout();
}
else if ($('#profile-history-link').hasClass('active')) {
else if ($historyLink.hasClass('active')) {
renderHistory();
}
else if ($('#profile-bands-link').hasClass('active')) {
else if ($bandsLink.hasClass('active')) {
renderBands();
}
else if ($('#profile-social-link').hasClass('active')) {
else if ($socialLink.hasClass('active')) {
renderSocial();
}
else if ($('#profile-favorites-link').hasClass('active')) {
else if ($favoritesLink.hasClass('active')) {
renderFavorites();
}
}
@ -310,29 +391,29 @@
/****************** ABOUT TAB *****************/
function renderAbout() {
$('#profile-instruments').empty();
$instruments.empty();
$('#profile-about').show();
$('#profile-history').hide();
$('#profile-bands').hide();
$('#profile-social').hide();
$('#profile-favorites').hide();
$aboutContent.show();
$historyContent.hide();
$bandsContent.hide();
$socialContent.hide();
$favoritesContent.hide();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-about-link').addClass('active');
$aboutLink.addClass('active');
bindAbout();
}
function bindAbout() {
$('#profile-instruments').empty();
$instruments.empty();
// name
$('#profile-username').html(user.name);
$userName.html(user.name);
// avatar
$('#profile-avatar').attr('src', context.JK.resolveAvatarUrl(user.photo_url));
$avatar.attr('src', context.JK.resolveAvatarUrl(user.photo_url));
// instruments
if (user.instruments) {
@ -351,40 +432,58 @@
proficiency_level_css: proficiencyCssMap[proficiency]
});
$('#profile-instruments').append(instrumentHtml);
$instruments.append(instrumentHtml);
}
}
$('#profile-genres').empty();
for (var i=0; i< user.genres.length; i++) {
$('#profile-genres').append(user.genres[i].description + '<br />');
// status
var status = user.skill_level;
$musicianStatus.html(status ? skillLevelMap[status] + ' musician' : NOT_SPECIFIED_TEXT)
// genres
$genres.empty();
var profileGenres = profileUtils.profileGenres(user.genres);
for (var i=0; i < profileGenres.length; i++) {
$genres.append(profileGenres[i].genre_id);
if (i !== profileGenres.length - 1) {
$genres.append(', ');
}
}
// location
$('#profile-location').html(user.location);
// concert gigs
var concertGigCount = user.concert_count;
$concertCount.html(concertGigCount > 0 ? 'Has played ' + concertGigCount + ' live concert gigs' : NOT_SPECIFIED_TEXT);
$('#profile-age').html(user.age ? user.age + " years old" : "");
// studio gigs
var studioGigCount = user.studio_session_count;
$studioCount.html(studioGigCount > 0 ? 'Has played ' + studioGigCount + ' studio session gigs' : NOT_SPECIFIED_TEXT);
// location
$location.html(user.location);
$age.html(user.age ? user.age + " years old" : "");
// stats
var text = user.friend_count > 1 || user.friend_count === 0 ? " Friends" : " Friend";
$('#profile-friend-stats').html('<span class="friend-count">' + user.friend_count + '</span>' + text);
$friendStats.html('<span class="friend-count">' + user.friend_count + '</span>' + text);
text = user.follower_count > 1 || user.follower_count === 0 ? " Followers" : " Follower";
$('#profile-follower-stats').html('<span class="follower-count">' + user.follower_count + '</span>' + text);
$followerStats.html('<span class="follower-count">' + user.follower_count + '</span>' + text);
// text = user.following_count > 1 || user.following_count === 0 ? " Followings" : " Following";
// $('#profile-following-stats').html('<span class="following-count">' + user.following_count + '</span>' + text);
if (isMusician()) {
text = user.session_count > 1 || user.session_count === 0 ? " Sessions" : " Session";
$('#profile-session-stats').html(user.session_count + text);
$sessionStats.html(user.session_count + text);
text = user.recording_count > 1 || user.recording_count === 0 ? " Recordings" : " Recording";
$('#profile-recording-stats').html(user.recording_count + text);
$recordingStats.html(user.recording_count + text);
} else {
text = " Following";
$('#profile-following-stats').html(user.following_count + text);
$followingStats.html(user.following_count + text);
text = user.favorite_count > 1 || user.favorite_count === 0 ? " Favorites" : " Favorite";
$('#profile-favorite-stats').html(user.favorite_count + text);
$favoriteStats.html(user.favorite_count + text);
}
renderBio();
@ -414,14 +513,6 @@
}
}
var $bioTextArea = $('.user-biography', profileScreen);
var $showBio = $('.have-bio', profileScreen);
var $noBio = $('.no-bio', profileScreen);
var $biographyEditor = $('.update-biography', profileScreen);
var $submitBiographyButton = $('#btn-update-user-biography', profileScreen);
var $cancelBiographyButton = $('#btn-cancel-user-biography', profileScreen);
var $biographyText = $('#profile-biography', profileScreen);
initializeBioVisibility();
// $addBiographyButton.unbind('click').click(function() {
@ -466,18 +557,18 @@
/****************** SOCIAL TAB *****************/
function renderSocial() {
$('#profile-social-friends').empty();
$('#profile-social-followings').empty();
$('#profile-social-followers').empty();
$socialFriends.empty();
$socialFollowings.empty();
$socialFollowers.empty();
$('#profile-about').hide();
$('#profile-history').hide();
$('#profile-bands').hide();
$('#profile-social').show();
$('#profile-favorites').hide();
$aboutContent.hide();
$historyContent.hide();
$bandsContent.hide();
$socialContent.show();
$favoritesContent.hide();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-social-link').addClass('active');
$socialLink.addClass('active');
bindSocial();
}
@ -500,11 +591,11 @@
type: "Friends"
});
$('#profile-social-friends').append(friendHtml);
$socialFriends.append(friendHtml);
});
}
else {
$('#profile-social-friends').html('&nbsp;');
$socialFriends.html('&nbsp;');
}
context.JK.bindHoverEvents();
})
@ -525,11 +616,11 @@
location: val.location
});
$('#profile-social-followings').append(followingHtml);
$socialFollowings.append(followingHtml);
});
}
else {
$('#profile-social-followings').html('&nbsp;');
$socialFollowings.html('&nbsp;');
}
context.JK.bindHoverEvents();
})
@ -548,7 +639,7 @@
location: val.location
});
$('#profile-social-followers').append(followerHtml);
$socialFollowers.append(followerHtml);
});
context.JK.bindHoverEvents();
})
@ -557,14 +648,14 @@
/****************** HISTORY TAB *****************/
function renderHistory() {
$('#profile-about').hide();
$('#profile-history').show();
$('#profile-bands').hide();
$('#profile-social').hide();
$('#profile-favorites').hide();
$aboutContent.hide();
$historyContent.show();
$bandsContent.hide();
$socialContent.hide();
$favoritesContent.hide();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-history-link').addClass('active');
$historyLink.addClass('active');
bindHistory();
}
@ -575,16 +666,16 @@
/****************** BANDS TAB *****************/
function renderBands() {
$('#profile-bands').empty();
$bandsContent.empty();
$('#profile-about').hide();
$('#profile-history').hide();
$('#profile-bands').show();
$('#profile-social').hide();
$('#profile-favorites').hide();
$aboutContent.hide();
$historyContent.hide();
$bandsContent.show();
$socialContent.hide();
$favoritesContent.hide();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-bands-link').addClass('active');
$bandsLink.addClass('active');
bindBands();
}
@ -595,7 +686,7 @@
.done(function (response) {
if ((!response || response.length === 0) && isCurrentUser()) {
var noBandHtml = $('#template-no-bands').html();
$("#profile-bands").html(noBandHtml);
$bandsContent.html(noBandHtml);
}
else {
addMoreBandsLink();
@ -653,7 +744,7 @@
musicians: musicianHtml
});
$('#profile-bands').append(bandHtml);
$bandsContent.append(bandHtml);
$('.profile-band-link-member-true').each(function(idx) {
isBandMember ? $(this).show() : $(this).hide();
@ -678,7 +769,7 @@
function addMoreBandsLink() {
if (isCurrentUser()) {
var moreBandsHtml = $('#template-more-bands').html();
$("#profile-bands").append(moreBandsHtml);
$bandsContent.append(moreBandsHtml);
}
}
@ -705,13 +796,13 @@
}
function updateFollowingCount(value) {
var followingCount = $('#profile-follower-stats span.follower-count');
followingCount.text(value + parseInt(followingCount.text()));
var $followingCount = $('#follower-stats span.follower-count');
$followingCount.text(value + parseInt($followingCount.text()));
}
function updateBandFollowingCount(bandId, value) {
var bandFollowing = $('div[band-id="' + bandId + '"].profile-bands span.follower-count');
bandFollowing.text(value + parseInt(bandFollowing.text()));
var $bandFollowing = $('div[band-id="' + bandId + '"].bands span.follower-count');
$bandFollowing.text(value + parseInt($bandFollowing.text()));
}
function addBandFollowing(evt) {
@ -732,7 +823,7 @@
}
function configureBandFollowingButton(following, bandId) {
var $btnFollowBand = $('div[band-id=' + bandId + ']', '#profile-bands').find('#btn-follow-band-2');
var $btnFollowBand = $('div[band-id=' + bandId + ']', '#bands').find('#btn-follow-band');
$btnFollowBand.unbind("click");
if (following) {
@ -751,14 +842,14 @@
/****************** FAVORITES TAB *****************/
function renderFavorites() {
$('#profile-about').hide();
$('#profile-history').hide();
$('#profile-bands').hide();
$('#profile-social').hide();
$('#profile-favorites').show();
$aboutContent.hide();
$historyContent.hide();
$bandsContent.hide();
$socialContent.hide();
$favoritesContent.show();
$('.profile-nav a.active').removeClass('active');
$('.profile-nav a#profile-favorites-link').addClass('active');
$favoritesLink.addClass('active');
bindFavorites();
}
@ -769,16 +860,16 @@
function initializeFeed() {
var $scroller = profileScreen.find('.content-body-scroller#user-profile-feed-scroller');
var $content = profileScreen.find('.feed-content#user-profile-feed-entry-list');
var $noMoreFeeds = $('#user-profile-end-of-feeds-list');
var $refresh = profileScreen.find('.btn-refresh-entries');
var $sortFeedBy = profileScreen.find('#feed_order_by');
var $includeDate = profileScreen.find('#feed_date');
var $includeType = profileScreen.find('#feed_show');
var $scroller = $screen.find('.content-body-scroller#user-profile-feed-scroller');
var $content = $screen.find('.feed-content#user-profile-feed-entry-list');
var $noMoreFeeds = $screen.find('#user-profile-end-of-feeds-list');
var $refresh = $screen.find('.btn-refresh-entries');
var $sortFeedBy = $screen.find('#feed_order_by');
var $includeDate = $screen.find('#feed_date');
var $includeType = $screen.find('#feed_show');
feed = new context.JK.Feed(app);
feed.initialize(profileScreen, $scroller, $content, $noMoreFeeds, $refresh, $sortFeedBy, $includeDate, $includeType, {time_range: 'all'});
feed.initialize($screen, $scroller, $content, $noMoreFeeds, $refresh, $sortFeedBy, $includeDate, $includeType, {time_range: 'all'});
}
function initialize(textMessageDialogInstance) {
@ -789,7 +880,6 @@
'beforeHide' : beforeHide
};
app.bindScreen('profile', screenBindings);
profileScreen = $('#user-profile');
events();
initializeFeed();
}

69
web/app/assets/javascripts/profile_utils.js Normal file
View File

@ -0,0 +1,69 @@
/**
* Common utility functions.
*/
(function (context, $) {
"use strict";
context.JK = context.JK || {};
var profileUtils = {};
context.JK.ProfileUtils = profileUtils;
var PROFILE_GENRE_TYPE = 'profile';
var VIRTUAL_BAND_GENRE_TYPE = 'virtual_band';
var TRADITIONAL_BAND_GENRE_TYPE = 'traditional_band';
var PAID_SESSION_GENRE_TYPE = 'paid_session';
var FREE_SESSION_GENRE_TYPE = 'free_session';
var COWRITING_GENRE_TYPE = 'cowriting';
var USER_TYPE = 'JamRuby::User';
profileUtils.profileGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === PROFILE_GENRE_TYPE;
});
return matches;
}
profileUtils.virtualBandGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === VIRTUAL_BAND_GENRE_TYPE;
});
return matches;
}
profileUtils.traditionalBandGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === TRADITIONAL_BAND_GENRE_TYPE;
});
return matches;
}
profileUtils.paidSessionGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === PAID_SESSION_GENRE_TYPE;
});
return matches;
}
profileUtils.freeSessionGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === FREE_SESSION_GENRE_TYPE;
});
return matches;
}
profileUtils.cowritingGenres = function(genres) {
var matches = $.grep(genres, function(g) {
return g.player_type === USER_TYPE && g.genre_type === COWRITING_GENRE_TYPE;
});
return matches;
}
})(window, jQuery);

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

@ -28,19 +28,17 @@
margin: 0px 0px 0px 0px;
}
.profile-about-right .section {
font-weight:bold;
.profile-about-right .section-header {
font-weight:200;
font-size:20px;
float:left;
margin: 0px 0px 0px 0px;
margin: 0px 0px 10px 0px;
}
.profile-status {
.profile-experience {
font-size:12px;
float:left;
display:inline-block;
vertical-align:middle;
line-height:30px;
width: 80px;
}
.profile-photo {
@ -165,7 +163,7 @@
font-weight:600;
}
#profile-bands .when-empty {
#bands-content .when-empty {
margin: 0px;
padding:0px;
display:block;
@ -176,7 +174,7 @@
line-height: 150%;
}
#profile-bands .when-empty a {
#bands-content .when-empty a {
text-decoration: underline;
color: inherit;
}
@ -336,7 +334,7 @@
display:none;
}
#profile-history {
#history-content {
padding:0 10px 0 20px;
width:100%;
position:relative;

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

@ -17,4 +17,21 @@ end
child :genre_players => :genres do
attributes :genre_id, :player_type, :genre_type
end
end
child :band_musicians => :bands do
attributes :id, :name, :admin, :photo_url, :logo_url
child :genres => :genres do
attributes :id, :description
#partial('api_genres/index', :object => @user.bands.genres)
end
end
child :musician_instruments => :instruments do
attributes :description, :proficiency_level, :priority, :instrument_id
end
# child :genres do
# attributes :description, :id
# end

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

@ -1,162 +1,195 @@
<!-- Profile -->
<div layout="screen" layout-id="profile" layout-arg="id" class="screen secondary" id="user-profile">
<div class="content-head">
<div class="content-icon">
<%= image_tag "content/icon_profile.png", :size => "19x19" %>
<div class="content-head">
<div class="content-icon">
<%= image_tag "content/icon_profile.png", :size => "19x19" %>
</div>
<h1><span id="type-label">musician</span> profile</h1>
<%= render "screen_navigation" %>
</div>
<div class="content-body">
<form id="profile-form" class="inner-content">
<div class="profile-header profile-head">
<div class="left">
<h2 id="username"></h2>
<%= link_to("EDIT PROFILE", '/client#/account/profile', :id => "btn-edit", :class => "button-orange") %>
</div>
<h1><span id="profile-type-label">musician</span> profile</h1>
<!-- action buttons -->
<div class="right">
<a id="btn-add-friend" class="button-orange">ADD FRIEND</a>
<a id="btn-follow-user" class="button-orange">FOLLOW</a>
<a id="btn-message-user" class="button-orange">MESSAGE</a>
</div>
<br clear="all" /><br />
<%= render "screen_navigation" %>
</div>
<div class="content-body">
<form id="profile-form" class="inner-content">
<div class="profile-header profile-head">
<!-- avatar -->
<div class="profile-photo">
<div class="avatar-profile">
<img id="avatar" width="200" height="200" />
</div>
</div>
<div class="left">
<h2 id="profile-username"></h2>
<%= link_to("EDIT PROFILE", '/client#/account/profile', :id => "btn-profile-edit", :class => "button-orange") %>
</div>
<!-- profile navigation -->
<div class="profile-nav">
<a id="about-link" class="active">about</a>
<a id="history-link">history</a>
<a id="bands-link">bands</a>
<a id="social-link">social</a>
<a id="favorites-link" class="last">favorites</a>
</div>
<div class="clearall"></div>
</div>
<!-- profile status -->
<div class="profile-status">
</div>
<div class="profile-body">
<div id="about-content" class="profile-body-content">
<!-- stats & location -->
<div class="profile-wrapper">
<div class="profile-about-left">
<h3>Location:</h3><br />
<span id="location"></span><br />
<span id="age"></span><br /><br />
<h3>Stats:</h3><br />
<span id="friend-stats"></span><br />
<span id="follower-stats"></span><br />
<span id="session-stats"></span><br />
<span id="recording-stats"></span><br />
<span id="following-stats"></span><br />
<span id="favorite-stats"></span><br />
</div>
<div class="profile-about-right">
<div class="section-header">Bio</div>
<br clear="all" />
<div class="no-bio">
Not specified.
</div>
<div><a href="/client#/account/profile" class="enter-bio">Edit Bio</a></div>
<br clear="all" />
<!-- action buttons -->
<div class="right">
<a id="btn-add-friend" class="button-orange">ADD FRIEND</a>
<a id="btn-follow-user" class="button-orange">FOLLOW</a>
<a id="btn-message-user" class="button-orange">MESSAGE</a>
</div>
<br clear="all" /><br />
<!-- avatar -->
<div class="profile-photo">
<div class="avatar-profile">
<img id="profile-avatar" width="200" height="200" />
</div>
</div>
<!-- profile navigation -->
<div class="profile-nav">
<a id="profile-about-link" class="active">about</a>
<a id="profile-history-link">history</a>
<a id="profile-bands-link">bands</a>
<a id="profile-social-link">social</a>
<a id="profile-favorites-link" class="last">favorites</a>
</div>
<div class="clearall"></div>
<div class="have-bio">
<p id="biography"></p>
</div>
<!-- <div class="update-biography">
<div class="field">
<textarea name="biography" class="user-biography"></textarea>
</div>
<br clear="left" /><br />
<div class="right">
<a id="btn-update-user-biography" layout-action="close" class="button-orange">OK</a>
</div>
<div class="right">
<a id="btn-cancel-user-biography" layout-action="close" class="button-grey">CANCEL</a>
</div>
<br clear="all" />
</div> -->
<br clear="all" />
<div class="profile-body">
<div id="profile-about" class="profile-body-content">
<!-- stats & location -->
<div class="profile-wrapper">
<div class="profile-about-left">
<h3>Location:</h3><br />
<span id="profile-location"></span><br />
<span id="profile-age"></span><br /><br />
<h3>Stats:</h3><br />
<span id="profile-friend-stats"></span><br />
<span id="profile-follower-stats"></span><br />
<span id="profile-session-stats"></span><br />
<span id="profile-recording-stats"></span><br />
<span id="profile-following-stats"></span><br />
<span id="profile-favorite-stats"></span><br />
</div>
<div class="profile-about-right">
<div class="section">Bio</div>
<div class="no-bio">
<span>Not specified. <a href="#" class="enter-bio">Edit Bio</a></span>
</div>
<div class="have-bio">
<p id="profile-biography"></p>
</div>
<!-- <div class="update-biography">
<div class="field">
<textarea name="biography" class="user-biography"></textarea>
</div>
<br clear="left" /><br />
<div class="right">
<a id="btn-update-user-biography" layout-action="close" class="button-orange">OK</a>
</div>
<div class="right">
<a id="btn-cancel-user-biography" layout-action="close" class="button-grey">CANCEL</a>
</div>
<br clear="all" />
</div> -->
<br />
<div id="profile-instruments"></div>
<br />
<div id="profile-genres"></div>
</div>
<br clear="all" />
</div>
</div>
<div id="profile-history" class="profile-wrapper">
<%= form_tag('', {:id => 'user-feed-form', :class => 'inner-content'}) do %>
<%= render(:partial => "web_filter", :locals => {:search_type => Search::PARAM_FEED, :id => 'user-feed-controls'}) %>
<div class="filter-body">
<div class="content-body-scroller" id="user-profile-feed-scroller">
<div class="profile-wrapper">
<div class="feed-content" id="user-profile-feed-entry-list"></div>
<div id="user-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
<div id="user-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
</div>
</div>
<div class="section-header">Musical Experience</div>
<br clear="all" />
<div id="instruments"></div>
<br clear="all" />
<br clear="all" />
<div>
<div class="left profile-experience">Status:</div>
<div id="musician-status"></div>
</div>
<div>
<div class="left profile-experience">Genres:</div>
<div id="genres"></div>
</div>
<div>
<div class="left profile-experience">Concert Gigs:</div>
<div id="concert-count"></div>
</div>
<div>
<div class="left profile-experience">Studio Gigs:</div>
<div id="studio-count"></div>
</div>
<br clear="all" />
<br clear="all" />
<div class="section-header">Performance Samples</div>
<br clear="all" />
<br clear="all" />
<div class="section-header">Online Presence</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
</div>
<div id="history-content" class="profile-wrapper">
<%= form_tag('', {:id => 'user-feed-form', :class => 'inner-content'}) do %>
<%= render(:partial => "web_filter", :locals => {:search_type => Search::PARAM_FEED, :id => 'user-feed-controls'}) %>
<div class="filter-body">
<div class="content-body-scroller" id="user-profile-feed-scroller">
<div class="profile-wrapper">
<div class="feed-content" id="user-profile-feed-entry-list"></div>
<div id="user-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
<div id="user-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
</div>
</div>
</div>
<% end %>
</div>
<div id="bands-content" class="profile-wrapper profile-body-content">
<br clear="all" />
</div>
<div id="social-content" class="profile-body-content outer">
<div class="profile-social-head">
<div class="profile-social-left">
<h2>Friends</h2>
</div>
<div class="profile-social-mid">
<h2>Following</h2>
</div>
<div class="profile-social-right">
<h2>Followers</h2>
</div>
<div class="clearall"></div>
</div>
<div class="profile-social-body">
<div class="profile-social-body-wrapper">
<div class="content-body-scroller">
<!-- @FIXME: seems like too many divs -->
<div class="profile-social-content">
<div class="profile-social-left">
<div id="social-friends">
</div>
<% end %>
</div>
<div id="profile-bands" class="profile-wrapper profile-body-content">
<br clear="all" />
</div>
<div id="profile-social" class="profile-body-content outer">
<div class="profile-social-head">
<div class="profile-social-left">
<h2>Friends</h2>
</div>
<div class="profile-social-mid">
<h2>Following</h2>
</div>
<div class="profile-social-right">
<h2>Followers</h2>
</div>
<div class="clearall"></div>
</div>
<div class="profile-social-body">
<div class="profile-social-body-wrapper">
<div class="content-body-scroller">
<!-- @FIXME: seems like too many divs -->
<div class="profile-social-content">
<div class="profile-social-left">
<div id="profile-social-friends">
</div>
</div>
<div class="profile-social-mid">
<div id="profile-social-followings">
</div>
</div>
<div class="profile-social-right">
<div id="profile-social-followers">
</div>
</div>
<div class="clearall"></div>
</div>
<!-- @FIXME: end -->
</div>
</div>
</div>
</div>
<div id="profile-favorites" class="profile-body-content">
<div class="profile-wrapper">
<div class="content-body-scroller">
</div>
</div>
</div>
<!-- </div> -->
</div>
<div class="profile-social-mid">
<div id="social-followings">
</div>
</div>
<div class="profile-social-right">
<div id="social-followers">
</div>
</div>
<div class="clearall"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="favorites-content" class="profile-body-content">
<div class="profile-wrapper">
<div class="content-body-scroller">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/template" id="template-no-bands">
@ -211,7 +244,7 @@
</div>
<div class="result-list-button-wrapper">
<a class="button-orange smallbutton" href="{profile_url}">PROFILE</a>
<span class="profile-band-link-member-false"><a id="btn-follow-band-2" class="button-orange smallbutton">FOLLOW</a></span>
<span class="profile-band-link-member-false"><a id="btn-follow-band" class="button-orange smallbutton">FOLLOW</a></span>
<span class="profile-band-link-member-true"><a href="{band_edit_url}" class="button-orange smallbutton">EDIT BAND</a></span>
<span class="profile-band-link-member-true"><a href="{band_member_url}" class="button-orange smallbutton">INVITE</a></span>
</div>