Phpbb Template for Portables - DEMO UP!

[bicostp]

Just for fun I decided to hack a phpbb template to bits, and it eventually evolved into a template for things like text browsers, internet tablets, smartphones, PDAs, and portable console browsers so you can use those devices without a ton of pain-in-the-butt scrolling and zooming. It's not a really minimal hack (for WAP phones), but it's lightweight and looks decent (at least I think so ). By contrast, there's no easy way to make SubSilver in its original state fit small screens well. (It layers a ton of crap in between the posts.)

If there's enough interest it will get cleaned up to look pretty. If there's not much interest it will get to the point where it works and it will be declared finished.

Most of the stuff that's not absolutely necessary has been ripped out, such as:

• The list buttons and help text on top of the post body form field (the big one you type your message in)
  Everything to the left of the post body form (lots of wasted space)
  Signatures
  The entire avatar sidebar
  The AIM, MSN, and ICQ butons (I'll put them back in and replace their buttons with other images if there's demand for them)
  The "Jump to" drop box the the bottom
  Most of the thread information columns ("Topics" and "posts")
  Various tidbits here and there

Now since text is boring to look at, some screenshots! They're still pretty rough cut, but you get the idea. (Be warned: filler text gets pretty silly at 1:00 AM)
<a href="http://bicostp.portablesofdoom.org/proj ... s/pda1.PNG">
The main page, PDA sized.</a>

<a href="http://bicostp.portablesofdoom.org/proj ... ds.PNG">It even crunches down to DS size okay</a>

<a href="http://bicostp.portablesofdoom.org/proj ... PNG">Looks like crap at 1024x768, though.</a>

<a href="http://bicostp.portablesofdoom.org/proj ... s.PNG">And it explodes when you post a big picture.</a>
This would have to be fixed with JavaScript

<a href="http://bicostp.portablesofdoom.org/proj ... e.PNG">How profile pages render</a>
I know it looks broken. Just look at the layout.)

<a href="http://bicostp.portablesofdoom.org/proj ... d.PNG">How threads render</a>
The "New topic / post reply" buttons are taking up too much room and forcing the 'bread crumbs' ("Forumane Forum Index -> Forumtitle -> Threadtitle") text off the edge.

I'm working on some more space efficient graphics to replace bigger ones (should be done this evening).

But before I sink any more time into it, would anyone be interested in a portable device optimized template for the forums? It would be optional (leaving SubSilver, what you're looking at now, the default), and an addition to phpbb would automatically choose what template to use by reading the user agent.

What do you think?

[Adam G]

<a href="http://bicostp.portablesofdoom.org/proj ... s.PNG">And it explodes when you post a big picture.</a>
This would have to be fixed with JavaScript

Just start having people code all images?

Looks nice overall, I like it.

[bicostp]

Just start having people code all images?

Nah, just slap some scripting into the header template and it should work, no user-end work at all.

[ghosstt]

2 suggestions

1. make it so that it word wraps the text, so that there is 0 horizontal scrolling

2. make a psp version too plx!

[bicostp]

2 suggestions

1. make it so that it word wraps the text, so that there is 0 horizontal scrolling

2. make a psp version too plx!

1. It does that automatically; it's the large pictures I haven't gotten around to replacing yet that are stretching it horizontally.

2. It works better at PSP size than at PDA size. It might be possible to make the cloud of login butons automatically wrap so things with better screen resolutions like the PSP and Nokia tablets get a more desktop-like view.

<img src="http://img212.imageshack.us/img212/792/pspjc4.png">

The PM, Edit, Quote, Email, AIM, etc buttons are getting new square graphics, the same size as the IP button, so they should all fit now for those of you who use them.

[Skyone]

I love them, keep us updated!

[theelk]

I use my PSP, but I hope to ditch it soon for an eee or maybe an iPod Touch. But I do plenty of portable browsing, so this is very much appreciated.

[ghosstt]

http://bicostp.portablesofdoom.org/proj ... thread.PNG

the text is all of the screen..

[CronoTriggerfan]

Bic, you rock. I can't WAIT to test it out on my iPod Touch! Keep it up, now I'll be able to sneak on Benheck during school without massive scrolling.

CTFan

[bicostp]

http://bicostp.portablesofdoom.org/proj ... thread.PNG

the text is all of the screen..

<a href="http://img247.imageshack.us/img247/722/ ... ng">Pic</a>

The buttons and text fight each other for space, and so you get the overflow.

Well, all of the top buttons except for List fit cleanly in the post composition page, and some hacking of the drop menus gets them to fit right. (The screenshot's stretched top and bottom so the entire form is in the picture, but the width is still the same.)

<a href="http://img247.imageshack.us/img247/7443 ... g">Link</a>

Next up: The thread listing and the little square icons.

<a href="http://img525.imageshack.us/img525/2264 ... .png">Done for tonight.</a>
Fixed the horizontal scrolling on the viewtopic page, swapped the graphics, and managed to squeeze the page selection up in the top somewhere.

[johnbjuice]

Make it so that pictures in posts and people's profile pictures don't display at all. Can't be too hard. This would definitely be awesome.

- Juice

[lifeisbetterwithketchup]

Go for it! The only low-resolution device I use for web browsing is my DS, and the forums here look pretty bad on it.

[Life of Brian]

I love it! I browse the forums on my PSP all the time!

[Super Cameraman]

As for solving the posted images problem, the Brickfilms.com forums have some sort of image resizing thing. Maybe you should check that out.

I can't wait for this to be done! I have a DS and a PocketPC, and pretty much everything looks bad on them!

[bicostp]

I'm trying to adapt <a href="http://javascript.internet.com/miscella ... html">this script</a> for image resizing, but it doesn't seem to work right... I don't know a thing about Javascript. and Firefox's error console says there's no value for "whichId". It's probably designed to have labels hard-coded into the image tags, but for this purpouse it has to go through all of the images to find the big ones. Can someone with Javascript knowledge take a look at it?

Here's the main code (it won't let me put in the [body] tag for some reason):

Code: Select all

<script>
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola :: http://astrodiva.journalspace.com*/

function fixImgs(whichId, maxW) {
/* var maxW=document.body.clientWidth; */
var pix=document.getElementById(whichId).getElementsByTagName('img');
  for (i=0; i<pix> maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}
//-->
</script>

whoops, wrong version of the file and bbcode tag. Fixed now.

Thanks!

Pocket IE renders the pages just fine in "Default" mode (it even makes images fir properly), but Opera Mobile replaces some of the images with their alt text in "Fit to screen" mode, so that will have to be fixed.

A testing version of the template should be up on a temporary phpbb install sometime in early January, since holiday break is coming up and I'll have more time to work on it. But I want to try and crap out a Christmas Flash, so that's getting more thought and attention at the moment.