aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/react/components/container/HelpBox.js11
-rw-r--r--src/client/react/components/container/Results.js3
-rw-r--r--src/client/react/reducers/search.js7
-rw-r--r--src/client/style/_component-help-box.scss23
-rw-r--r--src/client/style/_component-search.scss5
-rw-r--r--src/client/style/_page-index.scss2
-rw-r--r--src/client/style/index.scss2
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";