VRFS-3247 : Band Summary - About
* Layout and styling for musical experience, performance samples, online presence, and current interests. * Refactor online presence icons into slim partial and use from both musician and band profile * Refactor performance sample icons into slim partial and use from both musician and band profile. * Hook up buttons: edit, delete, invite, edit bio.
This commit is contained in:
Steven Miers
parent
0967513a4d
commit
141ee5f2e7
|
|
@ -21,6 +21,7 @@
|
|||
// hide until we know if 'isMember'
|
||||
$("#btn-follow-band").hide();
|
||||
$("#btn-edit-band-profile").hide();
|
||||
$("#btn-edit-band-bio").hide();
|
||||
$("#btn-edit-band-info").hide();
|
||||
$("#btn-edit-band-members").hide();
|
||||
$("#btn-edit-band-delete").hide();
|
||||
|
|
@ -143,6 +144,7 @@
|
|||
if (isMember) {
|
||||
$("#btn-follow-band").hide();
|
||||
$("#btn-edit-band-profile").show();
|
||||
$("#btn-edit-band-bio").show();
|
||||
$("#btn-edit-band-info").show();
|
||||
$("#btn-edit-band-members").show();
|
||||
if (isAdmin) {
|
||||
|
|
@ -150,6 +152,7 @@
|
|||
}
|
||||
} else {
|
||||
$("#btn-follow-band").show();
|
||||
$("#btn-edit-band-bio").hide();
|
||||
$("#btn-edit-band-profile").hide();
|
||||
$("#btn-edit-band-info").hide();
|
||||
$("#btn-edit-band-members").hide();
|
||||
|
|
@ -212,9 +215,9 @@
|
|||
$('#band-profile-website').text(band.website);
|
||||
}
|
||||
|
||||
profileUtils.renderMusicalExperience(band, $("#bandProfile"))
|
||||
profileUtils.renderPerformanceSamples(band, $("#bandProfile"), isAdmin)
|
||||
profileUtils.renderOnlinePresence(band, $("#bandProfile"), isAdmin)
|
||||
// profileUtils.renderMusicalExperience(band, $("#bandProfile"))
|
||||
// profileUtils.renderPerformanceSamples(band, $("#bandProfile"), isAdmin)
|
||||
// profileUtils.renderOnlinePresence(band, $("#bandProfile"), isAdmin)
|
||||
//renderInterests()
|
||||
|
||||
// wire up Follow click
|
||||
|
|
@ -430,6 +433,7 @@
|
|||
$divMember.remove();
|
||||
if (userId == context.JK.currentUserId) {
|
||||
$('#btn-edit-band-profile').hide();
|
||||
$('#btn-edit-band-bio').hide();
|
||||
$('#btn-edit-band-info').hide();
|
||||
$('#btn-edit-band-members').hide();
|
||||
$('.btn-remove-member').each(function(idx) { $(this).hide(); });
|
||||
|
|
@ -486,6 +490,10 @@
|
|||
context.location = "/client#/band/setup/" + bandId + '/step1';
|
||||
return false;
|
||||
});
|
||||
$("#btn-edit-band-bio").unbind('click').click(function() {
|
||||
context.location = "/client#/band/setup/" + bandId + '/step0';
|
||||
return false;
|
||||
});
|
||||
$("#btn-edit-band-members").unbind('click').click(function() {
|
||||
context.location = "/client#/band/setup/" + bandId + '/step2';
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,16 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
table.summary-table {
|
||||
tr {
|
||||
td {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mimic style of easydropdown selects:
|
||||
input[type="number"] {
|
||||
border-radius: 6px;
|
||||
|
|
@ -43,18 +53,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
td.band-biography, td.tdBandGenres {
|
||||
height:100%;
|
||||
vertical-align: top;
|
||||
#band-biography {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.band-setup-genres {
|
||||
width:100%;
|
||||
|
|
@ -190,6 +189,20 @@
|
|||
border-radius:44px;
|
||||
}
|
||||
|
||||
|
||||
.band-entry {
|
||||
.item-caption {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
margin: 0.25em 0em 0.25em 0em;
|
||||
}
|
||||
.item-content {
|
||||
font-size: 1.1em;
|
||||
margin: 0.25em 0em 0.25em 0em;
|
||||
}
|
||||
margin: 0em 0em 1.0em 0em;
|
||||
}
|
||||
|
||||
// .band-name, .band-photo {
|
||||
// display: inline;
|
||||
// }
|
||||
|
|
@ -392,6 +405,19 @@
|
|||
table.band-form-table {
|
||||
width: 100%;
|
||||
margin: 1em;
|
||||
|
||||
tr:nth-child(even) td {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
td.band-biography, td.tdBandGenres {
|
||||
height:100%;
|
||||
vertical-align: top;
|
||||
#band-biography {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.easydropdown {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@
|
|||
|
||||
div.logo, div.item {
|
||||
text-align: bottom;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.online-presence-option, .performance-sample-option {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
|
|
@ -35,11 +38,11 @@
|
|||
|
||||
}
|
||||
.profile-body {
|
||||
|
||||
|
||||
}
|
||||
.profile-header {
|
||||
padding:10px 20px;
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-header h2 {
|
||||
|
|
@ -49,11 +52,20 @@
|
|||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.profile-about-right .section-header {
|
||||
font-weight:600;
|
||||
font-size:18px;
|
||||
float:left;
|
||||
margin: 0px 0px 10px 0px;
|
||||
.profile-about-right {
|
||||
.section-header {
|
||||
font-weight:600;
|
||||
font-size:18px;
|
||||
float:left;
|
||||
margin: 0px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
font-weight:normal;
|
||||
font-size:1.2em;
|
||||
float:left;
|
||||
margin: 0px 0px 10px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
|
|
@ -241,7 +253,7 @@
|
|||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing:border-box;
|
||||
|
||||
|
||||
.result-name {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
|
@ -267,11 +279,11 @@
|
|||
height:24px;
|
||||
width:24px;
|
||||
margin-right:2px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right:0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.button-row {
|
||||
|
|
|
|||
|
|
@ -14,12 +14,17 @@
|
|||
<div class="profile-header profile-head">
|
||||
<h2 id="band-profile-name"></h2>
|
||||
|
||||
<div class="left">
|
||||
<a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
|
||||
<a id="btn-edit-band-members" class="button-orange">INVITE</a>
|
||||
<a id="btn-edit-band-delete" class="button-orange">DELETE</a>
|
||||
</div>
|
||||
<div class="band-profile-status">
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<a id="btn-follow-band" class="button-orange">FOLLOW</a>
|
||||
<a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
|
||||
<!-- <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a> -->
|
||||
</div>
|
||||
|
||||
<br clear="all" /><br />
|
||||
|
|
@ -43,7 +48,7 @@
|
|||
<div id="band-profile-about" class="profile-body-content">
|
||||
<div class="band-profile-wrapper">
|
||||
<!-- stats & location -->
|
||||
<div class="band-profile-about-left">
|
||||
<div class="profile-about-left">
|
||||
<h3>Location:</h3><br />
|
||||
<span id="band-profile-location"></span><br /><br /><br />
|
||||
<h3>Stats:</h3><br />
|
||||
|
|
@ -51,19 +56,82 @@
|
|||
<span id="band-profile-session-stats"></span><br />
|
||||
<span id="band-profile-recording-stats"></span><br />
|
||||
</div>
|
||||
<div class="band-profile-about-right">
|
||||
<div class="left">
|
||||
<a id="btn-edit-band-info" class="button-orange">EDIT</a>
|
||||
<a id="btn-edit-band-members" class="button-orange">INVITE</a>
|
||||
<a id="btn-edit-band-delete" class="button-orange">DELETE</a>
|
||||
|
||||
|
||||
<div class="profile-about-right">
|
||||
<div class="band-entry">
|
||||
<div class="item-caption">Bio</div>
|
||||
<div class="item-content" id="band-profile-biography"></div>
|
||||
<div class="item-content">
|
||||
<a id="btn-edit-band-bio" class=".edit-bio">Edit Bio</a>
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all" /><br />
|
||||
<p id="band-profile-biography"></p>
|
||||
</div>
|
||||
<div class="band-profile-about-right">
|
||||
<p><a id="band-profile-website" target="_blank" rel="external"></a></p><br />
|
||||
|
||||
<div class="profile-about-right">
|
||||
<div class="band-entry">
|
||||
<div class="item-caption">Musical Experience</div>
|
||||
<div class="item-content">
|
||||
<table class="summary-table">
|
||||
<tr>
|
||||
<td>Genres:</td>
|
||||
<td class="experience-genres">Genres</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Concert Gigs:</td>
|
||||
<td class="experience-gigs"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status:</td>
|
||||
<td class="experience-status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type:</td>
|
||||
<td class="experience-type"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
|
||||
<div class="profile-about-right">
|
||||
<div class="band-entry">
|
||||
<div class="item-caption">Performance Samples</div>
|
||||
<div class="item-content">
|
||||
<%=render "profile_summary_performance_samples" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-about-right">
|
||||
<div class="band-entry">
|
||||
<div class="item-caption">Online Presence</div>
|
||||
<div class="item-content">
|
||||
<%=render "profile_summary_online_presence" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="profile-about-right">
|
||||
<div class="band-entry">
|
||||
<div class="item-caption">Current Interests</div>
|
||||
<ul>
|
||||
<li class="interests-new-members">
|
||||
<span>Our band is looking for new members who play our genre(s) of music and can play the following:</span>
|
||||
<span class="new_member_details"></span>
|
||||
</li>
|
||||
<li class="interests-paid-gigs">
|
||||
<span>Our band is available for hire to perform at concerts and events for</span>
|
||||
<span class="paid-gig-details"></span>
|
||||
</li>
|
||||
<li class="interests-free-gigs">
|
||||
<span>Our band is available to perform at concerts and events at no charge as we are currently building our live performance experience.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="band-profile-history" class="band-profile-wrapper">
|
||||
|
|
|
|||
|
|
@ -99,20 +99,9 @@
|
|||
|
||||
<div class="section-header">Performance Samples</div>
|
||||
<br clear="all" />
|
||||
<div id="no-samples" class="left item">None specified</div>
|
||||
|
||||
<div id="jamkazam-samples" class="left logo">
|
||||
<img src="/assets/header/logo.png" class="logo" /><br/>
|
||||
</div>
|
||||
|
||||
<div id="soundcloud-samples" class="left logo">
|
||||
<img src="/assets/content/soundcloud-logo.png" class="logo" /><br/>
|
||||
</div>
|
||||
|
||||
<div id="youtube-samples" class="left logo">
|
||||
<img src="/assets/content/youtube-logo.png" class="logo" /><br/>
|
||||
</div>
|
||||
|
||||
<%=render "profile_summary_performance_samples" %>
|
||||
|
||||
<br clear="all" />
|
||||
<div class="left item"><a href="/client#/account/profile/samples" class="add-recordings">Add Recordings</a></div>
|
||||
<br clear="all" />
|
||||
|
|
@ -120,39 +109,8 @@
|
|||
|
||||
<div class="section-header">Online Presence</div>
|
||||
<br clear="all" />
|
||||
<div id="no-online-presence" class="left item">None specified</div>
|
||||
|
||||
<div id="user-website" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/website-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="soundcloud-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/soundcloud-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="reverbnation-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/reverbnation-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="bandcamp-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/bandcamp-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="fandalism-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/fandalism-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="youtube-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/youtube-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="facebook-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/facebook-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<div id="twitter-presence" class="left logo">
|
||||
<a rel="external"><img src="/assets/content/twitter-logo.png" class="logo" /></a>
|
||||
</div>
|
||||
|
||||
<%=render "profile_summary_online_presence" %>
|
||||
|
||||
<br clear="all" />
|
||||
<div class="left item"><a href="/client#/account/profile/samples">Add Sites</a></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
#no-online-presence.left.online-presence-option
|
||||
| None specified
|
||||
#user-website.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/website-logo.png"
|
||||
#soundcloud-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/soundcloud-logo.png"
|
||||
#reverbnation-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/reverbnation-logo.png"
|
||||
#bandcamp-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/bandcamp-logo.png"
|
||||
#fandalism-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/fandalism-logo.png"
|
||||
#youtube-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/youtube-logo.png"
|
||||
#facebook-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/facebook-logo.png"
|
||||
#twitter-presence.left.logo.online-presence-option
|
||||
a rel="external"
|
||||
img.logo src="/assets/content/twitter-logo.png"
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
#no-samples.left.performance-sample-option None specified
|
||||
#jamkazam-samples.left.logo.performance-sample-option
|
||||
img.logo src="/assets/header/logo.png"
|
||||
br/
|
||||
#soundcloud-samples.left.logo.performance-sample-option
|
||||
img.logo src="/assets/content/soundcloud-logo.png"
|
||||
br/
|
||||
#youtube-samples.left.logo.performance-sample-option
|
||||
img.logo src="/assets/content/youtube-logo.png"
|
||||
br/
|
||||
|
||||
Loading…
Reference in New Issue