Suggestion: Mobile template for mchat.php?

[kateland]

Hi again,

I don't see anywhere on the board that mobile templates were discussed for mchat. We have a few people who sit on chat all day (the mini chat, not the index) and I thought it would be useful if there were a mobile optimized layout for smartphones. Has this been discussed/discarded already? Curious!

[Stoker]

I have a mchat template for the mobile theme by arty if you are interested?

[RMcGirr83]

Topic moved.

[kateland]

Stoker, I would definitely be interested. I saw some mobile themes existed on StarTrekGuide, too, but they looked a few phpBB versions old so I wasn't sure I should mess with it.

[steve]

http://www.artodia.com/phpbb-mobile/prosilver.html
http://www.phpbb.com/customise/db/style ... le-t_94546
http://www.artodia.com/demo/index.php?style=12
Should help ...

[Stoker]

This is my mchat_body.html for the artodia style:

Code: Select all

<!-- IF MCHAT_ARCHIVE_MODE or MCHAT_CUSTOM_PAGE -->
   <!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<!-- IF MCHAT_ARCHIVE_MODE -->
<!--**
*
* @package mChat
* @version $Id: mchat_body.html
* @copyright (c) 2010 Rich McGirr
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/-->
<!-- ENDIF -->
<!-- IF not MCHAT_READ_MODE -->
<div class="forums">
<p class="header gradient link"><!-- IF MCHAT_ARCHIVE_MODE -->{L_MCHAT_ARCHIVE_PAGE}<!-- ELSE -->{L_MCHAT_TITLE}<!-- ENDIF --></p>
      <div class="postbody mChatBodyFix">
