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-986 more landing page work

This commit is contained in:
Brian Smith 2014-01-16 01:55:36 -05:00
parent 59f6e10e55
commit 4f9e36a332
10 changed files with 219 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/app/assets/images/content/icon_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 999 B

BIN
web/app/assets/images/content/icon_comment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 B

8
web/app/assets/javascripts/web/recordings.js
View File

@ -1,8 +0,0 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
})(window, jQuery)

0
web/app/assets/javascripts/web/sessions.js
View File

2
web/app/assets/javascripts/web/web.js
View File

@ -16,5 +16,3 @@
//= require landing/signup
//= require web/downloads
//= require web/congratulations
//= require web/recordings
//= require web/sessions

27
web/app/assets/stylesheets/web/main.css.scss
View File

@ -36,11 +36,9 @@ body.web {
background-color:black;
width:100%;
padding-bottom:15px;
/*position:relative;
width:100%;
min-height: 366px;
background-color:black;
padding-top:20px;*/
position:relative;
padding-bottom:30px;
}
div.wrapper {
@ -139,6 +137,26 @@ body.web {
margin-top:25px;
}
.avatar-small {
float:left;
padding:1px;
width:36px;
height:36px;
background-color:#ed3618;
margin:10px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}
.avatar-small img {
width: 36px;
height: 36px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}
.cta {
margin-top:40px;
text-align:center;
@ -158,6 +176,7 @@ body.web {
}
h2 {
font-size: 1.5em;
font-weight:300;
}

5
web/app/assets/stylesheets/web/recordings.css.scss
View File

@ -3,6 +3,9 @@
margin-bottom:5px;
padding:8px 5px 8px 10px;
width:98%;
position:relative;
text-align:center;
background-color:#242323;
}
.recording-position {
@ -32,7 +35,7 @@
.recording-playback {
display:inline-block;
background-image:url(../images/content/bkg_playcontrols.png);
background-image:url(../content/bkg_playcontrols.png);
background-repeat:repeat-x;
position:relative;
width:70%;

129
web/app/views/layouts/web.erb
View File

@ -1,84 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<head>
<title><%= full_title(yield(:title)) %></title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"/>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag "web/web", media: "all" %>
<% if bugsnag? %>
<!-- THIS NEEDS TO BE IN FRONT OF ANY OTHER JAVASCRIPT INCLUDES ACCORDING TO BUGSNAG -->
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-1.0.9.min.js" data-apikey="<%= Rails.application.config.bugsnag_key %>"></script>
<% end %>
<%= include_gon(:init => true) %>
<%= csrf_meta_tags %>
</head>
<body class="web">
<%= javascript_include_tag "web/web" %>
<div class="dialog-overlay op70" style="display:none; width:100%; height:100%; z-index:99;"></div>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"/>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag "web/web", media: "all" %>
<% if bugsnag? %>
<!-- THIS NEEDS TO BE IN FRONT OF ANY OTHER JAVASCRIPT INCLUDES ACCORDING TO BUGSNAG -->
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-1.0.9.min.js" data-apikey="<%= Rails.application.config.bugsnag_key %>"></script>
<% end %>
<%= include_gon(:init => true) %>
<%= csrf_meta_tags %>
</head>
<body class="web">
<%= javascript_include_tag "web/web" %>
<div class="dialog-overlay op70" style="display:none; width:100%; height:100%; z-index:99;"></div>
<div class="wrapper">
<div class="logo-home">
<%= link_to root_path do %>
<%= image_tag("web/logo_home.png", :alt => "JamKazam logo", :size => "298x54") %>
<% end %>
</div>
<div class="landing-tag">
<h1>Play music together over the Internet as if in the same room</h1>
</div>
<%= render "users/user_dropdown" %>
<br clear="all" /><br /><br />
</div>
<div class="landing-content">
<div class="wrapper">
<br /><br />
<%= yield %>
</div>
</div>
<div class="wrapper">
<%= yield(:after_black_bar) %>
</div>
<div class="logo-home">
<%= link_to root_path do %>
<%= image_tag("web/logo_home.png", :alt => "JamKazam logo", :size => "298x54") %>
<% end %>
</div>
<div class="landing-tag">
<h1>Play music together over the Internet as if in the same room</h1>
</div>
<%= render "users/user_dropdown" %>
<br clear="all" /><br /><br />
</div>
<div class="landing-content">
<div class="wrapper">
<br /><br />
<%= yield %>
</div>
</div>
<div class="wrapper">
<%= yield(:after_black_bar) %>
</div>
<div id="footer-container">
<%= render "clients/footer" %>
</div>
</div>
<%= render "clients/invitationDialog" %>
<%= render "clients/invitationDialog" %>
<script type="text/javascript">
$(function () {
<script type="text/javascript">
$(function () {
JK = JK || {};
JK = JK || {};
<% if current_user %>
JK.currentUserId = '<%= current_user.id %>';
<% else %>
JK.currentUserId = null;
<% end %>
<% if current_user %>
JK.currentUserId = '<%= current_user.id %>';
<% else %>
JK.currentUserId = null;
<% end %>
if (JK.currentUserId) {
JK.app = JK.JamKazam();
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});
if (JK.currentUserId) {
JK.app = JK.JamKazam();
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});
var invitationDialog = new JK.InvitationDialog(JK.app);
invitationDialog.initialize();
var invitationDialog = new JK.InvitationDialog(JK.app);
invitationDialog.initialize();
var userDropdown = new JK.UserDropdown(JK.app);
userDropdown.initialize(invitationDialog);
}
})
</script>
var userDropdown = new JK.UserDropdown(JK.app);
userDropdown.initialize(invitationDialog);
}
})
</script>
<%= render "shared/ga" %>
<!-- version info: <%= version %> -->
</body>
<%= render "shared/ga" %>
<!-- version info: <%= version %> -->
</body>
</html>

