VRFS-931 Band tweaks

This commit is contained in:
Daniel Weigh 2014-01-26 13:25:19 -05:00
parent 84360ea642
commit 31a18a1f95
6 changed files with 121 additions and 56 deletions

View File

@ -101,7 +101,7 @@
if (pinstr in instrument_logo_map) {
instr = instrument_logo_map[pinstr];
}
player_instrs += '<img src="' + instr + '" width="24" height="24" />&nbsp;';
player_instrs += '<img src="' + instr + '"/>';
}
playerVals = {

View File

@ -314,7 +314,11 @@ a.arrow-down {
background-color:#4c4c4c;
min-height:20px;
overflow-x:scroll;
select {
font-size:11px;
margin-top:4px;
}
}
#session-controls .searchbox {
float:left;

View File

@ -196,13 +196,48 @@
}
.profile-band-list-result {
width:100%;
min-height:85px;
background-color:#242323;
position:relative;
margin:10px 0px 10px 0px;
padding-bottom:5px;
box-sizing:border-box;
width:100%;
min-height:85px;
background-color:#242323;
position:relative;
margin:10px 0px 10px 0px;
padding-bottom:5px;
box-sizing:border-box;
.result-name {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
}
.stats {
margin-top: 4px;
img {
vertical-align: middle;
}
}
.lcol {
width: 148px;
}
.instruments {
width:128px;
img {
height:24px;
width:24px;
margin-right:2px;
&:last-child {
margin-right:0px;
}
}
}
.button-row {
margin-top:10px;
margin-bottom:5px;
.result-list-button-wrapper {
margin:0;
}
}
}
.profile-social-left {

View File

@ -67,6 +67,7 @@
<a id="btn-band-setup-cancel" class="button-grey">CANCEL</a>&nbsp;&nbsp;
<a id="btn-band-setup-next" class="button-orange">NEXT</a>
</div>
<div class="clearall"></div>
</div>
<div id="band-setup-step-2" class="content-wrapper" style="padding:10px 35px 10px 35px; display:none;">
<br/>

View File

@ -20,42 +20,56 @@
<% end -%>
<!-- Session Row Template -->
<script type="text/template" id="template-find-band-row">
<script type="text/template" id="template-find-band-row"><!-- -->
<div class="profile-band-list-result band-list-result">
<div class="left">
<!-- avatar -->
<div class="avatar-small"><img src="{avatar_url}" /></div>
<!-- name & location -->
<div style="width:220px;" class="result-name">{band_name}<br />
<span class="result-location">{band_location}</span>
<br /><br />
<div id="result_genres" class="nowrap">{genres}</div>
<br /><br />
{follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;{recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;{session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /><br /><br />
<div class="f11">
<div class="left" style="width:63px;margin-top:-12px;">
<!-- avatar -->
<div class="avatar-small"><img src="{avatar_url}" /></div>
</div>
<div class="right mband-players" style="width:250px;margin-top:-10px;">
<table class="musicians" cellpadding="0" cellspacing="5">{band_player_template}</table>
</div>
<div class="" style="margin-left: 63px; margin-right: 260px;margin-top: 12px;"">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<!-- name & location -->
<div class="result-name">{band_name}</div>
<div class="result-location">{band_location}</div>
<br />
<div id="result_genres" class="nowrap mt10">{genres}</div>
</div>
<div class="whitespace">
<div class="biography">{biography}</div>
</div>
<div class="clearleft"></div>
</div>
<div class="button-row">
<div class="lcol stats left">
{follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;"/>
{recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" style="margin-right:4px;"/>
{session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
</div>
<div class="result-list-button-wrapper" data-band-id={band_id}>
{band_action_template}
</div>
<div class="clearall"></div>
</div>
</div>
</div>
<div class="left ml20 f11 whitespace w35"><br />
{biography}<br />
<br />
<div data-band-id={band_id}>{band_action_template}</div>
</div>
<div class="left ml10 w25 band-players">
<table class="musicians" cellpadding="0" cellspacing="5">{band_player_template}</table>
</div>
<br clear="all" />
</div>
</script>
<script type="text/template" id="template-band-action-btns">
<a href="{profile_url}" class="button-orange smallbutton m0">PROFILE</a><a href="#" class="{button_follow} smallbutton search-m-follow">FOLLOW</a>
<a href="{profile_url}" class="button-orange smallbutton">PROFILE</a>
<a href="#" class="{button_follow} smallbutton search-m-follow">FOLLOW</a>
</script>
<script type="text/template" id="template-band-player-info">
<tr>
<td width="24"><a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a></td>
<td><a href="{profile_url}"><strong>{player_name}</strong></a></td>
<td>{player_instruments}</td>
<td ><a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a></td>
<td style="padding: 0 4px;width:88px;"><a href="{profile_url}"><strong>{player_name}</strong></a></td>
<td class="instruments">{player_instruments}</td>
</tr>
</script>

View File

@ -1,4 +1,4 @@
<!-- Profile -->
m<!-- Profile -->
<div layout="screen" layout-id="profile" layout-arg="id" class="screen secondary">
<div class="content-head">
<div class="content-icon">
@ -145,30 +145,41 @@
</div>
</script>
<script type="text/template" id="template-profile-bands">
<div band-id="{bandId}" class="profile-bands">
<div class="avatar-small">
<img src="{avatar_url}" width="275" height="183" />
<!-- Band Row Template -->
<script type="text/template" id="template-profile-bands"><!-- -->
<div band-id="{bandId}" class="profile-band-list-result profile-bands f11">
<div class="left" style="width:63px;">
<div class="avatar-small"><img src="{avatar_url}"/></div>
</div>
<div class="right" style="width:250px;margin-top:10px;">
<table class="profile-musicians" cellpadding="0" cellspacing="5">{musicians}</table>
</div>
<div class="" style="margin-left: 63px; margin-right: 260px;margin-top:12px;">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<!-- name & location -->
<div class="result-name">{name}</div>
<div class="result-location">{location}</div>
<br />
<div id="result_genres" class="nowrap mt10">{genres}</div>
</div>
<div class="whitespace">
<div class="biography">{biography}</div>
</div>
<div class="clearleft"></div>
</div>
<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 />
<span class="follower-count">{follower_count}</span>&nbsp;<img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;
<span class="recording-count">{recording_count}</span>&nbsp;<img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;
<span class="session-count">{session_count}</span>&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 class="button-row">
<div class="lcol stats left">
{follower_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />
{recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />
{session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
</div>
<div class="result-list-button-wrapper">
<a class="button-orange smallbutton" href="{band_url}">PROFILE</a>
<a id="btn-follow-band" class="button-orange smallbutton">FOLLOW</a>
</div>
</div>
</div>
</div>
</script>