Updates [WIP] Mobile Template

Mitsuki

Veteran
Joined
Dec 14, 2006
Messages
11,628
Location
California
Gil
0
Chocobo Egg
Chocobo Egg
Barry the Behemoth
Accessory (Arms)
Build-A-Member
Mogrinch
FFXIV
Mitsuki Calei
FFXIV Server
Lamia
Free Company
Gaia
Hey guys, just a quick update. @AuronX created a mobile template for FFF, but we still need to iron out the kinks. Unfortunately, it is hard for Luke to write a code without a simulated environment, so we'll have to accommodate him by testing the mobile template live on some days in order to determine the issues. A test server is out of the question at this time, unfortunately.

We apologize for any inconvenience this may cause to our mobile users. It's still functional on mobile version (unlike a couple months ago when we couldn't even login for some time), but we're aware that the format needs an update. At least, on some mobile phones, anyway.

Thank you @Belazor et Britannia for the assistance and few fixes as well. Appreciate it.

And thanks to Luke for the hard work. It has come a long way and there's definitely progress!

In the meantime, I ask for your patience as the small team behind this continue to work on this. Please use this thread to report any issues. Screenshot helps!
 
iPhone 6 here.

Issues I'm experiencing are the following:


  • Forum format is blown up. Can't zoom out.
  • Personal Icon/Avatar is stretched across the site like the the site banner.
  • No options when clicking someone's name in the Shoutbox i.e: Private Messaging, Editing shouts, banning, view profile, you name it.
  • Twitter feed and Discord apps still show up at the bottom (I thought someone said this shouldn't be the case, not an issue otherwise)
  • Personal profiles seem off too, but I don't know if it was intentional for them to look this way.
  • Occasionally have a scroll lock where it prevents me from scrolling down in the shoutbox.
 
Last edited:
Six thanks for the heads-up. A few notes by way of response:


  • Forum format is blown up. Can't zoom out. Not 100% sure what you mean here--is this the same zoom bug as before where you can't see all the content? That should've been eliminated. A screenshot would be helpful. In general, the site is supposed to be larger than normal--large fonts for reading on small screens, large buttons for navigating with fingers instead of a mouse. The way Seamus is it's a bit challenging to design for widely varying screen sizes/resolutions though, so I had to try and find a happy medium where things aren't too big on low-res screens and not too small on high-res ones.
  • Personal Icon/Avatar is stretched across the site like the the site banner. This is by design, but it seems no one likes it. I'll figure something else out.
  • No options when clicking someone's name in the Shoutbox i.e: Private Messaging, Editing shouts, banning, view profile, you name it. Not the fault of the mobile tweaks, unfortunately. I say 'unfortunately' because it's really out of my hands. vBulletin uses javascript functions that simply aren't supported on mobile browsers, so lots of little things like that simply won't be possible on a phone/tablet.
  • Twitter feed and Discord apps still show up at the bottom (I thought someone said this shouldn't be the case, not an issue otherwise) All sidebar content is put on the bottom by design. There's just not enough width on a portrait screen for the sidebar and forum content.
  • Personal profiles seem off too, but I don't know if it was intentional for them to look this way. Yes and no. Seamus was never meant to be a mobile theme, so it's better to look at the mobile tweaks as 'function over form'. Short of rewriting Seamus's CSS completely, lots of things will be kind of weird. I'm doing my best to make sure everything works (javascript issues aside) and looks serviceable, but the latter is an uphill battle.
  • Occasionally have a scroll lock where it prevents me from scrolling down in the shoutbox. Again, this is unfortunately just an issue with vBulletin and mobile browsers. Not really any practical solution.
 
  • Forum format is blown up. Can't zoom out. Not 100% sure what you mean here--is this the same zoom bug as before where you can't see all the content? That should've been eliminated. A screenshot would be helpful. In general, the site is supposed to be larger than normal--large fonts for reading on small screens, large buttons for navigating with fingers instead of a mouse. The way Seamus is it's a bit challenging to design for widely varying screen sizes/resolutions though, so I had to try and find a happy medium where things aren't too big on low-res screens and not too small on high-res ones.

Kelh9E9.jpg


0jR6xGz.jpg


Kelh9E9.jpg



You can still see the content by scrolling sideways and scrolling down, but we can't zoom out.

This happened when Fil fixed the Macbook issue that I PMed you about. It might be best if you contact Fil about this.

I'm not bothered by the SB PM. I would never use that feature on mobile phone anyway, so if there is no fix, it's not a problem for me. Even on the old mobile template, handling the shout box was always a pain and there were some features that I thought were limited as well. It wasn't a biggie as I use the mobile phone for quick read rather than for moderating or other functions that I would normally do on PC/laptop.
 
@Six thanks for the heads-up. A few notes by way of response:


  • No options when clicking someone's name in the Shoutbox i.e: Private Messaging, Editing shouts, banning, view profile, you name it. Not the fault of the mobile tweaks, unfortunately. I say 'unfortunately' because it's really out of my hands. vBulletin uses javascript functions that simply aren't supported on mobile browsers, so lots of little things like that simply won't be possible on a phone/tablet.
  • Occasionally have a scroll lock where it prevents me from scrolling down in the shoutbox. Again, this is unfortunately just an issue with vBulletin and mobile browsers. Not really any practical solution.


If this was a limitation with the skin then why is this only an issue with the current "tweaked" skin? If it was an issue with the skin itself (or java) then those issues would've been present on the standard skin too, I would assume? I also never had an issue with any scroll lock on my mobile phone, to be honest with you, so I feel like it may be a clash of coding instead of Java or vBulletin (definitely don't think it's the browsers).

Why not code in a collapsible navigation list?

And no worries, just trying to help locate issues so we can get this skin running smoothly. :)


Also: Noticed that the "New Posts" page doesn't fully display:

mGMTMCQ.png



 
Last edited:
If this was a limitation with the skin then why is this only an issue with the current "tweaked" skin? If it was an issue with the skin itself (or java) then those issues would've been present on the standard skin too, I would assume?

I thought this was the case, actually, but it turns out I was wrong! Good news below...

I also never had an issue with any scroll lock on my mobile phone, to be honest with you, so I feel like it may be a clash of coding instead of Java or vBulletin (definitely don't think it's the browsers).

I went back over all of my code tonight and I'm not seeing anything that could be causing this. It would be unusual for CSS to even be capable of causing this sort of issue, but I'll keep an eye open.

Why not code in a collapsible navigation list?

Doing this in pure CSS is a bad idea. Possible, but it would be a total hack job. It could be added properly with some javascript, but I'd rather not go there if possible.

And no worries, just trying to help locate issues so we can get this skin running smoothly. :)

