[DEV] phpBBmobile Device Browser Style

[Hippie459MN]

@ Hippie, all of the addon codes that were on the first post have been incorporated into the style.
That image resize code is in the style download now, in the overall_header.html template.

Sounds good. No need for it then. I will have to post up some pics of what my mobile site is looking like now with a few code changes and additions to it. Still my favorite and best looking mobile style.

[Sniper_E]

Here is a little change I was playing with in the forumlist_body.html layout...

Code: Select all

<table cellspacing="0">
   <tr class="row1">
      <td>
         <div style="float: left;width: 50%;min-width: 300px;">
         <!-- IF forumrow.FORUM_DESC -->
         <p class="topicdetails">{forumrow.FORUM_DESC}</p>
         <!-- ENDIF -->
         <p class="topicdetails">{forumrow.TOPICS} {L_TOPICS} with {forumrow.POSTS} {L_POSTS}</p>
         <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS -->
         <p class="topicdetails"><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</p>
         <!-- ENDIF -->
         </div>
         <div style="float: left;width: 50%;min-width: 300px;">
         <!-- IF forumrow.LAST_POST_TIME -->
         <p class="topicdetails"><a class="topictitle" href="{forumrow.U_LAST_POST}" title="{L_VIEW_LATEST_POST}"> {forumrow.LAST_POST_SUBJECT} {LAST_POST_IMG}</a></p>
         <p class="topicdetails">{forumrow.LAST_POST_TIME}</p>
         <p class="topicauthor">{L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}</p>
         <!-- ELSE -->
         <p class="topicdetails">{L_NO_POSTS}</p>
         <!-- ENDIF -->
         </div>
      </td>
   </tr>
</table>

With this, if you hold your phone sideways for the wider view it saves space. Try it out...

Normal View

Wide View

And for the viewforum_body.html layout...

Code: Select all

<table cellspacing="0">
   <tr class="row1">
      <td>
      <div style="float: left;width: 50%;min-width: 300px;">
         <p class="topicauthor">{L_AUTHOR}: {topicrow.TOPIC_AUTHOR_FULL} <br /> {topicrow.VIEWS} {L_VIEWS} with {topicrow.REPLIES} {L_REPLIES}</p>
         <!-- IF topicrow.PAGINATION -->
         <p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {topicrow.PAGINATION} ] </p>
         <!-- ENDIF -->
      </div>
      <div style="float: left;width: 50%;min-width: 300px;">
         <p class="topicdetails"><a href="{topicrow.U_LAST_POST}">{L_LAST_POST} {LAST_POST_IMG}</a></p>
         <p class="topicdetails">{topicrow.LAST_POST_TIME}</p>
         <p class="topicdetails">{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}</p>
         </div>
      </td>
   </tr>
</table>

Same space saver in the wide view state.

And for the viewtopic_body.html template...

Code: Select all

