ouija-io/ouija

Interrupted connection with GoInstant

Closed this issue · 16 comments

GoOz commented

So, i think, i did everything by the book to install Ouija and creating the GoInstant app but i still have this error everytime i refresh :

The connection with wss://goinstant.net/usename/app/?guest=1&gid=blablaIdbla… has been interupted while loading the page.

(it's a translation, i got my error message in french :p)

FYI, for now i'm working locally and added the authorization for localhost:2368.
Dunno if i did something wrong or whatever but here it is. Do you happen to know why i got this error?

GoOz commented

Ok, apparently it doesn't prevent the script from working. But It just doesn't work with my actual theme.
I switched to Casper and saw it, working and everything. It wasn't obvious though. If you don't know that you can comment, you wouldn't be able to discover by yourself that you can. :/

Anyway, what can i do to make it work with my theme ?

Getting Ouija compatible with themes is one of our main goals with this preview. Could you make your theme public so we can debug why the comments are not showing up?

Also, good point about the comment blocks maybe being a bit too subtle for people to notice.

GoOz commented

@colinmacdonald Actually the theme i use is a fork of the theme Uno so you already can check it out.

Perfect. I'll try it out and get back to you.

GoOz commented

Thanks :)

Hey @GoOz! That PR will help Ouija work with uno. Let me know if you see any issues after it's merged.

GoOz commented

Well i pulled but still nothing. When i take a look at the DOM, i don't have any ouija section tag within content elements.
It must be related to the fact that in your JS, the var articleContent is fixed to '.post-content' and there is no 'post-content' class on any element in the Uno theme.

Do you have any idea of a good workaround ? i don't know if i should overwrite the var, or add this class to my Uno template.
Nonetheless, it would mean that anybody using Uno theme won't get ouja working unless it's tweaked.

Ah yes, we forgot to mention the option for overriding the article_content selector. In your default.hbs under window.ouija_identifier; put window.ouija_article_content = 'section.post';. Sorry about that.

GoOz commented

Ah yes, much better, thanks.
But on lower resolutions (e.g. 1280px wide), the "push" from the right of 18% is not enough. The ouija block is half hidden.
See screenshot.
welcome_to_ghost_-_2014-05-05_14 23 33

But maybe i should open another issue…
Meanwhile, i'll try to figure out a solution on my own.

Realistically, Ouija won't be able to support every theme out there right out of the box. Some custom CSS would be needed to make everything look correct.

Definitely. It would be good to have a set of predefined styles that you can configure (or automatically get it detected similar to Disqus auto-styling?). The medium-style comments really only work with a good right margin.

If you do the developer setup for Ouija, you'll have access to the precompiled SCSS file that allows you to make modifications to those kind of values. If you just do the quick install, you can include styles (after ouija.css) to overwrite any Ouija defined properties.

GoOz commented

I'm sure it's not easy to make this work in every situation but there's something i don't get.

You do know the width of the Ouija comment block (300px) but you set the right position to 18% (why 18% btw?). Why not set the position to the witdh of the ouija block, the only non-relative, fixed width you know for sure?
Honest question. :)

The 18% value was chosen arbitrarily because it worked on several different themes as a good starting point. Setting the offset to the width Ouija pushes the content off on smaller screens. It does make sense to make the offset related to the width of Ouija, though. This also works well on centered posts as it centers the post with comments open.

PR I've opened to show this: #35

GoOz commented

Well i'm closing this one. Ouija now works fine with my theme which was the original issue. The remaining styling issue is just with small resolutions, so not related.