Mobile-friendliness? [on iOS]

Chat rooms for mChat with optional password protection
Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Mobile-friendliness? [on iOS]

#1

Post by Kong » 23 Aug 2017, 15:17

So I've installed the mChat Rooms extension and it's working perfectly in all browsers on my PC. I brought it up on my phone to test the mobile view and I couldn't scroll over to or access the rooms menu at all. I thought I might be able to move the rooms menu to the top, using your guide in one of the other threads here, so it would load above the messages, but that didn't work either.

In both positions, right and top, the mobile view looked like the attached file (just a tiny sliver of the word "Rooms" can be seen at the top, with nothing else accessible).

Any thoughts?

Added after 35 minutes 48 seconds:
The example I posted is on iOS / Safari. I have at least one member who reports the chat rooms are working perfectly on his Android phone. Maybe it's a browser problem.

EDIT: I now have 3-4 Android users chiming in that the rooms work perfectly, with another 2-3 iPhone users who see the same as what I posted in the screenshot below, so it must just be a browser compatibility issue. I wonder if there's a workaround.
You do not have the required permissions to view the files attached to this post.

User avatar
kasimi
mChat developer
Posts: 329
Joined: 06 Oct 2016, 09:56
Contact:

Re: Mobile-friendliness? [on iOS]

#2

Post by kasimi » 23 Aug 2017, 18:52

Yes, that's a Safari bug that I haven't been able to figure out yet, mainly because I don't have a device with Safari. :?

Here's an idea: send the contents of ext/kasimi/mchatrooms/styles/prosilver/theme/mchat.rooms.css through the CSS AutoPrefixer tool to generate all vendor prefixes, and then copy the result back into mchat.rooms.css. Clear the cache and have your iOS users test again.

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Mobile-friendliness? [on iOS]

#3

Post by Steve » 23 Aug 2017, 19:48

Good website 😁

Code: Select all


 *
 * @package phpBB Extension - mChat Rooms Addon
 * @copyright (c) 2016 kasimi - https://kasimi.net
 * @license proprietary
 *
 */

.mchat-wrapper-rooms {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	width: 100%;
	position: relative;
}

.mchat-wrapper-rooms #mchat-body {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

#mchat-body.collapsible[style*="display: none"] + .mchat-rooms-body {
	display: none;
}

#notification_list {
	z-index: 5;
}

.mchat-rooms-body {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 280px;
	        flex: 0 0 280px;
	max-height: none;
	overflow-y: auto;
	padding: 5px;
	margin: 0;
	z-index: 1;
	border-radius: 0;
	border-left: 1px solid transparent;
}

.mchat-fixed-wrapper .mchat-rooms-body {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

.mchat-fixed-wrapper .mchat-wrapper-rooms #mchat-body {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

.mchat-fixed-wrapper .mchat-wrapper-rooms {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column;
	        flex-flow: column;
	-webkit-box-flex: 1;
	    -ms-flex: auto;
	        flex: auto;
}

.mchat-rooms-header {
	text-align: center;
	padding-bottom: 5px;
}

.mchat-rooms-header h3 {
	margin: 0;
}

.mchat-rooms-header a {
	font-size: 0.85em;
}

.mchat-rooms-header-menu li {
	display: inline-block;
}

.mchat-rooms-header-menu li:not(:first-child):before {
	content: '\2022\A';
}

.mchat-room {
	padding: 5px 5px 5px 7px !important;
	cursor: pointer;
	font-size: 1.2em;
}

.mchat-rooms-loading {
	display: inline-block;
	height: 12px;
	width: 12px;
	vertical-align: -1px;
	background-image: url("./images/load.gif");
	background-size: 12px;
}

.mchat-rooms-loading.hidden {
	display: none;
}

.mchat-room-name {
	display: inline-block;
}

.mchat-room.active .mchat-room-name {
	font-weight: bold;
}

.mchat-room .mchat-rooms-new-messages {
	margin-left: 5px;
	top: 0;
}

.badge {
	background-color: #D31141;
	color: #ffffff;
	border-radius: 10px;
	opacity: 0.8;
	text-align: center;
	white-space: nowrap;
	font-size: 10px;
	line-height: 1;
	float: right;
	display: inline-block;
	margin-left: 3px;
	vertical-align: baseline;
	position: relative;
	top: 3px;
	padding: 4px 6px;
}

.badge.hidden {
	display: none;
}

.mchat-room .mchat-rooms-new-messages.badge {
	color: #FFF;
	padding: 3px 5px;
	font-weight: bold;
}

.mchat-room.entered {
	border-left: 3px solid darkgrey;
	padding-left: 5px !important;
}

.mchat-room.active {
	border-left: 3px solid grey;
}

.mchat-room.entered .mchat-rooms-button-leave {
	display: block;
}

.mchat-room.protected .mchat-room-name:after,
.mchat-room.private .mchat-room-name:after {
	content: "";
	display: inline-block;
	height: 12px;
	width: 12px;
	vertical-align: -1px;
}

.mchat-room.protected .mchat-room-name:after { background-image: url("./images/protected.png"); }
.mchat-room.private .mchat-room-name:after { background-image: url("./images/private.png"); }

.mchatrooms-icon {
	padding: 0 2px 0 12px;
}

.mchatrooms-protected-icon {
	background: url("./images/protected.png") no-repeat;
}

.mchatrooms-private-icon {
	background: url("./images/private.png") no-repeat;
}

.mchat-icons-black .mchat-rooms-icon:before {
	background-image: url("./images/buttons_black.png");
}

.mchat-icons-white .mchat-rooms-icon:before {
	background-image: url("./images/buttons_white.png");
}

.mchat-rooms-icon-bell:before		{ background-position: -2px -2px; }
.mchat-rooms-icon-no-bell:before	{ background-position: -22px -2px; }
.mchat-rooms-icon-leave:before		{ background-position: -42px -2px; }
.mchat-rooms-icon-invite:before		{ background-position: -62px -2px; }

@-webkit-keyframes mchat-rooms-flash {
	0%	{ opacity: 1; }
	33%	{ opacity: 0.2; }
	66%	{ opacity: 1; }
}

@keyframes mchat-rooms-flash {
	0%	{ opacity: 1; }
	33%	{ opacity: 0.2; }
	66%	{ opacity: 1; }
}

.mchat-room .mchat-buttons {
	margin-top: 0;
}

.phpbb_alert .mchatrooms-type {
	margin-bottom: 10px;
}

.phpbb_alert .mchatrooms-type-description {
	margin: 5px 0 0 39px;
	max-width: 170px;
}

.phpbb_alert .mchatrooms-type span {
	vertical-align: -1px;
}

.phpbb_alert #mchatrooms-confirm textarea {
	resize: vertical;
	min-height: 100px;
	color: #333;
}

