On 12/22/2011 03:41 PM, jtomasek(a)redhat.com wrote:
From: Jiri Tomasek<jtomasek(a)redhat.com>
---
src/app/stylesheets/custom.scss | 18 ----------
src/app/stylesheets/layout.scss | 53 ++++++++++++++++++++++++-----
src/app/views/layouts/_masthead.html.haml | 5 ++-
src/public/javascripts/application.js | 14 --------
4 files changed, 47 insertions(+), 43 deletions(-)
diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss
index 692c61c..2041fee 100644
--- a/src/app/stylesheets/custom.scss
+++ b/src/app/stylesheets/custom.scss
@@ -1,21 +1,3 @@
-#user-menu.nojs a {
- margin-left: 1em;
-}
-
-#user-menu.js {
- position: fixed;
- width: 100px;
- height: 30px;
- background: white;
- display: none;
- border: 2px solid #E7E7E7;
- padding: 0.5em;
-
- a {
- display: block;
- }
-}
-
/*fixes the button_to helper used in button-group problem*/
.button-group .button_to div .button.pill{
-webkit-border-radius: 0em 50em;
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index a6d5301..18a7c53 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -888,26 +888,61 @@ header#masthead{
margin: 0 auto;
width: 960px;
overflow: hidden;
- position: relative;
}
- a.user-dropdown{
+ label#user-dropdown-label{
border: 1px solid #ccc;
- background: url('../../images/button-userdrop.png') no-repeat center
center;
- background: url('../../images/button-userdrop.png') no-repeat center center,
-moz-linear-gradient(top, rgba(239,239,239,0), rgba(204,204,204,0));
- background: url('../../images/button-userdrop.png') no-repeat center center,
-webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(239,239,239)),color-stop(1,
rgb(204,204,204)));
+ background: #e7e7e7 url('../../images/button-userdrop.png') no-repeat center
4px;
+ display: inline-block;
width: 46px;
margin-left: 4px;
padding: 5px 2px 5px 2px;
color: transparent;
font-size: 12px; /* match the font-size of the query box, for proper valign */
+ -webkit-border-radius: 50em;
+ -moz-border-radius: 50em;
+ border-radius: 50em;
+ position: relative;
+ z-index: 2;
+ cursor: pointer;
+ margin-left: -26px;
+ }
+
+ #user-menu {
+ position: absolute;
+ top: 34px;
+ left: 50%;
+ margin-left: 354px;
+ width: 100px;
+ height: 30px;
+ background: #e7e7e7;
+ display: none;
+ border: 1px solid #ccc;
+ padding: 8px 12px;
+ z-index: 1;
+ -webkit-border-radius: 7px 0px 7px 7px;
+ -moz-border-radius: 7px 0px 7px 7px;
+ border-radius: 7px 0px 7px 7px;
-&:active{
- background: url('../../images/button-userdrop.png') no-repeat center
center;
- background: url('../../images/button-userdrop.png') no-repeat center
center, -moz-linear-gradient(top, rgba(232,232,232,0), rgba(210,210,210,0));
- background: url('../../images/button-userdrop.png') no-repeat center
center, -webkit-gradient(linear,left top,left bottom,color-stop(0,
rgb(232,232,232)),color-stop(1, rgb(210,210,210)));
+ a {
+ display: block;
}
+ }
+ input[type="checkbox"]#user-dropdown{
+ margin: 0px 0px 0px 10px;
+ position: relative;
+ z-index: 0;
+ opacity: 0;
+ }
+ /*toggle user-menu on checkbox checking*/
+ input[type="checkbox"]#user-dropdown:checked ~ #user-menu{ display: block;
}
+ input[type="checkbox"]#user-dropdown:checked ~ #user-dropdown-label{
+ border-bottom: none;
+ -webkit-border-radius: 1em 1em 0px 0px;
+ -moz-border-radius: 1em 1em 0px 0px;
+ border-radius: 1em 1em 0px 0px;
+ height: 18px;
}
nav#system{
diff --git a/src/app/views/layouts/_masthead.html.haml
b/src/app/views/layouts/_masthead.html.haml
index ea66453..4eaa72f 100644
--- a/src/app/views/layouts/_masthead.html.haml
+++ b/src/app/views/layouts/_masthead.html.haml
@@ -5,8 +5,9 @@
%li.account
%span.name.label.strong.small-caps
= "#{current_user.first_name} #{current_user.last_name}" if
current_user.present?
- %a.button.pill.user-dropdown{:href => '#'}
- %span#user-menu{ :class => javascript? ? 'js' : 'nojs' }
+ %input{:type => 'checkbox', :id => 'user-dropdown'}
+ %label{:for => "user-dropdown", :id =>
'user-dropdown-label'}
+ #user-menu
= link_to t('masthead.my_account'), account_path
= link_to t('masthead.logout'), logout_path
/ %li.separator
diff --git a/src/public/javascripts/application.js
b/src/public/javascripts/application.js
index 9df25bf..d2c262b 100644
--- a/src/public/javascripts/application.js
+++ b/src/public/javascripts/application.js
@@ -202,19 +202,6 @@ $.extend(Conductor, {
});
},
- enhanceUserMenu: function() {
- var $userDropdown = $('#system a.user-dropdown');
- if($userDropdown.length == 0) return;
-
- var offset = $userDropdown.offset()
- offset.top = offset.top + 40;
- $('#user-menu').offset(offset)
- $userDropdown.click(function(ev) {
- ev.preventDefault();
- $('#user-menu').toggle();
- });
- },
-
});
/* custom methods */
@@ -311,7 +298,6 @@ $(document).ready(function () {
Conductor.closeNotification();
Conductor.toggleCollapsible();
Conductor.selectAllCheckboxes();
- Conductor.enhanceUserMenu();
Conductor.tabAjaxRequest();
Conductor.initializeBackbone();
});
Nice one, ack