Appreciated!

Now, for the good news: like I said, I went back over all of my code tonight, which brought with it a number of updates that will hopefully be showing up on the live site soon:


  • 'Zoom' issue fixed. This was actually caused by the original template setting a minimum pixel limit on the site width. Added code to remove this limit on the mobile template.
  • Member context menus fixed. Turned out not to be javascript-related at all, but CSS visibility. Added exception to re-enable these and also stylized for larger text. Be warned though that depending on where the member's username is on the screen the context menu may get cut off. On the one hand this may not be an issue though, because outside of the shout box there's no real way to highlight the username without clicking it on a touchscreen. No highlight = no context menu, period. Recommendation: save it for the desktop.
  • Home page profile pictures re-done. I admit, the new setup looks cleaner, even if I am proud of getting the original design to work at all. Should be more palatable to everyone's tastes now.
  • Improved font scaling. This may yet be a work-in-progress, but most font sizes were redone to scale based on relative CSS values rather than pixels. This should mean the site will adapt better to a wide variety of screen sizes and resolutions.

Some screenshots:

fff-member-context.png fff-profile.png
 
Apologies for the delay. Fil may or may not be able to get to it today, but we'll sort this out soon enough.
 
AuronX

Fil updated and here's the result for iPhone:

SsqtgCk.png


8HQPJjD.png



Any ideas?
 
Adding to what Mitsuki said, iPhone posts look like this again:

O5Wob8Q.png
 
Thanks for the screenshots, Fil sent me a PM about this a few days ago and I've been swamped ever since but I will look into it as soon as possible. It appears to be a matter of how webkit-based browsers handle viewports versus other browsers. Finding a solution that makes webkit render at normal size that doesn't make other browsers render at microscopic size will take a bit of investigation.
 
Just a quick update: after doing some testing, I may have found a solution that will both solve the iPhone issue and make the mobile version of the site more consistent across different devices in general. We'll try to implement it soon and see how it goes!
 
Back
Top