News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[Preview] iOS.MF

Started by filmstarr, May 21, 2014, 10:48:35 AM

Previous topic - Next topic

filmstarr

In case this is of interest to anyone, here's a link to a forked/modified version of the SMF4iPhone theme that I've been using for a number of years:

https://github.com/filmstarr/iOS.MF

I recently reworked it a little for iOS 7 and added in a couple of gestures for naviagation and quick reply (quick reply is pretty cool :D).

It's very lightweight really as I've only updated and kept what I've needed over the years, but it does work well for doing the core SMF stuff on a mobile device.

I will say this though, it's not a "complete" theme right now, hence why I'm posting this here and not submitting it to the main SMF website. If time permits I'll look to add back in what may be missing.

Thanks to Fabius85 for permission to work on and modify SMF4iPhone and thanks for Fabius85, butchs and FarFromPerfection for the original theme on which this is based (more details here: http://www.simplemachines.org/community/index.php?topic=376475.0).

Enjoy!

xKroniK13x

Interested.
Any change of implementing SimplePortal compatibility? I know in the old forum, there was a lot of interest on this.

filmstarr

#2
Yes that would definitely be doable. I'm not particularly familiar with SimplePortal so I don't know how easy it would be to get a nice look and feel over all the different blocks, but I've attached an image of a quick mockup and thrown this up on a separate branch. Check it out here if you're interested:

https://github.com/filmstarr/iOS.MF/tree/SimplePortal

The one thing is that it probably requires taking the three column layout and squashing it down to one column to make it readable on a mobile device. This is fine, but it may not give the nice layout of the front page that SimplePortal usually provides. With a bit of CSS work though I sure this could be improved.

As it is, this version would layout the left to right columns from top to bottom. :)

xKroniK13x

Quote from: filmstarr on May 23, 2014, 11:06:18 AM
Yes that would definitely be doable. I'm not particularly familiar with SimplePortal so I don't know how easy it would be to get a nice look and feel over all the different blocks, but I've attached an image of a quick mockup and thrown this up on a separate branch. Check it out here if you're interested:

https://github.com/filmstarr/iOS.MF/tree/SimplePortal [nofollow]

The one thing is that it probably requires taking the three column layout and squashing it down to one column to make it readable on a mobile device. This is fine, but it may not give the nice layout of the front page that SimplePortal usually provides. With a bit of CSS work though I sure this could be improved.

As it is, this version would layout the left to right columns from top to bottom. :)

Wow, awesome! Didn't expect implementation that fast! I'll give it a shot, and also see how pretty I can make it in the CSS. I'll PM you a link to the stylesheet when I'm complete, and if you want to add it to the Git, you're more than welcome to.

Thanks a ton!

filmstarr

No problem at all! That would be fantastic if you could send me your changes. I guess there's probably a fair bit to do to support all SimplePortal functionality, so let me know if you have any suggestions. As it is I've put some SimplePortal CSS at the bottom of the main style.css file, I'll spin this out into a separate file when I get a moment though. :)

filmstarr

Okay, I've now spun out the SimplePortal CSS into a different file. Fingers crossed this all works properly after a night down the pub! ;)

xKroniK13x

I modified MessageIndex.template.php to display childboards. Below is the link to the download, feel free to use it on your GitHub. I did in-line styling, so you may want to add it to the stylesheet, but it works and looks fine.

http://www.coreymccown.com/files/BoardIndex.template.iOS.MF.zip [nofollow]

filmstarr

Excellent, thanks xKroniK13x that was one of the jobs on my to-do list!

I checked out the link that you sent and it looks to be an unmodified version of the BoardIndex.template rather than MessageIndex.template though, wrong file? ;)

xKroniK13x

Quote from: filmstarr on May 28, 2014, 03:29:52 AM
Excellent, thanks xKroniK13x that was one of the jobs on my to-do list!

I checked out the link that you sent and it looks to be an unmodified version of the BoardIndex.template rather than MessageIndex.template though, wrong file? ;)

Doh! It was a long day. Here's the correct link.
www.coreymccown.com/files/MessageIndex.template.iOS.MF.zip

filmstarr

Quote from: xKroniK13x on May 28, 2014, 07:47:05 PM
Quote from: filmstarr on May 28, 2014, 03:29:52 AM
Excellent, thanks xKroniK13x that was one of the jobs on my to-do list!

I checked out the link that you sent and it looks to be an unmodified version of the BoardIndex.template rather than MessageIndex.template though, wrong file? ;)

