Merge pull request #3741 from scossar/reorder-menu-components-in-markup

FIX: reorder header markup so it works in LTR and RTL layouts
This commit is contained in:
Robin Ward 2015-09-10 13:47:52 -04:00
commit e29d24fefa
3 changed files with 11 additions and 11 deletions

View File

@ -28,11 +28,9 @@ export default Ember.Component.extend({
const $buttonPanel = $('header ul.icons');
if ($buttonPanel.length === 0) { return; }
const buttonPanelPos = $buttonPanel.offset();
const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
this.$().css({ left: posLeft + "px", top: posTop + "px", height: 'auto' });
// These values need to be set here, not in the css file - this is to deal with the
// possibility of the window being resized and the menu changing from .slide-in to .drop-down.
this.$().css({ top: '100%', height: 'auto' });
// adjust panel height
const fullHeight = parseInt($window.height());

View File

@ -1,8 +1,3 @@
{{plugin-outlet "header-before-dropdowns"}}
{{user-menu visible=userMenuVisible logoutAction="logout"}}
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
{{search-menu visible=searchVisible}}
<div class='wrap'>
<div class='contents clearfix'>
{{home-logo minimized=showExtraInfo}}
@ -54,6 +49,10 @@
{{/header-dropdown}}
{{/if}}
</ul>
{{plugin-outlet "header-before-dropdowns"}}
{{user-menu visible=userMenuVisible logoutAction="logout"}}
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
{{search-menu visible=searchVisible}}
</div>
{{#if showExtraInfo}}

View File

@ -1,5 +1,6 @@
.menu-panel.slide-in {
position: fixed;
// positions are relative to the .d-header .panel div
right: 0;
top: 0;
@ -13,6 +14,9 @@
.menu-panel.drop-down {
position: absolute;
// positions are relative to the .d-header .panel div
top: 100%; // directly underneath .panel
right: -10px; // 10px to the right of .panel - adjust as needed
}
.menu-panel {
@ -20,7 +24,6 @@
box-shadow: 0 2px 2px rgba(0,0,0, .25);
background-color: $secondary;
z-index: 1100;
overflow: none;
padding: 0.5em;
width: 300px;