diff options
author | Pepijn <pepijnfens@gmail.com> | 2016-12-08 00:08:37 +0100 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-12-07 18:08:37 -0500 |
commit | 7399d349dedc35c8c05b223a3c143a420bf2411f (patch) | |
tree | 77233100ea3b5083c8a4f78c733f1b3d0eb1ac90 /webapp/sass/layout/_post.scss | |
parent | 9b96fcc7c61075d1e5ec2d9ab5b720f7c9fdab2d (diff) | |
download | chat-7399d349dedc35c8c05b223a3c143a420bf2411f.tar.gz chat-7399d349dedc35c8c05b223a3c143a420bf2411f.tar.bz2 chat-7399d349dedc35c8c05b223a3c143a420bf2411f.zip |
Created a new message indicator component to indicate new messages (#4299)
* Created a new message indicator component to indicate new messages are present
outside the user's view:
* Created new component with styling
* Theming and i18n support for new messages indicator
* Count new unviewed messages and integrate with component
* Coding style for new message indicator
* Fixed bugs with new message indicator:
* Fix display issues with new message indicator
* Update text to deal with plurals in React
* Fix coded style for ticket 'PLT-1917': add new message indicator.
* Use only server generated timestamps for checking new messages at the bottom
* Move transitionend to prop, fix style selectors
Diffstat (limited to 'webapp/sass/layout/_post.scss')
-rw-r--r-- | webapp/sass/layout/_post.scss | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 7a119b7af..9c93c09d7 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -258,6 +258,33 @@ outline: none; text-align: center; } + .nav-pills__unread-indicator-bottom { + position: absolute; + bottom: -30px; + left: 0; + right: 0; + + @include border-radius(50px); + font-size: 13.5px; + margin: 0 auto; + padding: 3px 0 4px; + text-align: center; + max-width: 250px; + z-index: 1; + cursor: pointer; + transition: bottom 0.2s ease-out; + + .fa { + margin-right: 0.5rem; + } + + &.visible { + bottom: 0; + } + &.disabled { + display: none; + } + } } .post-list__timestamp { |