<table cellspacing="0">
   <tr class="row1">
      <td class="profile"<!-- IF postrow.S_LAST_ROW --> id="lastpost"<!-- ENDIF -->>
         <div style="float: left;width: 50%;min-width: 300px;"><!-- IF postrow.S_FIRST_UNREAD --><a name="unread"></a><!-- ENDIF --><a name="p{postrow.POST_ID}"></a><!-- IF postrow.ONLINE_IMG -->{postrow.ONLINE_IMG}<!-- ENDIF --><strong class="postauthor" style="font-size: 1.2em<!-- IF postrow.POST_AUTHOR_COLOUR -->;color: {postrow.POST_AUTHOR_COLOUR}<!-- ENDIF -->"> {postrow.POST_AUTHOR}</strong><br />
         <!-- IF postrow.RANK_TITLE --><span><strong class="gensmall"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="color: {postrow.POST_AUTHOR_COLOUR}"<!-- ENDIF -->>{postrow.RANK_TITLE}</strong></span><br /><!-- ENDIF -->
         <!-- IF postrow.RANK_IMG -->{postrow.RANK_IMG}<br /><!-- ENDIF -->
         <!-- IF postrow.U_PROFILE --><a href="{postrow.U_PROFILE}">{PROFILE_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_PM --><a href="{postrow.U_PM}">{PM_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_EMAIL --><a href="{postrow.U_EMAIL}">{EMAIL_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_WWW --><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}">{WWW_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_MSN --><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}">{MSNM_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_ICQ --><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}">{ICQ_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_YIM --><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}">{YIM_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_AIM --><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}">{AIM_IMG}</a> &nbsp; <!-- ENDIF -->
         <!-- IF postrow.U_JABBER --><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}">{JABBER_IMG}</a><!-- ENDIF -->
</div>
      <div style="float: left;width: 50%;min-width: 300px;">
      <span class="postdetails">
         <!-- IF postrow.POSTER_JOINED --><b>{L_JOINED}:</b> {postrow.POSTER_JOINED}<br /><!-- ENDIF -->
         <!-- IF postrow.POSTER_POSTS != '' --><b>{L_POSTS}:</b> {postrow.POSTER_POSTS}<br /><!-- ENDIF -->
         <!-- IF postrow.POSTER_FROM --><b>{L_LOCATION}:</b> {postrow.POSTER_FROM}<br /><!-- ENDIF -->
            <!-- IF postrow.S_PROFILE_FIELD1 -->
            <!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
            <b>{postrow.PROFILE_FIELD1_NAME}:</b> {postrow.PROFILE_FIELD1_VALUE}<br />
         <!-- ENDIF -->
            <!-- BEGIN custom_fields -->
            <b>{postrow.custom_fields.PROFILE_FIELD_NAME}:</b> {postrow.custom_fields.PROFILE_FIELD_VALUE}<br />
         <!-- END custom_fields -->
      </span>
      </div>
      </td>
   </tr>

See what you think. I've been playing around with a few other nice layout tweaks also.

I'd love to see your code changes and additions to it. I bet it looks awesome!
Oh... I do see it. style#16 on your site. Nice! Let me PM you something...

ACP View mobile style

[Studsir]

Sniper:
Thank you very very much.
For more than a year and watching your progress here to see what will be the final release . But some of my members asked about special edition of my site for mobiles.

So I installed it and I have some issues.

first of all :

posting_body.html has double inputs for signature.

Code: Select all

<!-- IF S_SIG_ALLOWED -->
   <tr class="row1">
      <td><input type="checkbox" class="radio" name="attach_sig"{S_SIGNATURE_CHECKED} /></td>
      <td class="gen">{L_ATTACH_SIG}</td>
   </tr>
<!-- ENDIF -->

one in the first cell and the other below.

Second:
include/session.php
I have 'board3 Portal 2.0.0' version 2.0.0
which replaces this line in the session.php
this line

Code: Select all

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

to this:

Code: Select all

      if (!empty($_GET['style']) && !defined('ADMIN_START') && $this->data['user_type'] != USER_IGNORE)

and the mobile style detect changes the line to this

Code: Select all

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

after installing the mobile style detect the portal did not affect , but I am afraid there are something happened that I do not notice it yet.

Also about the switch to the standard style:
I have subsilver installed and active. style=2
prosilver installed and not active. style=3
and the new one installed and not active. style=4

and all my visitors and members forced them to use only the subsilver.
now when I installed the mobile style and the detect.
everything is ok except that any one can see the other styles even the desktop browsers.
if they click:
http://www.domain.com/forum/index.php?style=2 ............ will see the subsilver
http://www.domain.com/forum/index.php?style=3 .............will se the prosilver
http://www.domain.com/forum/index.php?style=4 .............will se the mobile

I tried through my PC and abled to see the three styles.

why this happened?
there is a mod for mobiles < 'phpBB Mobile' > for the author Callum95 .
he puts a link to disable the mobile style to switch to the standard style , and this way the auth of the viewing the style will not change and the visitors will always see the default style also the mobile. and if we want to see the mobile style the user should delete the cockies to detect the mobile once again.

I suggest you do something to disable enable the mobile style for the mobile users without changing this line:

Code: Select all

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

Thank you very much
I

[Hippie459MN]

Second:
include/session.php
I have 'board3 Portal 2.0.0' version 2.0.0
which replaces this line in the session.php
this line

Code: Select all

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

to this:

Code: Select all

      if (!empty($_GET['style']) && !defined('ADMIN_START') && $this->data['user_type'] != USER_IGNORE)

and the mobile style detect changes the line to this

Code: Select all

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

after installing the mobile style detect the portal did not affect , but I am afraid there are something happened that I do not notice it yet.



I suggest you do something to disable enable the mobile style for the mobile users without changing this line:

Code: Select all

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

Thank you very much
I

I would have to agree... I am running into this right now and am having issues with the portal setting in the ACP not working correctly and I do not know if it is related to this or not but I am about to find out. I report back.

EDIT: I did change the edit to what Board3 Portal calls for with no change so I set it back to the edits for the mobile detect script. But with that I did fix my portal issues and it had nothing to do with these edits.

[Hippie459MN]

I just had 2 people tell me the could not register from the mobile site as they don't get a confirmation code to enter. All I have set up on my desktop site to reg is the question/answer thing and thats it so people dont seem to be able to reg from the mobile site. There is a screen shot of what I am talking about...

You know off hand what it would take to get the question/answer thing to show up on the mobile site and not this?

Here is a screen shot of what I am talking about on the desktop site...

The website is http://www.minnesotamudboggers.com if that helps at all.

[Studsir]

EDIT: I did change the edit to what Board3 Portal calls for with no change so I set it back to the edits for the mobile detect script. But with that I did fix my portal issues and it had nothing to do with these edits.

Do you mean that the changes in that line will not affect the portal?

Sniper you did not answer me.
Your site whatever I put the number of the style it will be the same default style
index.php?style=number

How you did this?

I do not let my ordinary non mobile visitors to use the style number.
by the way if some one noticed that and begin to add numbers he will reach a number of style that does not found and will see a general error " Could not get style data "
also I do not want them to use other styles like prosilver and mobile, cause the only style that should be used is subsilver and all my mods are in it.
If they noticed for example prosilver errors will see as they browse through it.

and the mobile style I did some changes so as to let it works fine for example I have prim_birthday mod that put a cell required through registeration. before I add it if some one wants to register and click agree it will not redirect him to the register page and it will load again the agreement., but when I add the prim birthday to the agreement and usp register everything went ok.
Also for the main page that is portal, prosilver has no portal.

so for such things I do not any non mbile user to use other than the default style.

Thank you

[Sniper_E]

Sure Stud... I looked at the phpBB Mobile style and the edits he uses for his mobile detect script.
He does not edit the
if (!empty($_GET['style']) && $auth->acl_get('a_styles') && !defined('ADMIN_START')) line.

He has codes that will add ?nomobile=1 to go to the full style... and ?nomobile=0 to go back to the mobile style.
You could just use his mobile detect edits. http://www.artodia.com/mod-installation ... _prosilver

But his edits do not have the [ Post made via Android ] addition in the posting.
And I like the mobile detect script we use because it's easily expandable to list all of the phones.
If we could use our script with the posting addition and add his codes for the ?nomobile=1 we would be rocking.

And Hippie... I'm not sure why the registration page want work. I thought it did work.
If that confirmation section is an addition, you would have to use the subsilver2 edits for that in the mobile style.
On my style the confirmation code is in an image showing in my style. This is the default GD Image showing.
Your snapshot shows that that GD Image is not coming up in your page.

Your other image says to type the word "boggers"
Is that a different confirmation thing you have installed?
Is it interfering with the default one?
Do you need to add the codes for that new one you are using in your mobile style registration page?
Use the subsilver2 edits for that if so.

[Hippie459MN]

Sniper, No, that is part of the anti spam options in phpBB now (3.0.8+). Its the 'Spambot Countermeasures' as they call it. You can set it up to do a captcha code, Q&A kinda thing (What I am using) and a few other options. Its in the ACP under the general tab.

I tried looking at what part of ucp_register.html handles that in Subsilver2 but not having any luck. I found one that I thought might be it but i throws up all kinds of errors. I will try it again and post a screen shot.

EDIT: I may have figured it out... Will report back with my findings.

[Hippie459MN]

Ok, I have it fixed and working!!!! I have included the new files to added (3 new, 1 replace) to the template folder.

Included files are:
captcha_default.html (Untouched from SubSilver2. May need some editing for the mobile style)
captcha_qa.html (I have edited this to better work with the mobile style and works perfect!)
captcha_recaptcha.html (Untouched from SubSilver2. May need some editing for the mobile style)
ucp_register.html (Edited with the new edits for the above files)

Let me know if ya give it a go. I have only edited and tested the captcha_qa.html to better work with the mobile site and made the correct edits to the ucp_register.html file so they work correctly.

Here is a screen shot of it now...

This will make the registration work with the anti spambot that is now included in phpBB with these files.

Now to figure out how to make that time zone drop down narrower to fit the width of the screen. I did it once before and I cant remember off hand. Time to do some searching.

[Studsir]

the phpbbacademy has the posting addition, I saw many posts.
Then how the Admin add it while the style for non mobile users is the default.

I am not expert in phpbb, but you can add mobile users like bots.
we can creat a group of mobile users like bots according to the browsers arrays and let them see the mobile style automatically by defualt.

after that you can manage how to let them view the full version and return to the mobile version.