diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-01-24 15:44:31 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-01-24 15:44:31 +0100 |
commit | 0bddf7661d7ece709a18f2d167b928749638f318 (patch) | |
tree | 05aeedc6e1e5e665272188bfaf9801bc795668c7 /src | |
parent | 257cb6b81d49f5a4a0b514eb095c6ad0f4a9f5cc (diff) |
Add animation to results
Diffstat (limited to 'src')
-rw-r--r-- | src/client/react/components/container/HelpBox.js | 11 | ||||
-rw-r--r-- | src/client/react/components/container/Results.js | 3 | ||||
-rw-r--r-- | src/client/react/reducers/search.js | 7 | ||||
-rw-r--r-- | src/client/style/_component-help-box.scss | 23 | ||||
-rw-r--r-- | src/client/style/_component-search.scss | 5 | ||||
-rw-r--r-- | src/client/style/_page-index.scss | 2 | ||||
-rw-r--r-- | src/client/style/index.scss | 2 |
7 files changed, 46 insertions, 7 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} /> diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js index 2274a33..770cdcb 100644 --- a/src/client/react/reducers/search.js +++ b/src/client/react/reducers/search.js @@ -2,9 +2,10 @@ import fuzzy from 'fuzzy'; import users from '../users'; const DEFAULT_STATE = { - results: [ - 's/18562', - ], + // results: [ + // 's/18562', + // ], + results: [], searchText: '', selectedResult: null, isExactMatch: false, diff --git a/src/client/style/_component-help-box.scss b/src/client/style/_component-help-box.scss new file mode 100644 index 0000000..e7457c2 --- /dev/null +++ b/src/client/style/_component-help-box.scss @@ -0,0 +1,23 @@ +.help-box { + position: relative; + margin-top: 32px; + + .arrow { + position: absolute; + background-color: white; + width: 32px; + height: 32px; + top: -16px; + left: 48px; + transform: rotate(45deg); + } + + .bubble { + position: relative; + background-color: white; + font-weight: bold; + margin: 16px; + padding: 16px; + border-radius: 4px; + } +} diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss index cac1ae3..d819e6f 100644 --- a/src/client/style/_component-search.scss +++ b/src/client/style/_component-search.scss @@ -35,6 +35,11 @@ } } + &__results { + transition: 0.1s ease-in-out min-height; + overflow: hidden; + } + &__result { display: flex; diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss index 410a542..6fe7739 100644 --- a/src/client/style/_page-index.scss +++ b/src/client/style/_page-index.scss @@ -17,4 +17,4 @@ margin-top: 64px; } } -}
\ No newline at end of file +} diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 9521ab7..d2ad825 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -8,4 +8,6 @@ body { } @import "page-index"; + @import "component-search"; +@import "component-help-box"; |