github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 22:50:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Experiment with variable heights for slide-in menus

Browse Source
This commit is contained in:
Robin Ward 2015-09-02 16:46:25 -04:00
parent 286738c712
commit 0cd393f310
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/javascripts/discourse/components/menu-panel.js.es6
View File

@ -22,32 +22,41 @@ export default Ember.Component.extend({
const viewMode = this.get('viewMode'); const viewMode = this.get('viewMode');
const $panelBody = this.$('.panel-body'); const $panelBody = this.$('.panel-body');
let contentHeight = parseInt(this.$('.panel-body-contents').height());
if (viewMode === 'drop-down') { if (viewMode === 'drop-down') {
const $buttonPanel = $('header ul.icons'); const $buttonPanel = $('header ul.icons');
if ($buttonPanel.length === 0) { return; } if ($buttonPanel.length === 0) { return; }
const buttonPanelPos = $buttonPanel.offset(); const buttonPanelPos = $buttonPanel.offset();
const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top); const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width); const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
this.$().css({ left: posLeft + "px", top: posTop + "px" }); this.$().css({ left: posLeft + "px", top: posTop + "px", height: 'auto' });
// adjust panel height // adjust panel height
let contentHeight = parseInt(this.$('.panel-body-contents').height());
const fullHeight = parseInt($window.height()); const fullHeight = parseInt($window.height());
const offsetTop = this.$().offset().top; const offsetTop = this.$().offset().top;
const scrollTop = $window.scrollTop(); const scrollTop = $window.scrollTop();
if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) { if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) {
contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN; contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
} }
$panelBody.height(contentHeight); $panelBody.height(contentHeight);
$('body').addClass('drop-down-visible'); $('body').addClass('drop-down-visible');
} else { } else {
$panelBody.height('auto');
this.$().css({ left: "auto", top: headerHeight() + "px" }); const menuTop = headerHeight();
let height;
if ((menuTop + contentHeight) < ($(window).height() - 20)) {
height = contentHeight + "px";
} else {
height = $(window).height() - menuTop;
}
$panelBody.height('100%');
this.$().css({ left: "auto", top: (menuTop - 2) + "px", height });
$('body').removeClass('drop-down-visible'); $('body').removeClass('drop-down-visible');
} }

2
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -2,7 +2,7 @@
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
height: 100%;
.panel-body { .panel-body {
position: absolute; position: absolute;
top: 3px; top: 3px;