nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hightlighting the down-arrow next to user name on hover

Browse source 
- the right-arrow wasn't highlighted on hover, which was
  inconsistent with the other header items

- changed the user-menu items highlight color from #fff to #fafafa, which is
  consistent across the header

- refactored the css to reduce specificity

- refactored css to use nesting in class names instead of nesting in
  scss (as advocated by http://smacss.com) to reduce specificity and
  to enhance readability
This commit is contained in:
Srihari Sriraman 2013-08-26 13:38:43 +05:30
parent 625159c8ad
commit 623d517e89
2 changed files with 56 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/assets/stylesheets/header.css.scss
View file

@ -227,57 +227,60 @@ body > header {
border-left: 1px solid #333; border-left: 1px solid #333;
border-right: 1px solid #333; border-right: 1px solid #333;
li {
a {
padding: 4px;
height: 100%;
color: #939393;
&:hover {
background-color: $blue;
color: #fff;
text-decoration: none;
}
}
&:first-child {
padding: 5px 0;
a {
padding-right: 15px;
&:hover {
background-color: transparent;
text-decoration: none;
}
&:focus { :outline: none; }
}
.right {
position: absolute;
right: 5px;
}
}
}
&.active { &.active {
margin-top: -3px; margin-top: -3px;
@include dropdown-shadow; @include dropdown-shadow;
background-color: rgb(34,30,30); background-color: rgb(34,30,30);
border: 1px solid #999; border: 1px solid #999;
} }
}
.avatar { .user-menu-item a {
height: 22px; padding: 4px;
width: 22px; height: 100%;
position: absolute; color: #939393;
left: 7px;
top: 9px; &:hover {
display: block; background-color: $blue;
color: #FAFAFA;
text-decoration: none;
} }
} }
.user-menu-trigger {
padding: 5px 0;
&:hover {
color: #FAFAFA;
.user-name { color: #FAFAFA; }
}
}
.user-name {
padding: 4px 15px 4px 4px;
&:hover {
background-color: transparent;
text-decoration: none;
}
&:focus { :outline: none; }
}
.user-menu-more-indicator {
position: absolute;
right: 5px;
}
.user-menu-avatar {
height: 22px;
width: 22px;
position: absolute;
left: 7px;
top: 9px;
display: block;
}
.header-nav { .header-nav {
font-weight: bold; font-weight: bold;
float: left; float: left;

24
app/assets/templates/header_tpl.jst.hbs
View file

@ -85,21 +85,21 @@
</div> </div>
<ul class="dropdown" id="user_menu"> <ul class="dropdown" id="user_menu">
<li> <li class="user-menu-trigger">
<div class="right"> <div class="user-menu-more-indicator">
▼ ▼
</div> </div>
<img alt="{{current_user.name}}" class="avatar" src="{{current_user.avatar.small}}" title="{{current_user.name}}" /> <img alt="{{current_user.name}}" class="user-menu-avatar" src="{{current_user.avatar.small}}" title="{{current_user.name}}" />
<a href="#">{{current_user.name}}</a> <a class="user-name" href="#">{{current_user.name}}</a>
</li> </li>
<li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li> <li class="user-menu-item"><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
<li><a href="/contacts">{{t "header.contacts"}}</a></li> <li class="user-menu-item"><a href="/contacts">{{t "header.contacts"}}</a></li>
<li><a href="/user/edit">{{t "header.settings"}}</a></li> <li class="user-menu-item"><a href="/user/edit">{{t "header.settings"}}</a></li>
<li><a href="/help">{{t "header.help"}}</a></li> <li class="user-menu-item"><a href="/help">{{t "header.help"}}</a></li>
{{#if current_user.admin}} {{#if current_user.admin}}
<li><a href="/admins/user_search">{{t "header.admin"}}</a></li> <li class="user-menu-item"><a href="/admins/user_search">{{t "header.admin"}}</a></li>
{{/if}} {{/if}}
<li><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li> <li class="user-menu-item"><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
</ul> </ul>