[DEV] phpBBmobile Device Browser Style

[Sniper_E]

I would think that you would have to leave the iPad or iPhone in the includes/mods/mobile_device_detect.php script for it to post the text in the viewtopic.

Then what you would need is a way to keep it from defaulting to your mobile style.
In the includes/session.php, something like:

Code: Select all

      // phpBB_mobile_detect - Mobile Stlye Redirect MOD
         $this->data['is_mobile'] = false;
         include_once($phpbb_root_path . 'includes/mods/mobile_device_detect.' . $phpEx);
         $this->data['is_mobile'] = mobile_device_detect();

         if ($this->data['is_mobile && $status = iPad'] == false)
            if ($this->data['is_mobile'] == true)
            {
               $style = 3;
               $this->data['is_mobile'] = true;
            }
      // phpBB_mobile_detect End

This code above is not legit, just an example. I'm sure it's not valid coding for this.
Maybe there could be some code added to this for the iPad to BYPASS the style 3 redirect.

[mikesus]

I would think that you would have to leave the iPad or iPhone in the includes/mods/mobile_device_detect.php script for it to post the text in the viewtopic.

Then what you would need is a way to keep it from defaulting to your mobile style.
In the includes/session.php, something like:

Code: Select all

      // phpBB_mobile_detect - Mobile Stlye Redirect MOD
         $this->data['is_mobile'] = false;
         include_once($phpbb_root_path . 'includes/mods/mobile_device_detect.' . $phpEx);
         $this->data['is_mobile'] = mobile_device_detect();

         if ($this->data['is_mobile && $status = iPad'] == false)
            if ($this->data['is_mobile'] == true)
            {
               $style = 3;
               $this->data['is_mobile'] = true;
            }
      // phpBB_mobile_detect End

This code above is not legit, just an example. I'm sure it's not valid coding for this.
Maybe there could be some code added to this for the iPad to BYPASS the style 3 redirect.

Was thinking a more holistic approach...

IOW if someone CHOSE the template, assume that they are on a mobile device and tag as such. Really would need a way to check the template in use and if its mobile have the mobile detect script detect it.

[Sniper_E]

Just put them in the array and let the mobile detect scripts send them to your mobile style.
They can click ?style=1 from there and the text will post in the viewtopic. Problem solved!

[microfud]

Hey Sniper,

Long-time no post (by me, that is). I've made a couple of tweaks to my mobile theme and I submit them here for your consideration.

I'll post the first one here and the other(s) in a follow up post.

1) IOS has the ability to let a mobile website look and behave just as a regular app would. This is fairly well-known. But I have a (mostly) fix for a problem facing phpbb sites. But first some house cleaning

If you include the link tags and meta tags below, you can have a custom thumbnail and splash screen too. The image size for the icon should be 114x114 pixels. The resolution for the splashscreen (high resolution version) should be 640x960 pixels.

Code: Select all

<link rel="apple-touch-icon" href="img/icon.png"/>
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

After this is set up, you just have to click the center button at the bottom of Mobile safari (like you are going to bookmark the site). Instead of selecting bookmark, click "Add to Home Screen." This will add the icon to your home screen and remove the Safari Chrome (the url bar at the top and the status bar at the bottom of the page.) This gives you a lot more viewable screen real estate. But there is still one big problem.

If you click on any links from the page, it leaves the webapp and opens the new link in Mobile Safari. Which really defeats the purpose of creating the webapp in the first place.

The solution I've found requires the use of the jquery javascript library. You can add the google-hosted version of the library to your site by adding the following line in the head section of overall_header.html file.

Code: Select all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

(Alternately, you can download the library and host it on your own server, if you prefer)

Next, below that line of code, you'll want to add this:

Code: Select all

<!-- code below keeps links from leaving iOS webapp -->
<script type="text/javascript">
var weblinks;if(!weblinks){weblinks=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a.length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}weblinks.init=function(){fullscreen();hideURLbar()};weblinks.init()}}
</script>
<!-- code above keeps links from leaving iOS webapp -->

Essentially what this does is it rewrites standard hrefs that look like this:

Code: Select all

<a href="http://ibm.com">IBM</a>

So that the links target the same window and have the behavior as if they were written like this:

Code: Select all

<a href="javascript:window.location.href='http://ibm.com'">IBM</a>

This code, by the way, is sort of like finding the Holy Grail for iOS web app developers. There are lots and lots of folks complaining about this. But I've found few places that had any real solution. So I would expect you'll get a lot of traffic even from folks not developing for phpbb.

Now this is great and my site now looks and acts just like a real iOS app, with the exception of one phpbb-specific problem that I'm still trying to solve -- Pagination.

The Pagination links (specifically, the numbers) are generated in a different fashion and still take users out of the web app. This is the section in the pagination.html template that generates those links (the other links can be manually modified):

Code: Select all

{PAGINATION}

