codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2025-05-01 00:18:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Make search panel wider

Browse source
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
app/assets
javascripts/discourse
components
menu-panel.js.es6
templates/components
search-menu.hbs
stylesheets/common/base
menu-panel.scss

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

@ -11,28 +11,34 @@ export default Ember.Component.extend({
_layoutComponent() { _layoutComponent() {
if (!this.get('visible')) { return; } 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 viewMode = this.get('viewMode');
const $panelBody = this.$('.panel-body'); const $panelBody = this.$('.panel-body');
if (viewMode === 'drop-down') { if (viewMode === 'drop-down') {
// adjust panel position
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 myWidth = this.$().width();
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() - myWidth); const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
this.$().css({ left: posLeft + "px", top: posTop + "px" }); this.$().css({ left: posLeft + "px", top: posTop + "px" });
// adjust panel height // adjust panel height
let contentHeight = parseInt(this.$('.panel-body-contents').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;
} }
@ -43,10 +49,12 @@ export default Ember.Component.extend({
const $header = $('header.d-header'); const $header = $('header.d-header');
const headerOffset = $header.offset(); const headerOffset = $header.offset();
const headerOffsetTop = (headerOffset) ? headerOffset.top : 0; 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" }); this.$().css({ left: "auto", top: headerHeight + "px" });
$('body').removeClass('drop-down-visible'); $('body').removeClass('drop-down-visible');
} }
this.$().width(width);
}, },
@computed('force') @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"}} {{plugin-outlet "above-search"}}
{{search-text-field value=searchService.term id="search-term"}} {{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; position: absolute;
top: 3px; top: 3px;
bottom: 37px; bottom: 37px;
width: 96%; width: 97%;
} }
} }
@ -90,9 +90,10 @@
} }
input[type='text'] { input[type='text'] {
width: 93%; margin: 0.5em 0 0.5em;
height: 22px; box-sizing: border-box;
margin: 5px; width: 100%;
height: 32px;
padding: 5px; padding: 5px;
} }
@ -103,8 +104,8 @@
.searching { .searching {
position: absolute; position: absolute;
top: 0.1em; top: -3px;
right: 1.25em; right: 0.75em;
.spinner { .spinner {
width: 10px; width: 10px;
height: 10px; height: 10px;