[DEV] STG-Mobile Device Browser Style

[Sniper_E]

MOD Title: STG-Mobile Style
MOD Author: Sniper_E
MOD Description: Full page style for mobile device users.
Have your mobile device users directed to your mobile style for easy mobile access.

Hey guys and girls!

Any Mobile Device Users out there?
Let's go » » » » » » » STG-Mobile
Connect mobile @ http://startrekguide.com

You can also watch this style in it's development from your desktop.
STG-Mobile Demo: index.php?style=9

We are putting together a style that will be viewable on any mobile device for the forums.
Do we have anyone out there that has a mobile device that could help us out with this?
I have started on this style's theme and layout and need anyone/everyone to look at it and fine tune it.

Can't wait to hear from you.... Thanks!

- - - - - - - - - - - - - - - - - - - - - -

Here is the mobile browser detection script used for this mobile style.

Im happy for anyone to have the script.

Open ./include/session.php

FIND [ Line 1318 ]

Code: Select all

* Setup basic user-specific items (style, language, ...)
*/
function setup($lang_set = false, $style = false)
{
  global $db, $template, $config, $auth, $phpEx, $phpbb_root_path, $cache;

AFTER ADD

Code: Select all

  // begin mobile browser detection mod - by sithnar
  $user_browser = strtolower($this->browser);
  $this->data['is_mobile'] = false;
          $browsers_array = array('android', 'avantgo', 'blackberry', 'blazer', 'compal', 'elaine', 'fennec', 'hiptop', 'ip(hone|od)', 'iris', 'kindle', 'lge', 'maemo', 'midp', 'mmp', 'mobile', 'o2', 'opera m(ob|in)i', 'palm( os)?', 'p(ixi|re)\/', 'plucker', 'pocket', 'psp', 'smartphone', 'treo', 'up\.(browser|link)', 'vodafone', 'wap', 'windows ce; (iemobile|ppc)', 'xiino/i','240x320', '320x240', 'iemobile', 'minimobile', 'mobile',  'pda', 'nokia', 'phone', 'pocket', 'psp',  'sony', 'samsung', 'epoc', 'nitro', 'j2me', 'midp', 'cldc', 'netfront', 'mot', 'up.browser', 'audiovox', 'ericsson', 'panasonic', 'philips', 'sanyo', 'sharp', 'android', 'portalmmm', 'blazer', 'avantgo', 'danger', 'series60', 'palmsource', 'pocketpc', 'smartphone', 'rover', 'ipaq', 'au-mic', 'alcatel', 'ericy', 'up.link', 'wap1.', 'wap2.', 'symbian', 't-shark', 'wireless', 'webOS', 'Pre/', 'Android');
  foreach ($browsers_array as $ua_match)
  {
   if (strpos($user_browser, $ua_match) !== false)
   {
    $style = 3;
    $this->data['is_mobile'] = true;
    break;
   }
  }
  // end mobile browser detection mod

Change the "$style = 3;" to whatever style# your mobile style is installed as.

Open ./posting.php

FIND [ Line 670 ]

Code: Select all

// Parse Attachments - before checksum is calculated
$message_parser->parse_attachments('fileupload', $mode, $forum_id, $submit, $preview, $refresh);

AFTER ADD

Code: Select all

// begin mobile browser detection mod - by sithnar
if ($user->data['is_mobile'] && $mode != 'edit' && !$preview && !$refresh)
{
  $message_parser->message .= "\n\n[size=80][b][i][ Post made via Mobile Device ][/i][/b][/size] [img]http://yoursite.com/phpBB/images/mobile.png[/img]";
}
// end mobile browser detection mod

Change the "http://yoursite.com/phpBB/images/mobile.png" image url to your mobile image url address.

Close and SAVE all files.

You can copy this image I created and use it if you like. or customize one of your own to use with your custom style.

- - - - - - - - - - - - - - - - - - - - - -

This script will resize the large images in your page.

I'm solved the problem with too large images in posts!
This is image resizer, and on my Nokia N95 works perfectly.
Images are reduced only in the STG-Mobile Style, desktop version style is unchanged.

Try the following:

*Before adding this code to your forum, you should back up overall_header.html file from template folder!

Open .../template/overall_header.html

FIND:

Code: Select all

// ]]>
</script>

BEFORE ADD:

Code: Select all

<!-- IF SCRIPT_NAME == "viewtopic" -->
    window.onload = resizeimg;
    function resizeimg()
    {
       if (document.getElementsByTagName)
       {
          for (i=0; i<document.getElementsByTagName('img').length; i++)
          {
             im = document.getElementsByTagName('img')[i];
             if (im.width > 225)
             {
                im.style.width = '225px';
             }
          }
       }
    }
<!-- ENDIF -->

Save & update...

- - - - - - - - - - - - - - - - - - - - - -

If you are adding iphone and ipod to your array list, use this....

I'm assuming you are using an iphone or iPod. If that is the case, add the following two meta tags to the header section of overall_header.html.

Code: Select all

<meta name="viewport" content="width=320">
<meta name="apple-mobile-web-app-capable" content="yes" />

I worked on a web app for the iphone for my company a while back. The text issue will be solved by the first meta tag. The 2nd one can temporarily mask the url bar, making the web page look like a real iPhone app, if you save launch it from your home page, rather than the browser.

- - - - - - - - - - - - - - - - - - - - - -

To be able to go to index.php?style=# you need a small edit in your include/session.php file.

FIND (line 1538)

Code: Select all

  if (!empty($_GET['style']) && $auth->acl_get('a_styles'))

REPLACE WITH

Code: Select all

  // Setup for ?style=# to work for style viewing.
  // if (!empty($_GET['style']) && $auth->acl_get('a_styles'))
  if (!empty($_GET['style']))

- - - - - - - - - - - - - - - - - - - - - -

Adding QUICK REPLY

Is there a way to add the quick reply open box to mobile version?

Open stg_mobile/template/viewtopic_body.html

FIND

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->

BEFORE ADD

Code: Select all

<!-- IF S_QUICK_REPLY -->
   <!-- INCLUDE quickreply_editor.html -->
<!-- ENDIF -->

Then save this as styles/stg_mobile/template/quickreply_editor.html

Code: Select all

<form method="post" action="{U_QR_ACTION}">

<hr />
   <table cellspacing="0">
      <tr>
         <th align="center">{L_QUICKREPLY}</th>
      </tr>
   </table>
<hr />
   <table cellspacing="0">
      <tr>
         <td class="row1" align="center"><b class="genmed">{L_SUBJECT}</b><br />
         <input class="post" style="width:98%" type="text" name="subject" size="45" maxlength="64" tabindex="2" value="{SUBJECT}" /></td>
      </tr>
   </table>
<hr />
   <table cellspacing="0">
      <tr>
         <td class="row2" align="center"><b class="genmed">{L_MESSAGE}</b><br />
         <textarea name="message" rows="7" cols="76" tabindex="3"  style="width:98%"></textarea> </td>
      </tr>
   </table>
<hr />
   <table cellspacing="0">
      <tr>
         <td class="cat" align="center">
            <input class="btnmain" type="submit" accesskey="s" tabindex="6" name="post" value="{L_SUBMIT}" />

            {S_FORM_TOKEN}
            {QR_HIDDEN_FIELDS}
         </td>
      </tr>
   </table>
   
</form>
<hr />
<br clear="all" />

- - - - - - - - - - - - - - - - - - - - - -

Here is the STG-Mobile Style in progress.
You can use this style for your testing and get the updated version when it's released.

Over 1,500 downloads plus.... Updated March 18, 2010, 2:22 pm

[blackbeltboy47]

Sure, I'd be willing to look at it.
What's the URL?

[belphegor]

Yep. i have htc tytn ii.
i will be glad to check style.

[Sniper_E]

Thank you blackbeltboy47 and belphegor!

I have PMed both of you the login info.
The templates are done in the index and in the viewforum pages, I'm working on the viewtopic page now.

If you would, see if what I have going so far fits in the view of your phone.
Any comments on what you think could be changed to give you the best view possible are welcomed.

Thanks a million for helping out!

[belphegor]

Hi Sniper_E.
I surf with htc tytn ii IE, and the style look very messy.
I have some capture images if you allow me to post, i will.

now i download opera and see if there is any change,
and if you what me to download specific browser tell me.

Regards,
uzi.

[Sniper_E]

I am viewing it on my iPod touch and when I turn it sideways, it is easy to read.
However, when I am looking at it in normal view, its kind of hard to read.
I also clicked on a few links, such as ucp, there was no way to get back to the index.
It definitely looks pretty good though.

Thanks for that report blackbelt!
Sideways would be the best way to view a site with your iPod anyways. We'll build it for that view.

Yea, the index page and the viewforum page are the only 2 pages I have setup.

I put the bottom section of the overall header in the index_body so all that wouldn't show everywhere.
I had to add the breadcrumb in the top of the viewforum and viewtopic pages to compensate for that.
When I get to the posting, ucp and mcp pages I will add the breadcrumb in the top of those pages also.

You should have been able to navigate back to the index from the breadcrumb in the bottom of the ucp page.
But i know exactly what you're talking about. The breadcrumbs will be added to the top of all pages.

I have the layout set in the viewtopic page. The poll structure is now completed.
I'll be throwing together the message section next.... then maybe some smaller buttons.

Thanks again for looking! We'll get this thing trimmed down and make it look real nice....

[Sniper_E]

Hi Sniper_E.
I surf with htc tytn ii IE, and the style look very messy.
I have some capture images if you allow me to post, i will.

now i download opera and see if there is any change,
and if you what me to download specific browser tell me.

Regards,
uzi.

Yes belphegor, I would love to see your screen shot images.
I didn't know you could do that with your phone. Please post them.

You surf with IE? Oh, that IE is a headache that follows me everywhere.
I'd say get Firefox if you're asking me. Opera is a fine browser also. Anything but IE.
But you use whatever browser you like.... as long as it's not IE. j/k

Thanks for the report Man! I'm looking forward to seeing your images.

[belphegor]

Yep. i know, IE is poor browser.. but allot of users use this browser
and you need to think about this.

OK, images in HTC IE:
http://img442.imageshack.us/img442/419/85008960yi3.jpg
http://img183.imageshack.us/img183/2732/24151009pt6.jpg
http://img352.imageshack.us/img352/9986/96158391nw4.jpg
http://img90.imageshack.us/img90/5827/33175380rk8.jpg
http://img505.imageshack.us/img505/4687/11577809nx6.jpg

I download opera and i search in the web for more browsers and i will updated.

Regards,
uzi.

[Sniper_E]

OK belphegor, those are images of the SniperBlue style.
It's the default style of my test site. That style is not made for viewing with a mobile device.

You have to login with the username and password I PMed you.
After logged in you will see the new style for a mobile device.
Then look at the index page and the viewforum pages.
Those are the only pages I have edited so far.

I have started on the viewtopic page but I haven't done the message part of it yet.
But the polls look good. See what you think of those pages.

And yes, I have to deal with the layout in IE also.
I bet if you look at it again in IE after you log in, the view will be much better.

You guys Rock!

[belphegor]

aha... Now i understand.
OK, i log in and it's look very nice! great work! i love it!!

here some images with netfront browser (WOW it's very good browser,
and i found it thanks to you )





Now i will try to log in with IE and post updates, in the first time i try to log in, but
the style was so messy and unsuccessful. but i will try again.

sorry about my English, i know.. i kill the lang..