What I'm trying to achieve is something like this (pseudo-code):

Code: Select all

<a href="javascript:window.location.href='http://URL_GOES HERE'">1</a><a href="javascript:window.location.href='http://URL_GOES HERE'">2</a>

, etc

Or, alternately,

Code: Select all

<a href="http://ibm.com" target="_self">1</a><a href="http://ibm.com" target="_self">2</a>

I'd appreciate if someone could point me in the right direction on how to fix these links. This solution is now 99 percent of the way complete.

If you do create an iOS webapp, one issue you'll need to address is how users can navigate back and forth on your site.

You can add back buttons to your site by adding the following bit of code

First go to viewforum_body. Find this line:

Code: Select all

<td colspan="2">
      <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->

Just above that add the following code:

Code: Select all

<tr>
<td colspan="2">
<input  class="button" type="button" value="Back" onclick="history.back(-1)">
</td>
</tr>

Next, add the same code just below the following lines:

Code: Select all

         <a href="{U_POST_NEW_TOPIC}"><strong>{L_POST_NEW_TOPIC}</strong></a>
                 </td>
                 </tr>

In viewtopic_body.html

Find the following line:

Code: Select all

<td align="{S_CONTENT_FLOW_BEGIN}" class="gensmall">

Just above that, add this code:

Code: Select all

   
<tr>
<td colspan="2"><input  class="button" type="button" value="Back" onclick="history.back(-1)"></td>
</tr>


Next, find this:

Code: Select all

<tr>
      <!-- IF S_DISPLAY_POST_INFO -->
      <td align="{S_CONTENT_FLOW_BEGIN}">

You'll want to add the same code just above those lines.

Finally, you can style that back button by adding the following code to your mobile theme:

Code: Select all

/* mobile button style*/
.button {
font-family: Helvetica ;
font-weight: bold ;
padding: 15px;
border: 1px solid black ;
-moz-border-radius: 8px ;
-webkit-border-radius: 8px ;
margin-top: 10px ;
margin-bottom: 10px ;
background-color: white ;
}


