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-294 

Updates to the band profile page
This commit is contained in:
Daniel Weigh 2014-02-06 08:11:20 -05:00
parent dddfb50c45
commit ac8913c027
3 changed files with 132 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/app/assets/stylesheets/client/band.css.scss
View File

@ -147,6 +147,41 @@
border-bottom: dotted 1px #444;
position:relative;
display:block;
.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;
}
}
}
.band-profile-about-left {

5
web/app/views/api_bands/musician_index.rabl
View File

@ -9,3 +9,8 @@ node :instruments do |musician|
end
end
end
node :biography do |musician|
musician.biography.nil? ? "" : musician.biography
end

164
web/app/views/clients/_bandProfile.html.erb
View File

@ -9,90 +9,110 @@
<%= render "screen_navigation" %>
</div>
<form id="band-profile-form">
<div class="band-profile-header">
<h2 id="band-profile-name"></h2>
<div class="content-body">
<form id="band-profile-form" class="inner-content">
<div class="profile-header profile-head">
<h2 id="band-profile-name"></h2>
<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>
</div>
<br clear="all" /><br />
<!-- avatar -->
<div class="band-profile-photo">
<div class="avatar-profile">
<img id="band-profile-avatar" width="200" height="200" />
<div class="band-profile-status">
</div>
</div>
<!-- profile navigation -->
<div class="band-profile-nav">
<a id="band-profile-about-link" class="band active">about</a>
<a id="band-profile-history-link" class="band">history</a>
<a id="band-profile-members-link" class="band">members</a>
<a id="band-profile-social-link" class="band last">social</a>
</div>
</div>
<br clear="all" />
<div class="content-scroller" style="height:350px;">
<div id="band-profile-about" class="band-profile-wrapper">
<!-- stats & location -->
<div class="band-profile-about-left">
<h3>Location:</h3><br />
<span id="band-profile-location"></span><br /><br /><br />
<h3>Stats:</h3><br />
<span id="band-profile-follower-stats"></span><br />
<span id="band-profile-session-stats"></span><br />
<span id="band-profile-recording-stats"></span><br />
<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>
</div>
<div class="band-profile-about-right">
<p id="band-profile-biography"></p><br />
</div>
<br clear="all" />
</div>
<div id="band-profile-history" class="band-profile-wrapper">
<br clear="all" />
</div>
<div id="band-profile-members" class="band-profile-wrapper">
<br clear="all" />
</div>
<div id="band-profile-social" class="band-profile-wrapper">
<div class="band-profile-social-left">
<h2>Followers</h2>
<div id="band-profile-social-followers">
<br clear="all" /><br />
<!-- avatar -->
<div class="band-profile-photo">
<div class="avatar-profile">
<img id="band-profile-avatar" width="200" height="200" />
</div>
</div>
<br clear="all" />
<!-- profile navigation -->
<div class="band-profile-nav">
<a id="band-profile-about-link" class="band active">about</a>
<a id="band-profile-history-link" class="band">history</a>
<a id="band-profile-members-link" class="band">members</a>
<a id="band-profile-social-link" class="band last">social</a>
</div>
<div class="clearall"></div>
</div>
</div>
</form>
<div class="profile-body">
<div id="band-profile-about" class="profile-body-content">
<div class="band-profile-wrapper">
<!-- stats & location -->
<div class="band-profile-about-left">
<h3>Location:</h3><br />
<span id="band-profile-location"></span><br /><br /><br />
<h3>Stats:</h3><br />
<span id="band-profile-follower-stats"></span><br />
<span id="band-profile-session-stats"></span><br />
<span id="band-profile-recording-stats"></span><br />
</div>
<div class="band-profile-about-right">
<p id="band-profile-biography"></p><br />
</div>
<br clear="all" />
</div>
</div>
<div id="band-profile-history" class="band-profile-wrapper">
<div class="content-body-scroller">
<br clear="all" />
</div>
</div>
<div id="band-profile-members" class="band-profile-wrapper profile-body-content f11">
<br clear="all" />
</div>
<!-- @FIXME cf clients/_profile.html.erb to mimic layout for scrolling header -->
<div id="band-profile-social" class="band-profile-wrapper">
<div class="band-profile-social-left">
<h2>Followers</h2>
<div id="band-profile-social-followers">
</div>
</div>
<br clear="all" />
</div>
</div>
</form>
</div>
</div>
<script type="text/template" id="template-band-profile-members">
<div user-id="{userId}" class="band-profile-members">
<div class="avatar-small">
<img src="{avatar_url}" width="275" height="183" />
<div class="left" style="width:63px;">
<div class="avatar-small">
<img src="{avatar_url}" />
</div>
</div>
<div class="profile-band-name">
{name}<br />
<span class="band-profile-member-location">{location}</span>
<br clear="left" /><br />
<div style="width:100px;">{instruments}</div><br /><br />
{friend_count}&nbsp;<img src="../assets/content/icon_friend.png" width="22" height="12" align="absmiddle" />&nbsp;
{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 w60"><br />
{biography}<br /><br />
<a class="button-orange smallbutton m0" href="{profile_url}">PROFILE</a>&nbsp;&nbsp;
<a id="btn-follow-member" class="button-orange smallbutton m0">FOLLOW</a>&nbsp;&nbsp;
<a id="btn-remove-member" class="button-orange smallbutton m0">REMOVE MEMBER</a>&nbsp;&nbsp;
<a id="btn-friend-member" style="display:none;" class="button-orange smallbutton m0">CONNECT</a>
<div class="" style="margin-left: 63px;margin-top:12px;">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<div class="result-name">{name}</div>
<div class="result-location">{location}</div>
<br />
<div class="nowrap mt10">{instruments}</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">
{friend_count} <img src="../assets/content/icon_friend.png" width="22" height="12" align="absmiddle" />
{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="{profile_url}">PROFILE</a>
<a id="btn-follow-member" class="button-orange smallbutton">FOLLOW</a>
<a id="btn-remove-member" class="button-orange smallbutton">REMOVE MEMBER</a>
<a id="btn-friend-member" style="display:none;" class="button-orange smallbutton">CONNECT</a>
</div>
</div>
</div>
</div>
</script>