From 69974c9613b85b5cd0895c921975b9e781d7e7ee Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Mar 2018 18:27:39 +0100 Subject: Migrate Result(s) --- src/client/react/components/container/Results.js | 6 +++-- src/client/react/components/container/Results.scss | 5 ++++ .../react/components/presentational/Result.js | 15 ++++++----- .../react/components/presentational/Result.scss | 30 ++++++++++++++++++++++ 4 files changed, 48 insertions(+), 8 deletions(-) create mode 100644 src/client/react/components/container/Results.scss create mode 100644 src/client/react/components/presentational/Result.scss (limited to 'src/client/react/components') diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index 4fc9987..82e37cb 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -28,6 +28,8 @@ import users from '../../users'; import { setUser, userFromMatch } from '../../lib/url'; import Result from '../presentational/Result'; +import './Results.scss'; + class Results extends React.Component { static propTypes = { results: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -56,8 +58,8 @@ class Results extends React.Component { return (
0, + className={classnames('Results', { + hasResults: !isExactMatch && this.props.results.length > 0, })} style={{ minHeight: isExactMatch ? 0 : this.props.results.length * 54, diff --git a/src/client/react/components/container/Results.scss b/src/client/react/components/container/Results.scss new file mode 100644 index 0000000..60379cf --- /dev/null +++ b/src/client/react/components/container/Results.scss @@ -0,0 +1,5 @@ +.Results { + &.hasResults { + border-top: 1px #BDBDBD solid; + } +} diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js index 18e4eb9..900d3ac 100644 --- a/src/client/react/components/presentational/Result.js +++ b/src/client/react/components/presentational/Result.js @@ -25,6 +25,8 @@ import users from '../../users'; import IconFromUserType from './IconFromUserType'; +import './Result.scss'; + class Result extends React.Component { static propTypes = { userId: PropTypes.string.isRequired, @@ -34,20 +36,21 @@ class Result extends React.Component { render() { return ( - // eslint-disable-next-line + /* eslint-disable jsx-a11y/click-events-have-key-events */ + /* eslint-disable jsx-a11y/no-static-element-interactions */
-
+
-
+
{users.byId[this.props.userId].value} {users.byId[this.props.userId].alt && - + {` ${users.byId[this.props.userId].alt}`} } diff --git a/src/client/react/components/presentational/Result.scss b/src/client/react/components/presentational/Result.scss new file mode 100644 index 0000000..1ca0dd8 --- /dev/null +++ b/src/client/react/components/presentational/Result.scss @@ -0,0 +1,30 @@ +.Result { + display: flex; + cursor: pointer; + + &:hover, &.isSelected { + background-color: lightgray; + } + + .iconWrapper { + height: 54px; + padding: 15px; + + svg { + height: 24px; + width: 24px; + } + } + + .text { + padding: 15px; + padding-left: 0px; + font-size: 16px; + transform: translate(0, 3px); + + .alt { + font-style: italic; + color: gray; + } + } +} -- cgit v1.1