[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 => '#'}
> - %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
More information about the aeolus-devel
mailing list