Doh! It was a long day. Here's the correct link.
www.coreymccown.com/files/MessageIndex.template.iOS.MF.zip

Thanks xKroniK13x :D, I've added these changes in along with some other small tweaks to the layout. I've changed the child board style a little such that it is represented by a circular yellow tag, sticky topics being represented by a circular blue tag!

xKroniK13x

Quote from: filmstarr on May 29, 2014, 09:30:00 AM
Quote from: xKroniK13x on May 28, 2014, 07:47:05 PM
Quote from: filmstarr on May 28, 2014, 03:29:52 AM
Excellent, thanks xKroniK13x that was one of the jobs on my to-do list!

I checked out the link that you sent and it looks to be an unmodified version of the BoardIndex.template rather than MessageIndex.template though, wrong file? ;)

Doh! It was a long day. Here's the correct link.
www.coreymccown.com/files/MessageIndex.template.iOS.MF.zip

Thanks xKroniK13x :D, I've added these changes in along with some other small tweaks to the layout. I've changed the child board style a little such that it is represented by a circular yellow tag, sticky topics being represented by a circular blue tag!

Sounds good. If interested, I also modified it to display the "Advanced Reputation System" stats, but that would be another fork on GitHub, for a minor change.

filmstarr

Quote from: xKroniK13x on May 29, 2014, 06:59:28 PM
Sounds good. If interested, I also modified it to display the "Advanced Reputation System" stats, but that would be another fork on GitHub, for a minor change.

Yeah I'll definitely check out any modifications that you send me!

Just committed quick login, logout and registration links and pages (although I still need to style the dedicated login and registration pages). :D

xKroniK13x

Quote from: filmstarr on May 30, 2014, 11:07:45 AM
Quote from: xKroniK13x on May 29, 2014, 06:59:28 PM
Sounds good. If interested, I also modified it to display the "Advanced Reputation System" stats, but that would be another fork on GitHub, for a minor change.

Yeah I'll definitely check out any modifications that you send me!

Just committed quick login, logout and registration links and pages (although I still need to style the dedicated login and registration pages). :D

Nice. I updated to the latest files... and as for the reputation, I added just a couple of lines on Display.template:
On line 139:

if ($modSettings['karmaMode'] != '0')
{
echo '<br /><span class="name" style="font-size:10px;">', $modSettings['karmaLabel'], $message['member']['karma']['power'], '</span>';
}


This doesn't show the image bars for the number of reputation, however, it does display the rep power, which is what's important. I had it display the bars, but I noticed a performance hit on mobile, so that wasn't worth it.

And this is for the mod found here.

filmstarr

Quote from: xKroniK13x on May 30, 2014, 01:28:38 PM
Nice. I updated to the latest files... and as for the reputation, I added just a couple of lines on Display.template:
On line 139:

if ($modSettings['karmaMode'] != '0')
{
echo '<br /><span class="name" style="font-size:10px;">', $modSettings['karmaLabel'], $message['member']['karma']['power'], '</span>';
}


This doesn't show the image bars for the number of reputation, however, it does display the rep power, which is what's important. I had it display the bars, but I noticed a performance hit on mobile, so that wasn't worth it.

And this is for the mod found here.

Ah okay, I didn't realise this was for a mod. I guess that mods such as this should install into the theme automatically, but this probably isn't working if it can't find the right anchors for which to insert the mod's code. This would need to look more like the Curve theme than it does now. If I get the time in the future I might try and tidy this up so that it integrates a bit better!

filmstarr

I'm pleased to say that iOS.MF is now live on the theme site!

Checkout the theme here and topic here. :D

SBonney

Very cool. How would you go about putting a graphic in the page headers?

filmstarr

Thanks SBonney, I'm glad to hear you like it, that's awesome! :D

If you want to add an image to the header you should look in the theme's index.template.php file at the template_body_above method. This method deals with the HTML of the header. Depending on exactly what you want to do (add a background image, add an image on top, replace the title with an image, etc.) you will want to edit one of the following:

Line 140: <div class="topbar" id="topbar" data-role="header"> - This wraps the whole of the header bar.
Line 142: <div id="page-title"> - This is the content of the header underlying the icons and including the title.
Line 143: <div id="the-title" class="the-title">', parse_title(), '</div> - This is the actual title text.

You could add an image element to one of these or even replace them with it, or use CSS to set a background image.

I hope this helps!

Advertisement: