From d2a177f1dd82a999675efaa3aa392526675b8de1 Mon Sep 17 00:00:00 2001
From: scossar <scossar3@gmail.com>
Date: Tue, 8 Sep 2015 15:31:44 -0700
Subject: [PATCH] change menu components position in header
---
.../discourse/components/menu-panel.js.es6 | 8 +++-----
.../javascripts/discourse/templates/header.hbs | 9 ++++-----
app/assets/stylesheets/common/base/menu-panel.scss | 12 ++++--------
3 files changed, 11 insertions(+), 18 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/menu-panel.js.es6 b/app/assets/javascripts/discourse/components/menu-panel.js.es6
index 8961e9f93..8a5b2ea27 100644
--- a/app/assets/javascripts/discourse/components/menu-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/menu-panel.js.es6
@@ -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());
diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs
index 870906119..ab92b1951 100644
--- a/app/assets/javascripts/discourse/templates/header.hbs
+++ b/app/assets/javascripts/discourse/templates/header.hbs
@@ -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}}
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 9eb96fb38..33d69271c 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -1,18 +1,15 @@
.menu-panel.slide-in {
position: fixed;
+ // positions are relative to the .d-header .panel div
right: 0;
top: 0;
-
- .panel-body {
- position: absolute;
- top: 3px;
- bottom: 37px;
- width: 97%;
- }
}
.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 +17,6 @@
box-shadow: 0 2px 2px rgba(0,0,0, .25);
background-color: $secondary;
z-index: 1100;
- overflow: none;
padding: 0.5em;
width: 300px;