328
web/app/views/recordings/show.html.erb
View File

@ -1,211 +1,137 @@
<% provide(:title, "#{@claimed_recording.name}") %>
<div class="landing-band">
<div class="landing-avatar">
<img src="images/content/avatar_band4.jpg" alt=""/>
</div>
Raven &amp; The Blackbirds
<div class="landing-band">
<% unless @claimed_recording.recording.band.nil? %>
<div class="landing-avatar">
<% unless @claimed_recording.recording.band.photo_url.blank? %>
<%= image_tag "#{@claimed_recording.recording.band.photo_url}", {:alt => ""} %>
<% else %>
<%= image_tag "shared/avatar_generic_band.png", {:alt => ""} %>
<% end %>
</div>
<%= @claimed_recording.recording.band.name %>
<% else %>
<div class="landing-avatar">
<% unless @claimed_recording.recording.owner.photo_url.blank? %>
<%= image_tag "#{@claimed_recording.recording.owner.photo_url}", {:alt => ""} %>
<% else %>
<%= image_tag "shared/avatar_generic.png", {:alt => ""} %>
<% end %>
</div>
<%= @claimed_recording.recording.owner.name %>
<% end %>
</div>
<div class="landing-details">
<div class="left f20 orange"><strong>RECORDING</strong></div>
<div class="right f14 grey"><%= @claimed_recording.recording.created_at %></div>
<br clear="all" /><br />
<h2 class="left"><%= @claimed_recording.name %></h2>
<div class="right">
<a href="#"><%= image_tag "content/icon_like.png", {:width => 12, :height => 12} %>&nbsp;LIKE</a>&nbsp;&nbsp;&nbsp;
<a href="#"><%= image_tag "content/icon_share.png", {:width => 13, :height => 15} %>&nbsp;SHARE</a>
</div>
<br clear="all" />TODO: Which field is this in the database??<br /><br />
<div class="w100">
<div class="recording-controls">
<a class="left" href="#"><%= image_tag "content/icon_playbutton.png", {:width => 20, :height => 20} %></a>
<div class="recording-position">
<div class="recording-time">0:00</div>
<div class="recording-playback">
<div class="recording-slider"><%= image_tag "content/slider_playcontrols.png", {:width => 5, :height => 16} %></div>
</div>
<div class="landing-details">
<div class="left f20 orange"><strong>RECORDING</strong></div>
<div class="right f14 grey">Yesterday, 11:10 am</div>
<br clear="all" /><br />
<h2 class="left">You Hurt Me Bad</h2>
<div class="right"><a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/> LIKE</a>&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/content/icon_share.png" width="13" height="15" alt=""/> SHARE</a></div>
<br clear="all" />
A sweet and sexy ballad about broken hearts and bad girls.<br />
<br />
<!-- timeline and controls -->
<div class="w100">
<!-- recording play controls -->
<div class="recording-controls">
<!-- play button -->
<a class="left" href="#"><img src="images/content/icon_playbutton.png" width="20" height="20" /></a>
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background & slider -->
<div class="recording-playback">
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
</div>
<!-- end time -->
<div class="recording-time">4:59</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">
1:23
</div>
</div>
<!-- end recording play controls -->
<!-- genre and social -->
<div class="left white">Blues</div>
<div class="right white">80 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;12 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;35 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div>
</div>
<br clear="all" /><br />
<table class="w100">
<tr>
<td><div class="avatar-small m0"><img src="images/shared/avatar_creepyeye.jpg" alt=""/></div></td>
<td><div class="lightgrey f15 ml10">Jimmy Johnson</div></td>
<td class="p10"><div class="ml10"><img src="images/shared/icon_guitar_256.png" width="32" alt=""/></div></td>
<td width="5%"></td>
<td><div class="avatar-small m0"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div></td>
<td><div class="lightgrey f15 ml10">Perry Jon Blazinsky</div></td>
<td class="p10"><div class="ml10"><img src="images/shared/icon_keyboard_256.png" width="32" alt=""/></div></td>
</tr>
<tr>
<td><div class="avatar-small m0"><img src="images/shared/avatar_saltnpepper.jpg" alt=""/></div></td>
<td><div class="lightgrey f15 ml10">Knox Pitzer</div></td>
<td class="p10"><div class="ml10"><img src="images/shared/icon_vocals_256.png" width="32" alt=""/></div></td>
<td width="5%"></td>
<td><div class="avatar-small m0"><img src="images/content/avatar_generic.png" alt=""/></div></td>
<td><div class="lightgrey f15 ml10">Coby Jones</div></td>
<td class="p10"><div class="ml10"><img src="images/shared/icon_bass_256.png" width="32" alt=""/></div></td>
</tr>
</table>
</div>
<br clear="all" />
<div class="recording-time">4:59</div>
</div>
<div class="recording-current">1:23</div>
</div>
<div class="left white"><%= @claimed_recording.genre_id.capitalize %></div>
<div class="right white">
<%= @claimed_recording.recording.play_count %>
<%= image_tag "content/icon_arrow.png", {:width => 7, :height => 12, :align => "absmiddle"} %>&nbsp;&nbsp;&nbsp;&nbsp;
<%= @claimed_recording.recording.comment_count %>
<%= image_tag "content/icon_comment.png", {:width => 13, :height => 12, :align => "absmiddle"} %>&nbsp;&nbsp;&nbsp;&nbsp;
<%= @claimed_recording.recording.like_count %>
<%= image_tag "content/icon_like.png", {:width => 12, :height => 12, :align => "absmiddle"} %>
</div>
</div>
<br clear="all" /><br />
<table class="w100">
<% @claimed_recording.recording.recorded_tracks.each_with_index do |track, index| %>
<% if index % 2 == 0 %>
<tr>
<% end %>
<td>
<div class="avatar-small m0">
<% unless track.user.photo_url.blank? %>
<%= image_tag "#{track.user.photo_url}", {:alt => ""} %>
<% else %>
<%= image_tag "shared/avatar_generic.png", {:alt => ""} %>
<% end %>
</div>
</td>
<td><div class="lightgrey f15 ml10"><%= track.user.name %></div></td>
<td class="p10">
<div class="ml10">
<%= image_tag "shared/icon_instrument_#{track.instrument_id}45.png", {:width => 32, :alt => ""} %>
</div>
</td>
<% if index % 2 == 0 %>
</tr>
<% else %>
<td width="5%"></td>
<% end %>
<% end %>
</table>
</div>
<br clear="all" />
<!-- sidebar -->
<div class="landing-sidebar"><br />
<h2>More by Raven &amp; The Blackbirds:</h2><br />
<div class="grey f16"><em>Now:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <a href="#" class="white">Live Session in Progress</a></div>
<div class="f13 lightgrey">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</div>
<br /><br />
<div class="grey f16"><em>Yesterday:</em></div>
<div class="f16"><span class="orange"><strong>RECORDING:</strong></span> <a href="#" class="white">You Hurt Me Bad</a></div>
<div class="f13 lightgrey">Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. </div>
<br /><br />
<div class="grey f16"><em>Dec. 18th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. </div>
<br /><br />
<div class="grey f16"><em>Dec. 12th:</em></div>
<div class="f16"><span class="orange"><strong>RECORDING:</strong></span> <a href="#" class="white">Bustin' My Chops</a></div>
<div class="f13 lightgrey">Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</div>
<br /><br />
<div class="grey f16"><em>Dec. 10th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</div>
<br /><br />
<div class="grey f16"><em>Nov. 29th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. </div>
</div>
<div class="landing-sidebar"><br />
<h2>More by Raven &amp; The Blackbirds:</h2><br />
<div class="grey f16"><em>Now:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <a href="#" class="white">Live Session in Progress</a></div>
<div class="f13 lightgrey">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</div>
<br /><br />
<div class="grey f16"><em>Yesterday:</em></div>
<div class="f16"><span class="orange"><strong>RECORDING:</strong></span> <a href="#" class="white">You Hurt Me Bad</a></div>
<div class="f13 lightgrey">Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. </div>
<br /><br />
<div class="grey f16"><em>Dec. 18th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. </div>
<br /><br />
<div class="grey f16"><em>Dec. 12th:</em></div>
<div class="f16"><span class="orange"><strong>RECORDING:</strong></span> <a href="#" class="white">Bustin' My Chops</a></div>
<div class="f13 lightgrey">Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</div>
<br /><br />
<div class="grey f16"><em>Dec. 10th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</div>
<br /><br />
<div class="grey f16"><em>Nov. 29th:</em></div>
<div class="f16"><span class="teal"><strong>SESSION:</strong></span> <span class="grey">Session Ended. Unavailable.</span></div>
<div class="f13 lightgrey">Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. </div>
</div>
<!-- comments -->
<% content_for :after_black_bar do %>
<div class="wrapper">
<div class="landing-comments">
<h2>Comments:</h2>
<!-- add a comment box -->
<div class="avatar-small"><img src="images/content/avatar_generic.png" /></div>
<div class="left w80 p10">
<textarea class="w100 p5 f15" rows="2" onfocus="$(this).html('')" onblur="if($(this).html() == ''){$(this).html('Enter a comment...')}">Enter a comment...</textarea>
</div>
<br clear="all" />
<!-- scrolling area -->
<div class="landing-comment-scroller">
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_saltnpepper.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Jeremy Jones</a> Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit.
<br />
<div class="f12 grey mt5">5 minutes ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/content/avatar_generic.png" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Johnny Cameroon</a> Fusce consectetuer luctus ipsum.
<br />
<div class="f12 grey mt5">30 minutes ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_creepyeye.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Perry Gaberdeen</a> Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit.
<br />
<div class="f12 grey mt5">2 hours ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Billy Saban</a> Ut eu ligula. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus.
<br />
<div class="f12 grey mt5">Yesterday, 2:45 pm</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_saltnpepper.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Jeremy Jones</a> Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit.
<br />
<div class="f12 grey mt5">5 minutes ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/content/avatar_generic.png" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Johnny Cameroon</a> Fusce consectetuer luctus ipsum.
<br />
<div class="f12 grey mt5">30 minutes ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_creepyeye.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Perry Gaberdeen</a> Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit.
<br />
<div class="f12 grey mt5">2 hours ago</div>
</div>
<br clear="all" />
<!-- comment -->
<div class="avatar-small mr10"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Billy Saban</a> Ut eu ligula. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus.
<br />
<div class="f12 grey mt5">Yesterday, 2:45 pm</div>
</div>
<br clear="all" />
</div>
<br />
<div class="landing-comments">
<h2>Comments:</h2>
<div class="avatar-small"><img src="images/content/avatar_generic.png" /></div>
<div class="left w80 p10">
<textarea class="w100 p5 f15" rows="2" onfocus="$(this).html('')" onblur="if($(this).html() == ''){$(this).html('Enter a comment...')}">Enter a comment...</textarea>
</div>
<br clear="all" />
<div class="landing-comment-scroller">
<div class="avatar-small mr10"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div>
<div class="w80 left p10 lightgrey">
<a href="#">Billy Saban</a> Ut eu ligula. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus.
<br />
<div class="f12 grey mt5">Yesterday, 2:45 pm</div>
</div>
<br clear="all" />
</div>
</div>
<% end %>

2
web/app/views/users/_user_dropdown.html.erb
View File

@ -12,7 +12,7 @@
<div id="user" class="user"></div>
<div class="arrow-down"></div>
<ul class="shortcuts">
<ul class="shortcuts" style="z-index:1000;">
<!-- <li><a layout-link="account">Profile</a></li> -->
<li class="account-home"><%= link_to "Account Home", '/client#/account' %></li>
<li class="identity"><%= link_to "Identity", '/client#/account/identity' %></li>