mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-05-12 18:35:23 +02:00
Code Issues Releases Wiki Activity

Adjust search height on resize (#2775)

Browse Source 
Identified as a potential issue in https://github.com/flarum/core/pull/2650

When typing, the keyboard generally obstructs half the screen. However, when the keyboard is closed, search results don't expand to take up full space.
This commit is contained in:
Alexander Skvortsov 2021-04-19 10:36:04 -04:00 committed by GitHub
parent e77365f32f
commit 0f9526ba9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/src/forum/components/Search.js
View File

@ -114,6 +114,15 @@ export default class Search extends Component {
); );
} }
updateMaxHeight() {
// Since extensions might add elements above the search box on mobile,
// we need to calculate and set the max height dynamically.
const resultsElementMargin = 14;
const maxHeight =
window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
}
onupdate() { onupdate() {
// Highlight the item that is currently selected. // Highlight the item that is currently selected.
this.setIndex(this.getCurrentNumericIndex()); this.setIndex(this.getCurrentNumericIndex());
@ -121,12 +130,7 @@ export default class Search extends Component {
// If there are no sources, the search view is not shown. // If there are no sources, the search view is not shown.
if (!this.sources.length) return; if (!this.sources.length) return;
// Since extensions might add elements above the search box on mobile, this.updateMaxHeight();
// we need to calculate and set the max height dynamically.
const resultsElementMargin = 14;
const maxHeight =
window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
} }
oncreate(vnode) { oncreate(vnode) {
@ -191,6 +195,13 @@ export default class Search extends Component {
.one('mouseup', (e) => e.preventDefault()) .one('mouseup', (e) => e.preventDefault())
.select(); .select();
}); });
this.updateMaxHeightHandler = this.updateMaxHeight.bind(this);
window.addEventListener('resize', this.updateMaxHeightHandler);
}
onremove() {
window.removeEventListener('resize', this.updateMaxHeightHandler);
} }
/** /**