Initial work on header dropdown menu with notifications. Current menu items and placement of notification bubble will need more thought - Profile and "Activity on your profile" are kind of redundant.

This commit is contained in:
Victoria Wang 2014-10-10 00:08:38 -07:00
parent 4681523c4c
commit 7fe2209944
2 changed files with 57 additions and 9 deletions

View file

@ -242,6 +242,51 @@
&:hover{background:#528995; text-decoration:underline}
&.selected, &:active{background:#528995; text-decoration:underline}
}
.notification-value {
background: $c-Brand-1;
padding: 2px 5px;
@include border-radius(4px);
}
.dropdown {
height: 2.6em; //not sure why I need this :/
a {
width:100%;
}
.info {
float:right;
margin-left: 10px;
.fa-caret-down {
margin-left:10px;
}
}
}
.dropdown-menu {
top: 100%;
right: -1px;
left: auto;
background-color:#4C818C;
@include border-radius(0px 0px 6px 6px);
li {
width:100%;
a:hover {
background:#3C6670;
}
}
.divider {
border-bottom: 1px solid #5e95a1;
margin: 5px 0px;
}
.notification-value {
float:right;
padding: 0px 5px;
}
}
}
.constant-Nav{
float:left;

View file

@ -33,18 +33,21 @@
<a href="/signin" class="sign-In" title="Sign into your account">Sign In</a>
</li>
<% else %>
<li>
<a href="/dashboard" class="sign-In">Edit Site</a>
</li>
<li>
<a href="/settings" class="sign-In">Settings</a>
</li>
<li>
<a href="/signout" class="sign-In">Signout</a>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><%= current_site.username %> <span class="info"><span class="notification-value">3</span><i class="fa fa-caret-down"></i></span></a>
<ul class="dropdown-menu">
<li><a href="/site/<%= current_site.username %>">Profile</a></li>
<li><a href="/?activity=mine">Activity <span class="notification-value">3</span></a></li>
<li class="divider"></li>
<li><a href="/dashboard">Edit Site</a></li>
<li><a href="//<%= current_site.host %>" target="_blank">View Site</a></li>
<li class="divider"></li>
<li><a href="/settings">Settings</a></li>
<li><a href="/signout">Sign Out</a></li>
</ul>
</li>
<% end %>
</ul>
</nav>
<h1 class="logo int-Logo">