<!-- ENDIF -->
   <!-- IF MCHAT_ENABLE -->
         <!-- IF not MCHAT_READ_MODE -->
         <script type="text/javascript">
         // <![CDATA[
         // Define mChat setting
         var mChatNoMessage = '{MCHAT_NOMESSAGE_MODE}';
         var mChatFile = '{MCHAT_FILE_NAME}';
         var mChatForumRoot = '{ROOT_PATH}';
         var mChatCustomPage = '{MCHAT_CUSTOM_PAGE}';
         <!-- IF not MCHAT_ARCHIVE_MODE -->
         var mChatPause = '{MCHAT_PAUSE_ON_INPUT}';
         var mChatRefresh = '{MCHAT_REFRESH_JS}';
         <!-- ELSE -->
         var mChatPause = false;
         var mChatRefresh = false;
         <!-- ENDIF -->
         <!-- IF MCHAT_USER_TIMEOUT -->
         var mChatUserTimeout = '{MCHAT_USER_TIMEOUT}';
         <!-- ELSE -->
         var mChatUserTimeout = false;
         <!-- ENDIF -->
         var mChatNoMessageInput = '{LA_MCHAT_NOMESSAGEINPUT}';
         var mChatNewMessageAlert = '{LA_MCHAT_NEW_CHAT}';
         var mChatNoMessage = '{LA_MCHAT_NOMESSAGE}';
         var mChatEditInfo = '{LA_MCHAT_EDITINFO}';
         var mChatNoAccess = '{LA_MCHAT_NOACCESS}';
         var mChatFlood = '{LA_MCHAT_FLOOD}';
         var mChatDelConfirm = '{LA_MCHAT_DELCONFIRM}';
         var mChatReset = '{LA_MCHAT_RESET_QUESTION}';
         var mChatRefreshing = '{LA_MCHAT_REFRESHING}';
         var mChatSessOut = '{LA_MCHAT_SESSION_OUT}';
         var mChatSessEnds = '{LA_MCHAT_SESSION_ENDS}';
         var mChatRefreshYes = '{MCHAT_REFRESH_YES}';
         var mChatRefreshNo = '{LA_MCHAT_REFRESH_NO}';
         var mChatMssgLngthLong = '{MCHAT_MESS_LONG}';
         <!-- IF MCHAT_MESSAGE_LNGTH -->
         var mChatMssgLngth = '{MCHAT_MESSAGE_LNGTH}';
         <!-- ELSE -->
         var mChatMssgLngth = false;
         <!-- ENDIF -->
         <!-- IF S_MCHAT_SOUND_YES -->
         var mChatSound = true;
         <!-- ELSE -->
         var mChatSound = false;
         <!-- ENDIF -->
         <!-- IF MCHAT_WHOIS -->
         var mChatWhois = true;
         var mChatWhoisRefresh = '{MCHAT_WHOIS_REFRESH}';
         <!-- ELSE -->
         var mChatWhois = false;
         var mChatWhoisRefresh = false;
         <!-- ENDIF -->
         <!-- IF MCHAT_ARCHIVE_MODE -->
         var mChatArchiveMode = true;
         <!-- ELSE -->
         var mChatArchiveMode = false;
         var form_name = 'postform';
         var text_name = 'message';
         var mChatFocusFix = true;
         <!-- ENDIF -->
         // ]]>
         </script>
         <!-- IF not MCHAT_ARCHIVE_MODE -->
         <script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/editor.js"></script>
         <div id="mChatmain">
         <!-- ENDIF -->
         <div id="mChatData">
   <!-- ENDIF -->
            <!-- INCLUDE mchat_no_avatars.html -->
      <!-- IF not MCHAT_READ_MODE -->
               <!-- IF MCHAT_NOMESSAGE_MODE --><div id="mChatNoMessage">{L_MCHAT_NOMESSAGE}</div><!-- ENDIF -->
         </div>
         <!-- IF not MCHAT_ARCHIVE_MODE -->         
         </div>
         <!-- IF MCHAT_STATIC_MESS --><span style="float:right; padding-right:4px;">{L_MCHAT_COPYRIGHT}</span><div class="mChatStatic"><strong>{L_MCHAT_ANNOUNCEMENT}:</strong> <span style="color:#990000;">{MCHAT_STATIC_MESS}</span></div><!-- ENDIF -->
         <!-- IF not (MCHAT_ARCHIVE_MODE or MCHAT_CUSTOM_PAGE) and MCHAT_WHOIS and S_MCHAT_INDEX_STATS --><div class="mChatStats" id="mChatStats"><!-- IF MCHAT_USERS_LIST --><a href="#" onclick="mChat.toggle('UserList'); return false;">{MCHAT_USERS_COUNT}</a><!-- ELSE -->{MCHAT_USERS_COUNT}<!-- ENDIF -->&nbsp;{L_MCHAT_ONLINE_EXPLAIN}<br /><span id="mChatUserList">{MCHAT_USERS_LIST}</span></div><!-- ENDIF -->         
         <form method="post" action="javascript//" onsubmit="mChat.add();" id="postform">
         <div class="mChatPanel">
            <noscript><div class="mchat_alert">{L_MCHAT_NOJAVASCRIPT}</div></noscript>
            <!-- IF MCHAT_ADD_MESSAGE -->
            <input type="hidden" name="mode" value="add" />
            <textarea  name="message" class="inputbox medium mChatText" id="mChatMessage" onkeydown="mChat.key(event);" rows="2" cols="32"></textarea><br />
            <input id="submit_button" type="button" class="button2" onclick="mChat.add();" value="{L_MCHAT_ADD}" />
            <input id="mChatClear" type="button" class="button2" onclick="mChat.clear();" value="{L_MCHAT_CLEAR_INPUT}" />
            <!-- IF MCHAT_ALLOW_SMILES and .smiley -->
            <input type="button" class="button2" onclick="mChat.toggle('Smiles');" value="{L_MCHAT_SMILES}" />
            <!-- ENDIF -->
            <!-- IF MCHAT_ALLOW_BBCODES -->
            <input type="button" class="button2" onclick="mChat.toggle('BBCodes');" value="{L_MCHAT_BBCODES}" />
            <!-- ENDIF -->
            <!-- ENDIF -->
            <!-- IF MCHAT_READ_ARCHIVE_BUTTON -->
            <input type="button" class="button2" onclick="window.location.href = '{MCHAT_ARCHIVE_URL}';" value="{L_MCHAT_ARCHIVE}" />
            <!-- ENDIF -->
            <!-- IF MCHAT_FOUNDER -->
            <input type="button" class="button2" onclick="window.location.href = '{MCHAT_CLEAN_URL}';" value="{L_MCHAT_CLEAN}" />
            <!-- ENDIF -->
            <!-- IF MCHAT_ADD_MESSAGE -->
            <!-- IF MCHAT_RULES -->
            <input type="button" class="button2" onclick="popup('{U_MCHAT_RULES}', 450, 275); return false;" value="{L_MCHAT_HELP}" />
            <!-- ENDIF -->
            <!-- IF MCHAT_ALLOW_BBCODES -->
               <!-- INCLUDE mchat_bbcodes.html -->
            <!-- ENDIF -->
            <!-- ENDIF -->
            <!-- IF MCHAT_ALLOW_SMILES and .smiley -->
            <div id="mChatSmiles" style="padding: 5px; display: none;">               
               <!-- BEGIN smiley -->
               <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
               <!-- END smiley -->
               <a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>               
            </div>
            <!-- ENDIF -->
            <div style="padding: 3px;">
               <img src="{ROOT_PATH}mchat/load.gif" alt="{L_MCHAT_LOAD}" title="{L_MCHAT_LOAD}" id="mChatLoadIMG" class="mChatImageLoad" />
               <img src="{ROOT_PATH}mchat/ok.gif" alt="{L_MCHAT_OK}" title="{L_MCHAT_OK}" id="mChatOkIMG" class="mChatImageOk" />
               <img src="{ROOT_PATH}mchat/error.gif" alt="{L_MCHAT_ERROR}" title="{L_MCHAT_ERROR}" id="mChatErrorIMG" class="mChatImageHideImg" />
               <img src="{ROOT_PATH}mchat/paused.gif" alt="{L_MCHAT_PAUSE}" title="{L_MCHAT_PAUSE}" id="mChatPauseIMG" class="mChatImageHideImg" />
               <span id="mChatRefreshText">{MCHAT_REFRESH_YES}</span><!-- IF MCHAT_USER_TIMEOUT --> &bull; <span id="mChatSessMess">&nbsp;</span><!-- ENDIF --> &bull; <label for="mChatUseSound">{L_MCHAT_USESOUND} <input type="checkbox" id="mChatUseSound" <!-- IF S_MCHAT_SOUND_YES -->checked="checked"<!-- ENDIF --> /></label>
            </div>
         </div>
         </form>
         <!-- ENDIF -->
         <div id="mChatSound" class="mChatSound"></div>
         <script type="text/javascript" src="{ROOT_PATH}mchat/mchat_ajax_mini.js"></script>
      </div>
      <!-- ENDIF -->
   <!-- ELSE -->
   <div class="mchat_alert">{L_MCHAT_ENABLE}</div>
   <!-- ENDIF -->
   <!-- IF not MCHAT_READ_MODE -->
         <!--/ ** If you remove this expect no support from me ** /-->
      </div>
