diff --git a/client/coral-embed-stream/src/NewCount.js b/client/coral-embed-stream/src/NewCount.js index 99e1297e9..429ecc113 100644 --- a/client/coral-embed-stream/src/NewCount.js +++ b/client/coral-embed-stream/src/NewCount.js @@ -1,4 +1,7 @@ import React, {PropTypes} from 'react'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-framework/translations.json'; +const lang = new I18n(translations); const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, updateCountCache}) => (e) => { e.preventDefault(); @@ -14,12 +17,14 @@ const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, upd const NewCount = (props) => { const newComments = props.commentCount - props.countCache; - return
+ return
{ props.countCache && newComments > 0 && -
- Load {newComments} More Comments -
+ }
; }; diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 1deae6026..0e4f7e4a6 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -336,18 +336,26 @@ button.coral-load-more { text-align: center; color: #FFF; background-color: #2376D8; + cursor: pointer; } button.coral-load-more:hover { background-color: #4399FF; } -.coral-load-more-replies { +.coral-load-more-replies, .coral-new-comments { width: 100%; display: flex; justify-content: center; + cursor: pointer; } -.coral-load-more-replies button.coral-load-more { +.coral-new-comments { + position: relative; + top: 1.8em; + z-index: 100; +} + +.coral-load-more-replies button.coral-load-more, .coral-new-comments button.coral-load-more{ width: initial; } diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json index 2884178b6..23405d2d8 100644 --- a/client/coral-framework/translations.json +++ b/client/coral-framework/translations.json @@ -11,6 +11,9 @@ "button": "Submit", "error": "Usernames can contain letters, numbers and _ only" }, + "newCount": "View {0} more {1}", + "comment": "comment", + "comments": "comments", "error": { "emailNotVerified": "Email address {0} not verified.", "email": "Not a valid E-Mail",