diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 839981a46..30564f576 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -39,12 +39,16 @@ = form_tag(users_path, :method => 'get') do %label{:for => 'q'} Search = text_field_tag 'q' - %li.name= link_to current_user.real_name, current_user.person - %li= link_to "requests (#{@request_count})", requests_path, :class => new_request(@request_count) - %li= link_to "settings", edit_user_path(current_user) + %li + %ul#other_user_menu + %li + = owner_image_tag + = link_to current_user.real_name, current_user.person + %li.requests= link_to "requests (#{@request_count})", requests_path, :class => new_request(@request_count) + %li.settings= link_to "settings", edit_user_path(current_user) + %li.logout= link_to "logout", destroy_user_session_path - %li= link_to "logout", destroy_user_session_path - else = link_to "login", new_user_session_path diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 9e220bf7e..938bb4471 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -434,6 +434,7 @@ h1.big_text { top: 4px; } #user_menu { + position: relative; background: black; padding: 0 5px; margin: 0; @@ -448,9 +449,63 @@ h1.big_text { #user_menu > li:last-child { margin-right: 0; } +#other_user_menu { + position: absolute; + z-index: 10; + top: 0; + right: 0; + display: inline-block; + padding: 0; + margin: 0; + list-style: none; } + #other_user_menu > li { + display: none; + background-color: white; + width: 180px; + height: 29px; + border-left: 2px solid black; + border-right: 2px solid black; } + #other_user_menu > li:hover { + background-color: #eeeeee; } + #other_user_menu > li:first-child { + display: block; + background: black; } + #other_user_menu > li:first-child a { + color: white; } + #other_user_menu > li:first-child img { + position: absolute; + height: 20px; + top: 5px; + left: 9px; } + #other_user_menu > li:last-child { + border-bottom: 2px solid black; } + #other_user_menu > li a { + display: block; + height: 100%; + padding-left: 40px; + padding-top: 5px; + color: black; } + #other_user_menu > li a:hover { + background-color: transparent; } + #other_user_menu .requests { + background-image: url("/images/glyphish-icons/icons/40-inbox.png"); + background-repeat: no-repeat; + background-position: 5px; } + #other_user_menu .settings { + background-image: url("/images/glyphish-icons/icons/20-gear2.png"); + background-repeat: no-repeat; + background-position: 5px; } + #other_user_menu .logout { + background-image: url("/images/glyphish-icons/icons/54-lock.png"); + background-repeat: no-repeat; + background-position: 5px; } + #other_user_menu:hover li { + display: block; } + #global_search { display: inline; - position: relative; } + position: relative; + padding-right: 175px; } #global_search form { display: inline; } #global_search form input { diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 4852f02f6..3f286c983 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -549,6 +549,7 @@ h1.big_text :top 4px #user_menu + :position relative :background #000 :padding 0 5px :margin 0 @@ -570,9 +571,90 @@ h1.big_text :margin :right 0 +#other_user_menu + :position absolute + :z-index 10 + :top 0 + :right 0 + :display inline-block + :padding 0 + :margin 0 + :list + :style none + + > li + :display none + :background + :color #fff + :width 180px + :height 29px + :border + :left 2px solid #000 + :right 2px solid #000 + + &:hover + :background + :color #eee + + &:first-child + :display block + :background #000 + a + :color #fff + + img + :position absolute + :height 20px + :top 5px + :left 9px + + &:last-child + :border + :bottom 2px solid #000 + + a + :display block + :height 100% + :padding + :left 40px + :top 5px + :color #000 + + &:hover + :background + :color transparent + + .requests + :background + :image url('/images/glyphish-icons/icons/40-inbox.png') + :repeat no-repeat + :position 5px + .settings + :background + :image url('/images/glyphish-icons/icons/20-gear2.png') + :repeat no-repeat + :position 5px + .logout + :background + :image url('/images/glyphish-icons/icons/54-lock.png') + :repeat no-repeat + :position 5px + + + + + + &:hover li + :display block + + + + #global_search :display inline :position relative + :padding + :right 175px form :display inline