.phpbb_alert #mchatrooms-confirm label {
	padding: 0;
	margin: 0 10px 0 0;
	display: inline;
	cursor: pointer;
}

.phpbb_alert #mchatrooms-confirm input[type="radio"] {
	vertical-align: text-bottom;
}

ul.topiclist li.hidden {
	display: none;
}

.mchat-rooms-dropdown {
	float: left;
}

.mchat-rooms-dropdown > * {
	vertical-align: middle;
}

.mchat-fade-out {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

#mchat-messages {
	width: 100%;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {

	.mchat-wrapper-rooms {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-flow: column;
		        flex-flow: column;
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.mchat-rooms-body {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 100%;
		        flex: 0 0 100%;
		border: none;
	}

	#mchat-body {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 100%;
		        flex: 0 0 100%;
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	#mchat-messages {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.mchat-fade-out {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

}
Above css fixed my issue 👍🏻

Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Re: Mobile-friendliness? [on iOS]

#4

Post by Kong » 23 Aug 2017, 19:53

Hmm, same results as before, unfortunately. Worth mentioning that that tiny "rooms" sliver actually is a functioning window. If you can manage to precisely tap on it, you can drag it around and see the rest of the contents, etc. I wonder if there's a way to force a minimum size for Safari.

Steve, were you having the same issue as the one I posted above? I wonder why the autoprefixer didn't solve it for me. :(

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Mobile-friendliness? [on iOS]

#5

Post by Steve » 23 Aug 2017, 19:58

Yup exactly the same did you purge the forum cache and refresh the page?

Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Re: Mobile-friendliness? [on iOS]

#6

Post by Kong » 23 Aug 2017, 20:01

Yessir, did both. It's possible some of my iOS testers are using different versions of Safari, I suppose.
Did you mess around with any config on the CSS prefixer site, or just paste the CSS in and then copy it back out?

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Mobile-friendliness? [on iOS]

#7

Post by Steve » 23 Aug 2017, 20:26

Just pasted into the left column mate no settings adjusted.

Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Re: Mobile-friendliness? [on iOS]

#8

Post by Kong » 29 Aug 2017, 13:57

Alright, I tried this again. I started from scratch with your original CSS from the extension download, ran it through the autoprefixer again, purged forum cache, hard-reloaded, still the same problem. Drats. It almost looks like it's trying to load the rooms in a small padding section rather than in the chat itself, or that it's locked to 3-5 pixels high or something. Looks like it's definitely Safari-only, though.

User avatar
kasimi
mChat developer
Posts: 329
Joined: 06 Oct 2016, 09:56
Contact:

Re: Mobile-friendliness? [on iOS]

#9

Post by kasimi » 31 Aug 2017, 19:31

Starting with version 1.1.4, the vendor prefixes are included in the extension. :+1:

@Kong, sorry to hear you're still having troubles. If I ever get a chance to test on Safari, I'll definitely look into this.

Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Re: Mobile-friendliness? [on iOS]

#10

Post by Kong » 05 Sep 2017, 19:33

When I get home from work I'll try removing the extension and installing 1.1.4 to see if your official version does better than my autoprefixer attempt.

Post Reply

Who is online

Users browsing this forum: Baidu [Spider] and 1 guest