229 lines
12 KiB
Plaintext
229 lines
12 KiB
Plaintext
<!-- 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>
|
|
|
|
<h1><span id="profile-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">
|
|
|
|
<!-- profile name -->
|
|
<h2 id="profile-username"></h2>
|
|
|
|
<!-- profile status -->
|
|
<div class="profile-status">
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<%= link_to("EDIT PROFILE", '/client#/account/profile', :id => "btn-profile-edit", :class => "button-orange") %>
|
|
</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>
|
|
|
|
<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 /><br /><br />
|
|
<h3>Stats:</h3><br />
|
|
<span id="profile-friend-stats"></span><br />
|
|
<span id="profile-follower-stats"></span><br />
|
|
<span id="profile-following-stats"></span><br />
|
|
<span id="profile-favorite-stats"></span><br />
|
|
<span id="profile-session-stats"></span><br />
|
|
<span id="profile-recording-stats"></span><br />
|
|
</div>
|
|
<div class="profile-about-right">
|
|
<div class="no-bio">
|
|
<span>You have no bio to describe yourself as a musician. <a href="#" class="enter-bio">Enter one now!</a></span>
|
|
</div>
|
|
<div class="have-bio">
|
|
<p id="profile-biography"></p><a id="profile-edit-biography" class="button-orange right" href="#">EDIT BIO</a>
|
|
</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>
|
|
|
|
<% 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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/template" id="template-no-bands">
|
|
<div class="when-empty">
|
|
Not In Any Bands:<br/>
|
|
<a id="band-setup-link" href="/client#/band/setup/new">Set Up Your Band</a>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/template" id="template-more-bands">
|
|
<div class="when-empty">
|
|
<a id="band-setup-link" href="/client#/band/setup/new">Set Up Another Band</a>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/template" id="template-profile-instruments">
|
|
<div class="profile-instrument">
|
|
<img src="{instrument_logo_url}" width="70" height="70" /><br />
|
|
<span>{instrument_description}</span><br />
|
|
<span class="{proficiency_level_css}">{proficiency_level}</span>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- 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 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="button-row">
|
|
<div class="lcol stats left">
|
|
{follower_count} <img src="../assets/content/icon_followers.png" title="followers" width="22" height="12" align="absmiddle" />
|
|
{recording_count} <img src="../assets/content/icon_recordings.png" title="recordings" width="12" height="13" align="absmiddle" />
|
|
{session_count} <img src="../assets/content/icon_session_tiny.png" title="sessions" width="12" height="12" align="absmiddle" />
|
|
</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-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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/template" id="template-profile-social">
|
|
<div class="profile-block">
|
|
<div {hoverAttributeId}="{userId}" hoveraction="{hoverAction}" class="avatar-small">
|
|
<img src="{avatar_url}" />
|
|
</div>
|
|
<div {hoverAttributeId}="{userId}" hoveraction="{hoverAction}" class="profile-block-name">{userName}</div>
|
|
<div class="profile-block-city">{location}</div>
|
|
</div>
|
|
</script>
|