</div>
</div>
   <!-- ENDIF -->
<!-- IF MCHAT_CUSTOM_PAGE and MCHAT_WHOIS -->
<h3>{L_WHO_IS_CHATTING}</h3>
   <div class="mChatStats" id="mChatStats"><!-- IF MCHAT_USERS_LIST --><a href="#" onclick="mChat.toggle('UserList'); return false;">{MCHAT_USERS_COUNT}</a><!-- ELSE -->{MCHAT_USERS_COUNT}<!-- ENDIF -->&nbsp;{L_MCHAT_ONLINE_EXPLAIN}<br /><span id="mChatUserList">{MCHAT_USERS_LIST}</span></div>
   <div class="mChatRefresh"><span id="mChatRefresh">{L_MCHAT_WHOIS_REFRESH_EXPLAIN}</span><span id="mChatRefreshN" style="display: none;">{L_MCHAT_REFRESHING}</span>
<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></div>
<!-- ENDIF -->
<!-- IF MCHAT_ARCHIVE_MODE or MCHAT_CUSTOM_PAGE -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->

Note that I am also using Rich addon for textarea. That mean that you also have to edit the mchat js if you use it.

[RMcGirr83]

Or just change this line

Code: Select all

<textarea  name="message" class="inputbox medium mChatText" id="mChatMessage" onkeydown="mChat.key(event);" rows="2" cols="32"></textarea><br />

to the default input used in the mchat_body.html file.

[Mickroz]

Stoker, your a life saver! was looking for this

[kateland]

OK I installed the iPhone style, added Stoker's mchat_body as above, and two things are happening. One, the javascript is not updating. I have to manually refresh to get the latest chats. Two, posting doesn't work but I think it's related to the first one.

I don't have the text area add on - is this the issue?

I'm guessing I missed a step? I'm using prosilver_se for my main forum so I'm always forgetting what other template files go in pro silver or the SE folder since last I read it was an inherited style

[RMcGirr83]

You are probably missing the edits to the mobile theme overall_header.html file from the mod install instructions.

[kateland]

Oh man. Thanks. That worked.

[Togbish]

This was the solution I chased down here. It works great for me, except that before now, if I pressed ENTER on my phone keyboard, it sent the message. Now, I have to click on SEND. Can this be fixed? If not, I am happy with it the way it is. Thanks.

PS. Can I make the text slightly bolder too, while we are at it? LOL

EDIT: I noticed the old messages were not leaving the screen, so after a while, it gets filled up and now I can't send any messages; ENTER or SEND. Am I doing something wrong? Must I have to purge the Chat window every so often?

[RMcGirr83]

You are probably missing the mchat.css from the overall_header.html edit of that style.

[Togbish]

You are probably missing the mchat.css from the overall_header.html edit of that style.

There are only two edits in that file and I did both, even though the edits do not seem to be about .css. They are:

Code: Select all

<!-- IF S_MCHAT_ENABLE and (S_MCHAT_ON_INDEX or U_MCHAT) -->
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery-1.5.0.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>
<!-- ENDIF -->

and

Code: Select all

            <!-- IF S_MCHAT_ENABLE and U_MCHAT --><li class="icon-bump"><a href="{U_MCHAT}#mChat" title="{L_MCHAT_TITLE}">{L_MCHAT_TITLE}</a></li><!-- ENDIF -->

I have both. But I noticed that if I refresh the page, I am able to send. So, each time I want to send a message, I have to manually refresh the page. It was not like that.

[RMcGirr83]

Sorry I meant within the styles stylesheet.css file not overall_header.html and you probably don't need this <script type="text/javascript" src="{ROOT_PATH}mchat/jquery-1.5.0.min.js"></script> as that style already loads jQuery.