Optimalized theme for mobile devices? (standalone version)

186 views
Skip to first unread message

bela

unread,
Jan 14, 2014, 11:09:28 AM1/14/14
to ajax...@googlegroups.com

Hi, 

I have a standalone chat on my site, and my question is, where must i change the values, or create a new theme
for height, width. (or hide the emotions, users etc.) 

I think this theme can some users be intresting, if a script is inserted on the site  and this script can recognize what device the visitor has.
In the moment when the visitor will open the chat, in the screen shows automatically with this modificated theme.

What do you think, with this engiene is possible make this?

(sorry my bad English)

Frug

unread,
Jan 14, 2014, 2:09:26 PM1/14/14
to ajax...@googlegroups.com
Mobile support will be introduced in the next version ( 0.8.8 ) but this will only be purely CSS fixes to make it display better on small screens.

So far I'm working on this. Put this in chat/css/global.css at the bottom:

@media (max-width: 700px) {
	#content #headline { left: 5px; margin: 0; padding: 0; }
	#content #statusIconContainer { top: 5px; right: 5px;  }
	#content #copyright { top: 10px; right: 40px; }
	#content #logoutChannelContainer { top: 30px; left: 5px; }
	#content #logoutChannelContainer label { display: none; }
	#content #emoticonsContainer { display: none; }
	#content #bbCodeContainer { bottom: 45px; left: 5px; }
	#content #optionsContainer { bottom: 10px; right: 5px; }
	#content #onlineListContainer { width: 135px; right: 5px; bottom: 115px; }
	#content #chatList { left: 5px; right: 150px; bottom: 115px; font-size: 12px; }
	#content #submitButtonContainer  { display: none; }
	#content #inputFieldContainer #inputField { height: 20px; }
	#content #inputFieldContainer { left: 5px; right: 5px; bottom: 80px; }
	#content #colorCodesContainer { bottom:85px; left: 5px; }
}

@media (max-width: 480px) {
	#content #chatList { left: 0px; border-left: 0; right: 135px; border-right: 0; }
	#content #onlineListContainer { border-right: 0; right: 0px; }
	#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginContent #loginButton { padding: 4px; display: block; float: left; margin-right: 1px;}
	#content #bbCodeContainer { padding: 0; }
}

@media (max-height: 300px) {
	#content #bbCodeContainer, #content #optionsContainer { display: none; }
	#content #inputFieldContainer #inputField { height: 20px; }
	#content #inputFieldContainer { bottom: 5px; }
	#content #chatList, #content #onlineListContainer, #content #settingsContainer { bottom: 35px; top: 45px; }
	#content #logoutChannelContainer { display: none; }
}

That should help.

Frug

unread,
Jan 14, 2014, 3:05:24 PM1/14/14
to ajax...@googlegroups.com
Oh I forgot. In order for the above code to work you also need to do the following:


Inside lib/template/loggedIn.html add this right after the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Then you have to use all the css I provided earlier at the end of global.css

This will hide things for phone users and make the screen save a lot of space by removing padding.

StephenB

unread,
Jan 19, 2014, 9:05:23 PM1/19/14
to
Very nice! I'm using this now with a few mods, the primary one being a bit of JS to hide the online users list if the browser width is less than 480px:

<script type="text/javascript">
// <![CDATA[
if (window.innerWidth < 480)
{
toggleContainer('onlineListContainer');
}
// ]]>
</script>

And it appears that that code only works if it's placed after the last </div> in this code:

<div id="onlineListContainer">
<h3>[LANG]onlineUsers[/LANG]</h3>
<div id="onlineList"></div>

</div>
Reply all
Reply to author
Forward
0 new messages