diff --git a/.gitignore b/.gitignore index 7393e2aa5..8927de757 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .idea *~ *.swp +HTML \ No newline at end of file diff --git a/web/app/assets/images/content/icon_followers.png b/web/app/assets/images/content/icon_followers.png new file mode 100644 index 000000000..957258ceb Binary files /dev/null and b/web/app/assets/images/content/icon_followers.png differ diff --git a/web/app/assets/images/content/icon_friend.png b/web/app/assets/images/content/icon_friend.png new file mode 100644 index 000000000..fd4aaa0d4 Binary files /dev/null and b/web/app/assets/images/content/icon_friend.png differ diff --git a/web/app/assets/images/content/icon_recordings.png b/web/app/assets/images/content/icon_recordings.png new file mode 100644 index 000000000..b530b2b69 Binary files /dev/null and b/web/app/assets/images/content/icon_recordings.png differ diff --git a/web/app/assets/images/content/icon_session_tiny.png b/web/app/assets/images/content/icon_session_tiny.png new file mode 100644 index 000000000..180cf2d66 Binary files /dev/null and b/web/app/assets/images/content/icon_session_tiny.png differ diff --git a/web/app/assets/javascripts/profile.js b/web/app/assets/javascripts/profile.js index 6a9e7dde2..1e1feff0e 100644 --- a/web/app/assets/javascripts/profile.js +++ b/web/app/assets/javascripts/profile.js @@ -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 += ' '; + } + } + // 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 diff --git a/web/app/assets/stylesheets/client/content.css.scss b/web/app/assets/stylesheets/client/content.css.scss index 228a6edf2..6a23a30a8 100644 --- a/web/app/assets/stylesheets/client/content.css.scss +++ b/web/app/assets/stylesheets/client/content.css.scss @@ -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} \ No newline at end of file diff --git a/web/app/assets/stylesheets/client/profile.css.scss b/web/app/assets/stylesheets/client/profile.css.scss index 594b4ff07..1c9bc1441 100644 --- a/web/app/assets/stylesheets/client/profile.css.scss +++ b/web/app/assets/stylesheets/client/profile.css.scss @@ -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; +} \ No newline at end of file diff --git a/web/app/views/api_users/band_index.rabl b/web/app/views/api_users/band_index.rabl index 6ac9c409c..dae20b3d6 100644 --- a/web/app/views/api_users/band_index.rabl +++ b/web/app/views/api_users/band_index.rabl @@ -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 diff --git a/web/app/views/clients/_profile.html.erb b/web/app/views/clients/_profile.html.erb index 790c44cee..08c2d3e9f 100644 --- a/web/app/views/clients/_profile.html.erb +++ b/web/app/views/clients/_profile.html.erb @@ -66,6 +66,8 @@
+
+

@@ -106,12 +108,25 @@
-
{name}
+
+ {name}
{location} +

+
{genres}


+ {follower_count}   + {recording_count}   + {session_count}  +
+

+ {biography}

+ PROFILE   + FOLLOW +
+
+ + {musicians} +
-
-
{genres}
- FOLLOW