Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Make search panel wider

This commit is contained in:
Robin Ward 2015-08-31 16:27:36 -04:00
parent a4029675bd
commit 6425650931
3 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,28 +11,34 @@ export default Ember.Component.extend({
_layoutComponent() {
if (!this.get('visible')) { return; }
const $window = $(window);
let width = this.get('maxWidth') || 300;
const windowWidth = parseInt($window.width());
if ((windowWidth - width) < 50) {
width = windowWidth - 50;
}
const viewMode = this.get('viewMode');
const $panelBody = this.$('.panel-body');
if (viewMode === 'drop-down') {
// adjust panel position
const $buttonPanel = $('header ul.icons');
if ($buttonPanel.length === 0) { return; }
const buttonPanelPos = $buttonPanel.offset();
const myWidth = this.$().width();
const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth);
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
this.$().css({ left: posLeft + "px", top: posTop + "px" });
// 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 scrollTop = $(window).scrollTop();
const scrollTop = $window.scrollTop();
if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) {
contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
}
@ -43,10 +49,12 @@ export default Ember.Component.extend({
const $header = $('header.d-header');
const headerOffset = $header.offset();
const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
const headerHeight = parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 3);
const headerHeight = parseInt($header.height() + headerOffsetTop - $window.scrollTop() + 3);
this.$().css({ left: "auto", top: headerHeight + "px" });
$('body').removeClass('drop-down-visible');
}
this.$().width(width);
},
@computed('force')

2
app/assets/javascripts/discourse/templates/components/search-menu.hbs
View File

@ -1,4 +1,4 @@
{{#menu-panel visible=visible onVisible="showedSearch" onHidden="cancelHighlight"}}
{{#menu-panel visible=visible onVisible="showedSearch" onHidden="cancelHighlight" maxWidth="500"}}
{{plugin-outlet "above-search"}}
{{search-text-field value=searchService.term id="search-term"}}

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

@ -7,7 +7,7 @@
position: absolute;
top: 3px;
bottom: 37px;
width: 96%;
width: 97%;
}
}
@ -90,9 +90,10 @@
}
input[type='text'] {
width: 93%;
height: 22px;
margin: 5px;
margin: 0.5em 0 0.5em;
box-sizing: border-box;
width: 100%;
height: 32px;
padding: 5px;
}
@ -103,8 +104,8 @@
.searching {
position: absolute;
top: 0.1em;
right: 1.25em;
top: -3px;
right: 0.75em;
.spinner {
width: 10px;
height: 10px;