diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-10-20 17:31:20 -0400 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-10-23 13:05:38 -0400 |
commit | 4172d0286e61b4fd5459fc64e7653535751a012d (patch) | |
tree | 7fabd8e8d1642f3a660ee592c8d9931078b62de7 /web | |
parent | 4a1f6ad2a972bb0f30414db3dc1899d88a01d29b (diff) | |
download | chat-4172d0286e61b4fd5459fc64e7653535751a012d.tar.gz chat-4172d0286e61b4fd5459fc64e7653535751a012d.tar.bz2 chat-4172d0286e61b4fd5459fc64e7653535751a012d.zip |
Added styling to search autocomplete
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/search_autocomplete.jsx | 12 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 30 |
2 files changed, 41 insertions, 1 deletions
diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx index 284b475c1..0229b07fd 100644 --- a/web/react/components/search_autocomplete.jsx +++ b/web/react/components/search_autocomplete.jsx @@ -90,11 +90,14 @@ export default class SearchAutocomplete extends React.Component { channels = channels.filter((channel) => channel.name.startsWith(this.state.filter)); } + channels.sort((a, b) => a.name.localeCompare(b.name)); + suggestions = channels.map((channel) => { return ( <div key={channel.id} onClick={this.handleClick.bind(this, channel.name)} + className='search-autocomplete__channel' > {channel.name} </div> @@ -107,12 +110,19 @@ export default class SearchAutocomplete extends React.Component { users = users.filter((user) => user.username.startsWith(this.state.filter)); } + users.sort((a, b) => a.username.localeCompare(b.username)); + suggestions = users.map((user) => { return ( <div key={user.id} onClick={this.handleClick.bind(this, user.username)} + className='search-autocomplete__user' > + <img + className='profile-img' + src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at} + /> {user.username} </div> ); @@ -126,7 +136,7 @@ export default class SearchAutocomplete extends React.Component { return ( <div ref='container' - style={{overflow: 'visible', position: 'absolute', zIndex: '100', background: 'yellow'}} + className='search-autocomplete' > {suggestions} </div> diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 2f15a445f..d7287295b 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -109,3 +109,33 @@ .search-highlight { background-color: #FFF2BB; } + +.search-autocomplete { + background-color: #fff; + border: $border-gray; + line-height: 36px; + overflow-x: hidden; + overflow-y: scroll; + position: absolute; + text-align: left; + width: 100%; + z-index: 100; + @extend %popover-box-shadow; +} + +.search-autocomplete__channel { + height: 36px; + padding: 0px 6px; +} + +.search-autocomplete__user { + height: 36px; + padding: 0px; + + .profile-img { + height: 32px; + margin-right: 6px; + width: 32px; + @include border-radius(16px); + } +} |