Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Mobile Friendly / Responsive?; When will Zeta be a responsive platform?
Topic Started: Jan 3 2016, 03:11 PM (491 Views)
iuchewie
Member
[ * ]
Any ideas how best to make our forums responsive / mobile friendly? Due to the nature of our forums, Tapatalk is a big bust. Is our only avenue to install a responsive theme or will the platform itself become responsive?

Here's a link to our forum if it matters: http://forum.killthecan.org/

We get over 55% of our traffic from mobile devices so this is super important.

Thanks in advance,
Chewie
Offline Profile Quote Post Goto Top
 
SlyCooperFan1
Member Avatar
Coder
[ *  *  *  * ]
Tapatalk is coming to ZetaBoards pretty soon according to this: http://support.zathyus.com/topic/5228867/1

Why is Tapatalk "a big bust" for your forums?
Offline Profile Quote Post Goto Top
 
iuchewie
Member
[ * ]
SlyCooperFan1
Jan 3 2016, 03:49 PM
Tapatalk is coming to ZetaBoards pretty soon according to this: http://support.zathyus.com/topic/5228867/1

Why is Tapatalk "a big bust" for your forums?
We've tested Tapatalk and for our forums it's no good.

We do a ton of quoting, copying / pasting of posts and those functionality is pretty much crippled in the TapaTalk system. Not only that, but we have several mod / admin only forums and sub forums. All of the forums are visible within the TapaTalk app. You can't READ those threads, but you see that they exist.
Offline Profile Quote Post Goto Top
 
Austin W
Member Avatar
Member
[ * ]
Did you say... Mobile Friendly?

Why, yes, yes we do have something for that. I'm just doing a slight update to MobileFriendly and preparing for the first github release.

If you want to instantly may your forum mobilefriendly, just copy these two lines of code. And then paste them into Board CP -> Board Template -> Javascripts
Code:
 
<link rel="stylesheet" media="screen and (max-width: 650px)" href="http://z5.ifrm.com/9054/18/0/p1266989/mobilefriendly.css" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<script src="http://z1.ifrm.com/0/1/0/p413241/mobileFriendly.js"></script>


Your themes may need specific CSS tweaks afterward to help be more responsive/mobile friendly, but it should in general work well.

You can find me on skype at live:tinoesroho if you need any help.

- Austin
Offline Profile Quote Post Goto Top
 
iuchewie
Member
[ * ]
Austin W
Jan 3 2016, 06:37 PM
Did you say... Mobile Friendly?

Why, yes, yes we do have something for that. I'm just doing a slight update to MobileFriendly and preparing for the first github release.

If you want to instantly may your forum mobilefriendly, just copy these two lines of code. And then paste them into Board CP -> Board Template -> Javascripts
Code:
 
<link rel="stylesheet" media="screen and (max-width: 650px)" href="http://z5.ifrm.com/9054/18/0/p1266989/mobilefriendly.css" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<script src="http://z1.ifrm.com/0/1/0/p413241/mobileFriendly.js"></script>


Your themes may need specific CSS tweaks afterward to help be more responsive/mobile friendly, but it should in general work well.

You can find me on skype at live:tinoesroho if you need any help.

- Austin
Thanks again for this Austin.

I installed your code on a test board I have. It's got the same theme as my main board, with the the exception of some of the post icons.

http://s4.zetaboards.com/whackthepack/index/

The issue that I'm running into is that some of our quote / reply buttons are being cut off.

If you go to the main General Discussion topic http://s4.zetaboards.com/whackthepack/forum/3848752/ you'll see that the VIEWS column is cut off (I'm testing on an iPhone 5s).

Assuming this is just due to the "max-width: 650px" parameter?
Offline Profile Quote Post Goto Top
 
Austin W
Member Avatar
Member
[ * ]
My apologies for the slow response.

I wasn't able to get my hands on a iPhone 5s. Browsing on an S3 appears to be normal. Registering is... problematic, something I'll need to work on - I should set it up so the fields and help sections are stacked vertically.

max-width means that devices with less than 650px of horizontal display width execute that code. The iPhone 5 resolution is 1136 x 640 pixels - meaning that it should be executing my code. In this context, @media only screen and (max-width: 650px){ isn't explicitly setting the max page width.

That's the job of
Code:
 
#main, #wrap {
overflow-x: hidden;
}


A quick check with an iphone browser emulator doesn't seem to be showing any clipping as a guest. http://mobiletest.me/iphone_5_emulator/?u=http://s4.zetaboards.com/whackthepack/topic/10401951/

If you can log in as normal user and confirm if the issue exists for normal users as well, I'll see what I can do about the button clipping for moderators and admins.

EDIT:
Testing indicates that the forum clipping to VIEW is iphone-specific. I'm working on a fix.

EDIT2:
If you don't mind dropping down to a three-column forum content overview on iphones, adding this code to theme CSS will work. I'll integrate it into mobilefriendly and update with new install code once I
Code:
 
@media only screen and (max-width: 650px) and (max-device-height: 1136px) {
.c_cat-starter, .c_cat-replies, .c_cat-views {
display: none;
}
}


EDIT 3:
Turns out the issue effects the entire iPhone line. I never noticed. I'll update mobilefriendly to be simply a three-column layout.
Code:
 
<link rel="stylesheet" media="screen and (max-width: 650px)" href="http://z5.ifrm.com/9054/18/0/p1268429/mobilefriendly.css" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<script src="http://z1.ifrm.com/0/1/0/p413241/mobileFriendly.js"></script>


Updated MobileFriendly.

I couldn't replicate the button clipping. :/
Edited by Austin W, Jan 4 2016, 09:01 PM.
Offline Profile Quote Post Goto Top
 
Austin W
Member Avatar
Member
[ * ]
This code should make the forum menus easier to use on mobiles.
Code:
 
<script type="text/javascript">
//<![CDATA[
if (screen.width <= 650 || navigator.userAgent.match(/iPad/i)) {
$('#menu_ucp > a, #menu_pm > a').attr('href', '#');
$('#menu_ucp ul').prepend('<li><a href="' + main_url + 'home/">Home</a></li>');
$('#menu_pm ul').prepend('<li><a href="' + main_url + 'msg/">Home</a></li>');
}
//]]>
</script>

Credit: Cory
Edited by Austin W, Jan 6 2016, 02:16 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Support · Next Topic »
Add Reply