Babble - A Chat Plugin [ARCHIVE]


(Blu McCormick) #817

I just had this plugin installed and it is awesome! I have a troubleshooting question. If I should post this elsewhere, please correct me.

I checked this setting for the plugin:

The top of the chat channel is cut off on the home page:

Is this because I have an after header in my forum (which adds the horizontal menu)?

Summary

I am guessing so because when I go into admin, there is no after header and on that page we get to see the top of the channel window:

If so, is there a way I can correct this without losing my afterheader which is key to the functionality of my website?

This is how the “Chats” appears in admin–>site settings, which I couldn’t care less about. Only reason I show it is on the off chance it could be related somehow:

And here is my custom css common code in case there is something in there that might explain this.

Summary

@media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}

#bar a,
#bar a:visited {
	color: #484848;
}

#bar a:hover,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: relative;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: -60px;
	width: 100vw;
	padding-top: 0;
}

nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}
.lightbox-wrapper {
    display: block;
    text-align: center;
}

p>img {
    display: block;
    margin: 0 auto; 
}
$categories: LCAG Wiki, Lafayette Colorado Advocacy Group, Site Feedback, Forum Administrators, LCAG Lounge, LCAG Core Leadership;

.categories-list {
	@each $category in $categories {
		&.category-#{$category}:not(.staff) {
			#list-area,
			#navigation-bar {
				display: none;
			}

			.category-navigation {
				> button,
				> .category-notifications-button,
				.category-drop:nth-of-type(2),
				.tag-drop {
					display: none;
				}
			}

			.category-list {
				margin-top: 18px;
			}
		}
	}
}
body {
	&:not(.navigation-categories):not(.navigation-topics) {
		.custom-footer {
			display: none;
		}
	}

	&.navigation-categories,
	&.navigation-topics {
		#main > div:first-child {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		#main-outlet {
			flex: 1 0 auto;
		}
		
		.custom-footer {
			margin-bottom: 1em;
		}
	}
}

Here is my common–>after header code as allowed for in custom css by discourse:

Summary
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu" id="bar">
    <ul>
        <li><a href="http://wethepeoplejournal.com/">HOME</a></li>
        <li><a href="http://wethepeoplejournal.com/blog-archive/">BLOGS</a></li>
        <li><a class="forum-link" href="https://forums.wethepeoplejournal.com/">FORUM</a></li>
        <li><a href="http://wethepeoplejournal.com/lafayette-colorado-advocacy-group/">GROUPS</a></li>
        <li><a href="http://wethepeoplejournal.com/calendar/">CALENDAR</a></li>
    </ul>
  <label for="navbar-checkbox" class="navbar-handle">Menu</label>
</nav>

If having an after header is a problem, is there some custom code I can add to fix this temporarily until this is fixed in the plugin? My thought is plenty of people use the after header section for code and it would be a good thing to program for (if I’ve correctly guessed what the problem is here).

Thanks in advance.

Addendum:

III kindly provided code that fixed the problem. Thanks, @lll.

Here is the code:

> .babble-sidebar .babble-chat {
>     padding-top: 50px;
> }
> 
> nav#bar:before {
>     content: "";
> }

With the following things to keep in mind (quoted from III):

1- This fix is specific to your layout because it’s uses hard-coded values that match the rest of your layout. So while the method may work on your site. It would a bit different on someone else’s

2- The setting in the plugin calculates the height of the header and adjusts the chat window automatically. This would have worked for your site as well if the items have been added inside the header.

However, they are not, it’s an illusion and they just look like they are one part because of the shared background color and lack of spacing in between them.

So as far as the plugin setting is concerned, the header height has not changed and that’s way it doesn’t work in your case.


Has anyone had the top of their Babble-A Chat Plugin window cut off by their after header and how did you fix this?
Mobile Header expanding after tapping hamburger menu
(Guy Fawkes) #818

hello James please can u fix this , in my mobile I can’t see the previous messages (the internet is fast so the problem in the plugin I think)
@gdpelican
and also in the web view I can’t send messages :


(James Kiesel) #819

Hi @McBlu,

Have you had a go with the ‘Babble adaptive height’ setting set to ‘on’? This is a setting which calculates the height the chat pane should be on resize, which runs slightly more code but also allows the chat pane to be smart about unpredictable header heights.


(James Kiesel) #820

The first looks like a CSS problem to me; the text (and dates) appear to be in white. Is your forum running a theme, or does it have any custom CSS going?

For the second thing; ensure you’re up to date with the latest (I believe we had a bug like this in a slightly older version), and if that doesn’t fix the problem could you let me know if you receive any errors in the console, as well as giving me the output of /logs if there are any errors there?


(Blu McCormick) #821

Yes. Discoursehosting.com kindly installed the plugin for me. There was no change from before that setting was checked to when I checked it, the setting being this:

My header includes an “after header.” Would that be a problem normally?


(James Kiesel) #822

Oh, sorry, I see you’ve mentioned that in your original post now. Are you able to send me a link to the forum in question?


(Blu McCormick) #823

Absolutely! https://forums.wethepeoplejournal.com/

You’d need to join it to play with it. Please be my guest. The channels are categories – the lounge you’d have to be a trust level three for, which I can make happen if we need to go that deep, or I can just create a channel for the category open to trust level 0s.


(Guy Fawkes) #824

No , actually I didn’t start my forum yet , I was testing the plugin in babble sandbox , I noticed that problem , it happens from time to time , and also I was getting this message invalid date.


(Joshua) #825

Does this plugin have something that shows if someone is typing?


(Blu McCormick) #826

Has anyone had this happen in the chat window and know the fix? “Invalid date.”

Today, the date is working, lol.
08%20AM

So please ignore my comment. I’ll leave this here in case others come across this problem.


(tran) #827

I can choose the image but can’t send out.I don’t know what’s wrong with it.


(Blu McCormick) #828

Me neither, @tran. In my case, I can’t attach emojis or pngs. I can select the items but pressing enter doesn’t do anything as far as entering the information into the chat window. Here is a video (just imagine me clicking enter at the end of each attempt):


(tran) #829

@McBlu I can attact emojis on my computer but not with my phone. If I press the attachment key,I couldn’t input anything and choose emojis anymore unless I close the babble window and open again.


(Blu McCormick) #830

Me, too, Tran. Everything freezes when I try either emojis or attachments – on both my iphone and apple desktop.


(Joshua) #831

Is there a place where I can see this plugin in action?


(Blu McCormick) #833

Yes.


(Blu McCormick) #834

@gdpelican I love your apps, btw.

The emojis are working again. Yay. The attach function doesn’t work and freezes the chat when it is selected. Are there any plans in the works to fix this problem or to simply delete that function from the plugin?


#835

Has anyone experienced lagging on mobiles with Babble and been able to fix it? I’ve been wondering if it’s possibly the username is typing feature. IT seems like with every letter typed there is a delay.

In any case, if there are some optimizations that can be applied, it would be interesting to hear a little about it.


(Blu McCormick) #836

I am not experiencing lagging on my iphone 6 using Safari, @ninermac. By any chance, are you having trouble with uploading attachments to the chat channel?


#837

I restarted my device, found out there was no lag, might have been my device, works fine now on android using chrome, also sending out a message seems a bit slow, but that might be my connection.

But overall @gdpelican, your plugin is great, I had changed it to my team communication tool, after using slack for sometime.