diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index d45c275cf..f6c732ca9 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -67,24 +67,44 @@ class CommentStream extends Component {
// Set up messaging between embedded Iframe an parent component
this.pym = new Pym.Child({polling: 100});
- const path = /https?\:\/\/([^?#]+)/.exec(this.pym.parentUrl);
+ const path = this.pym.parentUrl.split('#')[0];
- this.props.getStream(path[1] || window.location);
+ this.props.getStream(path || window.location);
this.path = path;
this.pym.sendMessage('childReady');
+
+ this.pym.onMessage('DOMContentLoaded', hash => {
+ const commentId = hash.replace('#', 'c_');
+ let count = 0;
+ const interval = setInterval(() => {
+ if (document.getElementById(commentId)) {
+ window.clearInterval(interval);
+ this.pym.scrollParentToChildEl(commentId);
+ }
+
+ if (++count > 100) { // ~10 seconds
+ // give up waiting for the comments to load.
+ // it would be weird for the page to jump after that long.
+ window.clearInterval(interval);
+ }
+ }, 100);
+ });
}
render () {
const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0];
const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
const {actions, users, comments} = this.props.items;
- const {loggedIn, user, showSignInDialog} = this.props.auth;
+ const {loggedIn, user, showSignInDialog, signInOffset} = this.props.auth;
const {status} = this.props.config;
const {activeTab} = this.state;
const banned = (this.props.userData.status === 'banned');
- return
+ const expandForLogin = showSignInDialog ? {
+ minHeight: document.body.scrollHeight + 150
+ } : {};
+ return
{
rootItem
?
@@ -108,17 +128,18 @@ class CommentStream extends Component {
postItem={this.props.postItem}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
- currentUser={this.props.auth.user}
- banned={banned}
id={rootItemId}
premod={this.props.config.moderation}
reply={false}
- author={user}/>
+ currentUser={this.props.auth.user}
+ banned={banned}
+ author={user}
+ />
:
Comments are closed for this thread.
}
- {!loggedIn &&
}
+ {!loggedIn &&
}
{
rootItem.comments && rootItem.comments.map((commentId) => {
const comment = comments[commentId];
@@ -256,6 +277,12 @@ class CommentStream extends Component {
+
+ {status === 'open' ? 'Close' : 'Open'} Comment Stream
+
+
+
+
({
getStream: (rootId) => dispatch(getStream(rootId)),
addNotification: (type, text) => dispatch(addNotification(type, text)),
clearNotification: () => dispatch(clearNotification()),
- showSignInDialog: () => dispatch(showSignInDialog()),
+ showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)),
deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)),
appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)),
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 59efc3dc8..766ad763a 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -8,7 +8,7 @@ body {
}
.expandForSignin {
- min-height: 550px;
+ min-height: 600px;
}
button {
@@ -113,7 +113,6 @@ hr {
/* Comment styles */
.comment {
- position: relative;
margin-bottom: 10px;
position: relative;
}
diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index 13a9c72bc..7ad5e4c34 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -6,7 +6,7 @@ import coralApi, {base} from '../helpers/response';
import {addItem} from './items';
// Dialog Actions
-export const showSignInDialog = () => ({type: actions.SHOW_SIGNIN_DIALOG});
+export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG});
export const changeView = view => dispatch =>
diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js
index a4803fa96..cf5b25921 100644
--- a/client/coral-framework/reducers/auth.js
+++ b/client/coral-framework/reducers/auth.js
@@ -22,7 +22,8 @@ export default function auth (state = initialState, action) {
switch (action.type) {
case actions.SHOW_SIGNIN_DIALOG :
return state
- .set('showSignInDialog', true);
+ .set('showSignInDialog', true)
+ .set('signInOffset', action.offset);
case actions.HIDE_SIGNIN_DIALOG :
return state.merge(Map({
isLoading: false,
diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index 0e8ec1245..92e0769fe 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -8,7 +8,8 @@ const FlagButton = ({flag, id, postAction, deleteAction, addItem, showSignInDial
const flagged = flag && flag.current_user;
const onFlagClick = () => {
if (!currentUser) {
- showSignInDialog();
+ const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75;
+ showSignInDialog(offset);
return;
}
if (banned) {
diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js
index 14f7fabd6..73a945c7e 100644
--- a/client/coral-plugin-likes/LikeButton.js
+++ b/client/coral-plugin-likes/LikeButton.js
@@ -8,7 +8,8 @@ const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDial
const liked = like && like.current_user;
const onLikeClick = () => {
if (!currentUser) {
- showSignInDialog();
+ const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75;
+ showSignInDialog(offset);
return;
}
if (banned) {
diff --git a/client/coral-sign-in/components/SignDialog.js b/client/coral-sign-in/components/SignDialog.js
index 242b7443a..68d96b910 100644
--- a/client/coral-sign-in/components/SignDialog.js
+++ b/client/coral-sign-in/components/SignDialog.js
@@ -6,8 +6,14 @@ import SignInContent from './SignInContent';
import SingUpContent from './SignUpContent';
import ForgotContent from './ForgotContent';
-const SignDialog = ({open, view, handleClose, ...props}) => (
-