aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-01-24 15:44:31 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-01-24 15:44:31 +0100
commit0bddf7661d7ece709a18f2d167b928749638f318 (patch)
tree05aeedc6e1e5e665272188bfaf9801bc795668c7 /src/client/react/components/container
parent257cb6b81d49f5a4a0b514eb095c6ad0f4a9f5cc (diff)
Add animation to results
Diffstat (limited to 'src/client/react/components/container')
-rw-r--r--src/client/react/components/container/HelpBox.js11
-rw-r--r--src/client/react/components/container/Results.js3
2 files changed, 11 insertions, 3 deletions
diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js
index b4556a5..a74b43c 100644
--- a/src/client/react/components/container/HelpBox.js
+++ b/src/client/react/components/container/HelpBox.js
@@ -2,24 +2,29 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-const HelpBox = ({ results }) => {
- if (results.length > 0) {
+const HelpBox = ({ results, searchText }) => {
+ if (results.length > 0 || searchText !== '') {
return <div />;
}
return (
<div className="help-box">
- Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in.
+ <div className="arrow" />
+ <div className="bubble">
+ Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in.
+ </div>
</div>
);
};
HelpBox.propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
+ searchText: PropTypes.string.isRequired,
};
const mapStateToProps = state => ({
results: state.search.results,
+ searchText: state.search.searchText,
});
export default connect(mapStateToProps)(HelpBox);
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 911ea27..1fb5f44 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -9,6 +9,9 @@ const Results = (({ results, isExactMatch, selectedResult }) => (
className={classnames('search__results', {
'search__results--has-results': !isExactMatch && results.length > 0,
})}
+ style={{
+ minHeight: isExactMatch ? 0 : results.length * 54,
+ }}
>
{!isExactMatch && results.map(userId => (
<Result key={userId} userId={userId} isSelected={userId === selectedResult} />