github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-22 12:48:28 +08:00
Code Issues Actions Packages Projects 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() {
// Highlight the item that is currently selected.
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 (!this.sources.length) return;
// 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`;
this.updateMaxHeight();
}
oncreate(vnode) {
@ -191,6 +195,13 @@ export default class Search extends Component {
.one('mouseup', (e) => e.preventDefault())
.select();
});
this.updateMaxHeightHandler = this.updateMaxHeight.bind(this);
window.addEventListener('resize', this.updateMaxHeightHandler);
}
onremove() {
window.removeEventListener('resize', this.updateMaxHeightHandler);
}
/**