[PATCH conductor] fix user dropdown in masthead

Tomas Sedovic tsedovic at redhat.com
Thu Dec 22 15:25:43 UTC 2011


On 12/22/2011 03:41 PM, jtomasek at redhat.com wrote:
> From: Jiri Tomasek<jtomasek at 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 =>  '#'}&nbsp;
> -        %span#user-menu{ :class =>  javascript? ? 'js' : 'nojs' }
> +        %input{:type =>  'checkbox', :id =>  'user-dropdown'}
> +        %label{:for =>  "user-dropdown", :id =>  'user-dropdown-label'}&nbsp;
> +        #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



More information about the aeolus-devel mailing list