Other than the pagination issue, it's great being able to view the mobile site as if it is a real web app. These changes don't harm other mobile browsers, (if their browser doesn't support javascript, the urls are not rewritten. No harm, no foul) so there is no problem implementing these solutions on your mobile site. But they add a nice touch (pun intended) to the iOS user experience.

[edit: Now that I think about it. An improved version of the script above would only rewrite the urls that contained your site's main domain. That way, users posting links to other sites would see those links leave the mobile app. But all internal links would remain within the app. (sort of what primelinks does for a standard phpbb site. but this would be specific to a webapp.]

[microfud]

The following javascript code eliminates unwanted alerts and link borders from webkit browsers (think Android and iOS). Just place in the head section of overall_header.html.

Code: Select all

<!-- code below eliminates unwanted alerts when users press links -->
<style type="text/css">
<!—-
    * {
        -webkit-touch-callout: none;
    }
-->
</style>

<!-- code below eliminates link borders -->
<style type="text/css">
<!—-
    * {
       -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
-->
</style>

[microfud]

Not all your iOS users will know they can create a webapp by adding an icon to their iOS homescreens. For those folks, the following bit of jquery code will (After the page fully loads) cause the page to automatically scroll up to hide the top chrome (url bar, etc) from view.

First, if you didn't already add the jquery library to the header of your site (from my previous tip) do so now.

Just add this line to the head section of overall_header.html:

Code: Select all

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Next, go to overall_footer.html and below the closing body tag

Code: Select all

</body>

Add the following bit of jquery code:

Code: Select all


<script>
/mobile/i.test(navigator.userAgent) && !window.location.hash && setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);
</script>

[edit: This code only works if your content exceeds the height of the display area. This will be the case for most phpbb installations]

[microfud]

One of my biggest beefs about posting (and especially editing) posts via the mobile style is having to try to find a way to move around within the textarea (posting box) of the forum. It's really not user friendly at all.

The following mod will dynamically enlarge the textarea of webform allowing users to see and move about their entire post when writing or editing their posts. If the browser has no javascript support, no harm. The default behavior remains the same for those folks.

The example I'm using here is from quickreply_editor.html. But it applies to any textarea or text box you might need to modify on phpbb (say in the posting_body.html template)

First find this line:

Code: Select all

<textarea name="message" rows="7" cols="76" tabindex="3"  style="width:98%"></textarea> </td>

You'll want to change that to this (note the change is only the inline addition of an ID to the code ( id="txtarea"):

Code: Select all

<textarea name="message" id="txtarea" rows="7" cols="76" tabindex="3"  style="width:98%"></textarea> </td>

Next, in overall_header.html, you'll simply add the following code to the head section of the page:

Code: Select all

<script type="text/javascript">
      document.getElementById('txtarea').addEventListener('keyup', function () {
         this.style.height = 0; // This causes the box to get smaller when deleting text
         this.style.height = this.scrollHeight + 'px';
      }, false);
      </script>

This works great and really makes posting and editing posts a lot easier.

[Sniper_E]

Awesome! I have noticed the textarea being too small when posting or editing a post but haven't got around to fixing that.
I'll definitely check out all of these edits you've posted. Nice to have a knowledgeable coder for mobile browsers around.

Thanks for all the input microfud!

[microfud]

No Problem, Sniper. In glancing at my code, I think I may have put the back button within another tr tag (I did it from memory, so take an extra close look at that bit). I love the mobile style and am happy to help you with this and give back to the community.

[microfud]

Now this is great and my site now looks and acts just like a real iOS app, with the exception of one phpbb-specific problem that I'm still trying to solve -- Pagination.

The Pagination links (specifically, the numbers) are generated in a different fashion and still take users out of the web app. This is the section in the pagination.html template that generates those links (the other links can be manually modified):

Code: Select all

{PAGINATION}

What I'm trying to achieve is something like this (pseudo-code):

Code: Select all

<a href="javascript:window.location.href='http://URL_GOES HERE'">1</a><a href="javascript:window.location.href='http://URL_GOES HERE'">2</a>

, etc

Or, alternately,

Code: Select all

<a href="http://ibm.com" target="_self">1</a><a href="http://ibm.com" target="_self">2</a>

I'd appreciate if someone could point me in the right direction on how to fix these links. This solution is now 99 percent of the way complete.

Ok. I think I've found the solution to the pagination links. Within the functions.php template, there are six a hrefs within the generation_pagination function. We need to modify those links as follows:
find this:

Code: Select all

$page_string = ($on_page == 1) ? '<strong>1</strong>' : '<a href="' . $base_url . '">1</a>';

replace with this:

Code: Select all

$page_string = ($on_page == 1) ? '<strong>1</strong>' : '<a href="javascript:window.location.href=\'' . $base_url . '\'">1</a>';

find this

Code: Select all

$page_string .= ($i == $on_page) ? '<strong>' . $i . '</strong>' : '<a href="' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '">' . $i . '</a>';

replace with this

Code: Select all

$page_string .= ($i == $on_page) ? '<strong>' . $i . '</strong>' : '<a href="javascript:window.location.href=\'' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '\'">' . $i . '</a>';

find this:

Code: Select all

$page_string .= ($i == $on_page) ? '<strong>' . $i . '</strong>' : '<a href="' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '">' . $i . '</a>';

replace with this:

Code: Select all

$page_string .= ($i == $on_page) ? '<strong>' . $i . '</strong>' : '<a href="javascript:window.location.href=\'' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '\'">' . $i . '</a>';

find this:

Code: Select all

$page_string .= ($on_page == $total_pages) ? '<strong>' . $total_pages . '</strong>' : '<a href="' . $base_url . "{$url_delim}start=" . (($total_pages - 1) * $per_page) . '">' . $total_pages . '</a>';

replace with this:

Code: Select all

$page_string .= ($on_page == $total_pages) ? '<strong>' . $total_pages . '</strong>' : '<a href="javascript:window.location.href=\'' . $base_url . "{$url_delim}start=" . (($total_pages - 1) * $per_page) . '\'">' . $total_pages . '</a>';

find this:

Code: Select all

$page_string = '<a href="' . $base_url . "{$url_delim}start=" . (($on_page - 2) * $per_page) . '">' . $user->lang['PREVIOUS'] . '</a>&nbsp;&nbsp;' . $page_string;

replace with this:

Code: Select all

$page_string = '<a href="javascript:window.location.href=\'' . $base_url . "{$url_delim}start=" . (($on_page - 2) * $per_page) . '\'">' . $user->lang['PREVIOUS'] . '</a>&nbsp;&nbsp;' . $page_string;


find this:

Code: Select all

$page_string .= '&nbsp;&nbsp;<a href="' . $base_url . "{$url_delim}start=" . ($on_page * $per_page) . '">' . $user->lang['NEXT'] . '</a>';

replace with this:

Code: Select all

$page_string .= '&nbsp;&nbsp;<a href="javascript:window.location.href=\'' . $base_url . "{$url_delim}start=" . ($on_page * $per_page) . '\'">' . $user->lang['NEXT'] . '</a>';

finally, in pagination.html

find this:

Code: Select all

<a href="{PREVIOUS_PAGE}">{L_PREVIOUS}</a>

replace with this:

Code: Select all

<a href="javascript:window.location.href='{PREVIOUS_PAGE}'">{L_PREVIOUS}</a>

find this:

Code: Select all

<a href="{NEXT_PAGE}">{L_NEXT}</a>

replace with this:

Code: Select all

<a href="javascript:window.location.href='{NEXT_PAGE}'">{L_NEXT}</a>

I'm testing this on my staging site at the moment. I gave it a quick run through and don't see any errors. But it would be great to have someone else double check the work.