Bug report: the new chatbox is cut off on my Android tablet


#1

This seems to affect the mobile version of Firefox far less than the mobile version of Brave (which uses the Blink engine), but it’s still annoying.

Also, on another webview-based browser, JumpGo, the chatbox doesn’t show up at all unless the device is in landscape mode (I can’t see the conversation, but my keyboard appears, so I’m guessing I can still type).


#2

Thanks for the feedback - I didn’t realise it had these issues on mobile browsers.

I had a quick check on my phone (OnePlus 2) and the Chrome browser is missing the compose box, even when scrolled to the bottom. I.e. when I type, no writing appears:

I’ll have a look to see if it’s something that can be easily fixed…

Edit: It looks like the Chat plug-in doesn’t properly support mobile. When I tried viewing it in a mobile simulator and scrolled down, I somehow managed to delete Alan’s last post in the process, which I certainly didn’t mean to do. :doh:


General Chat
#3

I have the chat compose box now displaying in the Chrome browser on my phone.

The CSS for compose box positions it 64 pixels from the bottom of the viewport height. For some reason, the Chrome mobile browser seems to be including the address bar in the height, which in turn positions the compose box below the bottom of the screen. So I’ve tweaked the CSS to target Chrome based mobile browsers, increasing that to 100 pixels and now the Babble chatbox appears fine.

in the process, I discovered another bug that the page buttons do not properly in the smileys lists:

Touching either will close the chatbox, losing what I’ve typed.


#4

That’s life sometimes. You finally fix one big just to stumble upon another.:sweat:

FWIW, aside from the smiles bug, it seems to be working much better now on JumpGo as well.:thumbsup:


#5

It looks like I found the smileys bug, but it’s in the Discourse source JavaScript: :doh:

The ‘, !1’ after the return line prevents the Babble chatbox window closing when the next/previous buttons are clicked. It’s there after the toolbar tabs and individual smileys return lines, but it’s missing for the two navigation buttons as highlighted above.


#6

I’ve added a little bit of JQuery to return the false (!1) value for those two buttons as well as clicking background.

$('body').mousedown(function() {
  $('.emoji-modal, .emoji-modal .nav a').click(function(){return false;});
});

I’ve set this for each mouse down-click event, otherwise the events get cleared, closing the chatbox after the second page of smileys are displayed.

So now hopefully the smiley pages are fully usable in chat. :slight_smile:

Edit: I added the smiley icon to the chatbox shown on desktop browsers.

Edit 2: Shortened the JQuery code.


#7

That’s fantastic work Seán. :clapping:

Not sure if it’s related but I’ve just noticed all the chat posts are now showing “Invalid date” beside them.


#8

Wombler that has been happening off and on since it started


#9

@bean55 Ah right. Seán’s probably working on it already then.


#10

The only fix I can think of would be to have a script repetitively doing a search & replace of ‘Invalid date’ with let’s say “Just now”. I might give this a try, although ideally I rather not have a timer repetitively running searching & replacing text regardless of what the user is viewing, particularly since this just affects the chat box, unlike the BB code issue.


#11

That seems to have worked Seán as it’s displaying properly here now.


#12

That’s quick - I only just put in the code now. :smiley:

It should now display ‘Now’ in place of ‘Invalid date’.


#13

Not sure if this is what you mean by “now” but it displays the post time which is the way it should be.

Great job Seán!


#14

In case any visitor lands here with a similar issue, I revised the code as follows:

setInterval(function(){
    $(".babble-posts .relative-date:contains('Invalid date')").text("New");
}, 500);

This modification fixes an issue with the edit button, which Alan spotted.