Hello and thanks for the distribution

I was working with the css and when resizing the window, I will get the horizontal menu on big screen. I attach a patch in a comment. I reused your code on oa_toolbar/js/toolbar-menu-toggle.js

$(window).resize(function(){
        $tray.addClass('navbar-tray-vertical'); // use vertical admin menu
        $tray.removeClass('navbar-tray-horizontal');
});

I am not used to make them, so correct to me if not well done, please. I hope this very small contribution helps :)

CommentFileSizeAuthor
#1 2410825-onresize-keep-navbar-tray-vertical.patch361 bytescandelas

Comments

candelas’s picture

candelas commented
Status: Active » Needs review
StatusFileSize
new 2410825-onresize-keep-navbar-tray-vertical.patch361 bytes
mpotter’s picture

mpotter commented
Status: Needs review » Needs work

Here are instructions on creating a patch: https://www.drupal.org/node/707484

Your patch doesn't seem to have been created correctly but I can see what you are trying to do. I'd recommend improving this a bit to first check to see if the navbar-tray-horizontal class is already on the tray or not.

I'm also not sure why just resizing the window would be removing that class so I'd be interested in learning more about why this is required. Perhaps the core issue needs to be fixed elsewhere?

candelas’s picture

candelas commented

Hello

For what I learned, the Navbar module makes it automatic. Since in Open Atrium we need it always vertical, we need to make something to avoid the change. I don't know other place where to do it :)

Respect to the code, I check now if it has the class.

      $(window).resize(function(){
        if($tray.hasClass('navbar-tray-horizontal')){
          $tray.removeClass('navbar-tray-horizontal');
        }
        if(!$tray.hasClass('navbar-tray-vertical')){
          $tray.addClass('navbar-tray-vertical'); 
        }
      });
candelas’s picture

candelas commented

I made the patch with NetBeans. I haven't done a local branch with git of Open Atrium. I use drush to update. But by sure I have made something bad. If I have to make other patch because you say yes, I will take a look :) Thanks for the link

cgove’s picture

cgove commented

This might be a better way to solve it:

The NavBar module has a built in function to lock the navbar in the vertical position when you click the button. It stores this information in localStorage. Adding:

if(localStorage){
   localStorage.setItem('Drupal.navbar.trayVerticalLocked',true);
}

Before:

}(jQuery));

Fixes it for me. Additionally the navbar stays open now after resizing.

One more minor issue remains. It appears the content right push happens at a different breakpoint than the navbar hiding. It looks the navbar disappears at about 777px and the content doesn't shift left until about 625px.

mpotter’s picture

mpotter commented

cgove++ Thanks for that! I was digging into navbar myself trying to figure out how to do exactly that but didn't know how to set that option. A much better solution. Removed the previous and committed this to 07aa9f0.

I also fixed the content being pushed right by just removing the navbar-vertical from the *body* field of the page.

cgove’s picture

cgove commented

I managed to fix the breakpoint issue with this css in my sub-theme:

@media (max-width: 767px) {
    body.navbar-tray-open.navbar-vertical {
        margin-left: 0 !important;
    }
}
mpotter’s picture

mpotter commented

Yep, that will work also. But in OA we just removed the class itself since it doesn't need to be on the body anyway. (And since I also try to avoid !important)

cgove’s picture

cgove commented

Just a personal preference thing, I suppose. I like the push because it leaves the left side buttons accessible while on admin pages. The !important is only necessary because of this code in compass_radix/_structure.scss:

@media only screen and (min-width: 38.125em) {
    /* line 224, ../../../../../../../../../../var/lib/gems/1.9.1/gems/compass_radix-3.0.13/stylesheets/compass_radix/_structure.scss */
    body.navbar-tray-open.navbar-vertical {
        margin-left: 240px !important;
    }
}
mpotter’s picture

mpotter commented

I thought the point was to *remove* the push. Why would you need to access the left side of the page when the Admin menu is pulled down? Just Click the Admin button again to remove the menu.

The problem with your CSS is that it will break in the 2.30 release because the body field will no longer have the navbar-vertical class.

cgove’s picture

cgove commented

That's fine, I can add it back with this preprocess function:

function mytheme_preprocess_html(&$vars) {
  $vars['classes_array'][] = 'navbar-vertical';
  $vars['classes_array'][] = 'navbar-vertical';
}

Edit: Had to add the class twice because the OA function happens after the subtheme function. Not pretty, but it works.

mpotter’s picture

mpotter commented
Status: Needs work » Fixed

This was fixed in #6

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

gandhiano’s picture

gandhiano commented

Cross-linking to similar issue and its answers on StackExchange