CodeWalrus

CodeWalrus Website => Site Discussion => Site Discussion & Bug Reports => Topic started by: DJ Omnimaga on January 14, 2015, 07:09:14 am

Title: Making forum skin mobile-friendly
Post by: DJ Omnimaga on January 14, 2015, 07:09:14 am
Responsive forum skin is a feature that is coming in SMF 2.1 by default, but currently we have SMF 2.0 and probably until a while after SMF 2.1 goes gold. Some people have troubles using SMF 2.0 default theme on mobile computers and the one we are using right now is heavily based on SMF default.

I don't want users to have to switch between two themes if they want to have a mobile one, and I would prefer that the site colors and style looks identical on mobile devices, as in  not use some stock iOS-like theme from somewhere, so it looks like we will have to use CSS mediaqueries. We already use some, such as how the search moves out of the navigation when in low resolution, but that's not enough, and the site navigation is a major issue, and a suggestion I got is that signatures should be hidden on mobile and mini-profile moved elsewhere under a certain resolution.

So this will be the topic where the staff will discuss the changes and people can give feedback as they happen. Ideally not much work will have to be put into such theme update because we will have to redo everything from scratch when SMF 2.0 gets terminated anyway.
Title: Re: Making forum skin mobile-friendly
Post by: Juju on January 14, 2015, 07:18:39 am
You raise a good point. Our current mobile solution is Tapatalk, but that would be way better if we actually have a mobile theme. Personally I don't mind switching between 2 themes, although we could add a button to easily switch between both themes, maybe with a little browser detection thrown in. (Or else take this theme that costs $20 that does everything for you, if you have the money for it.) The default theme for 2.1 (currently in Beta 1) will be responsive, so we'll obviously install a test copy as soon as possible (as DJ said, probably around RC2 or when it gets stable enough) and modify the theme with our colors so we'll be ready when the final 2.1.0 version comes out.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on January 14, 2015, 08:06:38 am
Im on mobile right now and
i dont have any compliants though.
Title: Re: Making forum skin mobile-friendly
Post by: Duke "Tape" Eiyeron on January 14, 2015, 09:34:23 am
Me neither, except when I'm having troubles with the touchscreen keyboard or when FX is heavily derping. Your theme has big enough buttons for someone to press on it and I don't have troubles browsing (welp, I'm on a 5" FHD phone, so...)

And no, I don't want to have an application I don't know for browsing CW. If you really need a mobile verison, I could help providing some nice responsive bases.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on January 14, 2015, 02:49:13 pm
Quote from: Eiyeron on January 14, 2015, 09:34:23 am
And no, I don't want to have an application I don't know for browsing CW.

I second this.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on January 14, 2015, 03:04:25 pm
I have a little trouble sometimes but it's not too big of a deal. I'd like a mobile version as long as it didn't remove features.
Title: Re: Making forum skin mobile-friendly
Post by: aeTIos on January 14, 2015, 03:05:41 pm
Do we even have a real mobile theme right now? If I access CW on my phone I get the desktop version.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on January 14, 2015, 03:11:18 pm
No (I think), but your browser should make text bigger so that you don't have to zoom in bunches.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on January 14, 2015, 04:30:34 pm
Quote from: aeTIos on January 14, 2015, 03:05:41 pm
Do we even have a real mobile theme right now? If I access CW on my phone I get the desktop version.
Nah we don't have one. We got Tapatalk, but the new version, from what I saw in Streetwalrus screenshots, is garbage, and the only other alternative is text-only and was for very old mobile phones.

The goal right now is to make the current theme so that at low resolution it looks different, but still the same color scheme and stuff.

And the automatic text zooming in mobile browsers is a major issue with the theme right now because it forced me to merge the banner slogan into the image, so that it always remained the same size as the banner. >.<
Title: Re: Making forum skin mobile-friendly
Post by: rallat on May 08, 2015, 12:15:30 pm
How do you handle the with Mobile-Fiendly algoo from Google here on the forum. Do you have a significant drop of organic traffic?
Title: Re: Making forum skin mobile-friendly
Post by: Juju on May 08, 2015, 12:36:31 pm
SMF released a mod that makes it Google-friendly, but it unfortunately conflicts with the other mods. Gotta check for a solution, for the time being.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 12:54:52 pm
A few improvements that could be made : some of the layout edits get in the way when browsing on mobile. For example the navbar looks like this in Firefox when you zoom :
(https://codewalr.us/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FVt3GIw7.png&hash=504b7ea3072c027db1789c15b2b72f1c)

Other things could be done to improve the site but it's one of the biggest issues. I don't like floating navbars personally. It's a waste of screen space.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 08, 2015, 01:22:11 pm
Looks the same on chrome , but it should be an easily editable aspect, right?
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 08, 2015, 01:34:28 pm
This is what it looks like for me on chrome:
(https://codewalr.us/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FigMFcRG.jpg&hash=9385437628c781c7deac8417d0db4f68)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 01:35:33 pm
Originally it was like on Omni, in the header. DJ made this edit inspired by facebook, tiplanet and others. I personally think it's bad design. I've been experimenting a bit, responsive design should be feasible with the current theme with only css edits (aka the right way).
Title: Re: Making forum skin mobile-friendly
Post by: Juju on May 08, 2015, 02:18:51 pm
I like this theme, though. I'll try to edit some stuff when I'll have some time. Feel free to edit stuff as well, Street.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 02:21:08 pm
Yup that's what I'm doing atm. Trying to make the site look nice on narrower windows (not too hard, it's just the page width) then I'll make the topic view look better on mobile.
Title: Re: Making forum skin mobile-friendly
Post by: Juju on May 08, 2015, 02:23:49 pm
Nice. CSS media queries and meta viewport will definitely help you.

Also this test: https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fcodewalr.us
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 02:39:08 pm
Alright, the site no longer spawns a scrollbar if your window is narrower than 1000 pixels. Instead, it automatically makes the width 100% instead of 90 which is pretty useful. Now for the mobile view.

Edit:
(https://codewalr.us/proxy.php?request=http%3A%2F%2Fa.pomf.se%2Fhmqita.png&hash=d35d988d6be269ca10b928748391ffeb)

I'm getting there. I just need to figure out width adjustments for this view and it'll be awesome.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 08, 2015, 03:42:23 pm
Oooh I like the result so far :O. But sig images should have a lower max height :P
Quote from: rallat on May 08, 2015, 12:15:30 pm
How do you handle the with Mobile-Fiendly algoo from Google here on the forum. Do you have a significant drop of organic traffic?
We went from 7000 hits a day to 0. Just kidding. Nothing so far but maybe it's because of how recent the change is. I don't know how the algorithm works personally. Welcome to Codewalrus by the way! :)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 03:51:22 pm
Quote from: DJ Omnimaga on May 08, 2015, 03:42:23 pm
Oooh I like the result so far :O. But sig images should have a lower max height :P
Quote from: rallat on May 08, 2015, 12:15:30 pm
How do you handle the with Mobile-Fiendly algoo from Google here on the forum. Do you have a significant drop of organic traffic?
We went from 7000 hits a day to 0. Just kidding. Nothing so far but maybe it's because of how recent the change is. I don't know how the algorithm works personally. Welcome to Codewalrus by the way! :)

Images now have max-width: 100% so it scales according to the display. ;)
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 08, 2015, 05:13:59 pm
Uh oh
(https://codewalr.us/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FYHpq3PM.jpg&hash=356b1d58c288cee132054a85db277ccd)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 05:14:34 pm
Yeah the header is borked, I'm working on it. Gonna hide some stuff in there.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 08, 2015, 05:17:08 pm
Could you also fix the margin inside wirc. Just add margin to account for the width of the scrollbar so that it doesn't cut off words.

Also the profile pics display opposite to the name.

And the profile page is broken.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 05:20:36 pm
I only really worked on the topic view. The position of the profile pic is intentional, I could place it to the left tho. Let me check.

Edit : I don't really like how it looks with the profile pic to the left. :P
As for wirc it looks fine for me, the text overflow issue is a known bug in wirc itself, not the forum theme.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 08, 2015, 05:31:16 pm
Its fine on the right, just add a negative margin to make up for the height of the text.

Also if you could make the full post editor text box 100% width that would be easier to type.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 08, 2015, 06:10:40 pm
By the way, on my Nexus 5 the theme won't show up, but it might be due to the resolution being 1080*1920. Also some stuff is broken now:

(https://img.ourl.ca/Screenshot_2015-05-08-14-05-40.png)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 06:15:33 pm
Quote from: CKH4 on May 08, 2015, 05:31:16 pm
Its fine on the right, just add a negative margin to make up for the height of the text.

Not sure I get what you mean.

Quote from: CKH4 on May 08, 2015, 05:31:16 pm
Also if you could make the full post editor text box 100% width that would be easier to type.

Will do.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 08, 2015, 06:19:31 pm
It stoped woking on my kindle...
I liked it better when the usernames were on the top.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 06:21:21 pm
Could you guys be a bit more specific with your problems ? I can't really help you with what you tell me.

DJ and Cumred looks like your issue is that it's not using the new theme at all.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 08, 2015, 06:28:18 pm
Well, the theme had the user names and avatars above the post,but now, it reverted back to the original and the post box dimensions are smaller. Where the post is displayed that is.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 08:35:10 pm
Hmmm weird, so it's not triggering the theme for you either ? Which browser are you using ?

Edit: Lolk, the admin section is completely broken with the small width. I'll call it a wontfix for now because the game. :P
Edit 2: or not, I killed two birds with one stone by fixing the profile page.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 08, 2015, 09:31:55 pm
The Kindle Experimental browser. :P That won't really help though.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 09:32:43 pm
Ah right, I'm sorry but I can't help you with this one. :P
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 08, 2015, 09:34:00 pm
It was working 6 hours and 10 minutes ago for me though...
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 09:36:48 pm
Oh well I dunno, you're not the only one affected by that it seems.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 08, 2015, 09:40:56 pm
So far it looks very nice on Chrome mobile now. Good job so far. I hope you can fix nicks/avatars in Chrome though and also the recent posts block that fills an entire screen on the board index :)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 08, 2015, 09:42:10 pm
Yeah I'm looking into it. ;)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 09, 2015, 07:17:49 am
Ok I think the theme is mostly done now. If you come across something that's not mobile friendly and/or displays incorrectly, or have suggestions for improvement on what has already changed please post here. :)
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 09, 2015, 07:41:09 am
Actually yeah, the irc is messed up quite badly in then ew theme. For examplke the time is displayed through the text and the text is not cut of properly. Though this might be a "juju issue"
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 09, 2015, 07:45:17 am
Yup, wirc bug. I'll check it out later today.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 09, 2015, 08:18:25 am
So yeah, sill a far amount of bugs on my android. Also look at the search bar and facebook/twitter buttons on the first/second image
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 09, 2015, 08:29:08 am
Fixed the search bar, hid the facebook/twitter links (they're at the bottom of the page anyway). As for the thread view, it looks like your phone isn't using the mobile css somehow. It's supposed to look like this : <attachment>

And wirc should be fixed now.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 09, 2015, 11:58:02 am
Ah great :) ow i'll be able to surf in peace on cw :P
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 09, 2015, 05:10:02 pm
Btw, some display issues in the board stats page causes page views to be only partially visible.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 09, 2015, 09:40:19 pm
Can you add a switch to desktop button?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 10, 2015, 04:58:57 am
Unfortunately that's not possible because it uses CSS media queries to apply the mobile theme. On my phone, switching to landscape orientation does switch to the desktop version.

I don't think there's a need to switch to the desktop version anyway, I did my best to avoid removing too much stuff. If you find something is really missing I can try to add it back.

Edit : I guess I can add a separate theme with no mobile version.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 10, 2015, 05:11:44 am
I agree. If some features are really wanted back on mobile, then we can always bring them back in different format, such as icons.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 10, 2015, 08:46:08 am
Tbh i kinda miss the recent posts bit :(
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 10, 2015, 12:40:17 pm
They're still there. Go to the forum index, there you have a small recent posts block. If you click its title you get the good old recent posts page. I'll try to make the navbar more usable on mobile next weekend.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 10, 2015, 04:00:38 pm
On a side note, I need to find a way to have the online user list on every page (without the many PHP errors the Portal and recent posts one has. Mind helping me on this Street?). It would be like yAronet and some other sites. Just as long as it doesn't break the page layout, though (I guess it could be turned into a link on mobile view).

Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 10, 2015, 05:54:58 pm
I have no idea, idk php. :P All the changes I did are pure CSS with two minor edits to the template HTML.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 10, 2015, 06:06:24 pm
Php is not that hard. Its basically a bad version of the core components every language has
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 10, 2015, 07:35:16 pm
Lolk, I'll look into it later.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 13, 2015, 06:58:52 am
For the member list, you should hide AIM, ICQ, YIM and the graphical post bars in mobile. Almost  nobody uses AOL Instant messenger, ICQ and Yahoo Messenger anymore, especially not on mobile, so I doubt those are necessary enough to be seen, and post bars aren't necessary to see in mobile.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 14, 2015, 09:27:25 am
Iirc I can't change the member list too much without editing the php. I'll have to look into that.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 15, 2015, 05:22:50 am
I guess it probably depends if each element got its own CSS property. Otherwise, would it be possible to make divs wrap on multiple lines if they don't fit?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 15, 2015, 06:26:22 am
Hmm I dunno, it's a friggin table. <_<
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 15, 2015, 07:01:06 am
I kinda wish that SMF 2.1 would finally get rid of tables. I don't get why they are still used for mainstream web softwares in 2015. I am ok with them for basic websites but I prefer to use divs whenever possible now.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on May 15, 2015, 09:17:54 am
I can may see if i can make a simple smf mod that removes the three columns. Shouldn't be too hard.

EDIT: it looks like you can disable it by unsetting $context['disabled_fields']['icq'], $context['disabled_fields']['msn'], $context['disabled_fields']['aim'] and $context['disabled_fields']['yim']. Don't know if theres a way to do that without mods/php editting and also that removed it from the profile too

EDIT2: Okay i've made a small mod that only hides icq/aim/yim on mobile.
I'll do a small walkthrough of the code cause i understand if you won't install mods made by a random snake :P
Also i won't put the source on github or something because you can easily see it within the zip (its not like its compiled or anything)

The mod contains a mere 3 files:
modification.xml - file containing the code for the installation / uninstallation
package-info.xml - standard file for mods that tells what file needs to be executed to install the mod
readme.txt - file that tells what the mod does

in modification.xml you'll find this piece of code:

<file name="$sourcedir/Memberlist.php">
<operation>
<search position="after"><![CDATA[ // Aesthetic stuff.]]></search>
<add><![CDATA[
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
unset($context['columns']['icq']);
unset($context['columns']['aim']);
unset($context['columns']['yim']);
}
]]>
</add>
</operation>
</file>


what this does is search in source/Memberlist.php for the string "   // Aesthetic stuff.". right before that it will add the code

$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('long string',substr($useragent,0,4)))
{
unset($context['columns']['icq']);
unset($context['columns']['aim']);
unset($context['columns']['yim']);
}

the 'if' is to see if the page is viewed from a mobile device. I don't know how street checks but i just copy-pasted the code from a stackoverfflow answer :3. If it thinks the client is a mobile device, it will unset those 3 variables, which are used to determine if those columns are displayed or not
If you have any other questions just ask :)
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 15, 2015, 11:28:44 am
I like divs too but apparently the new standard is tags with their own names like <this></this> and <that></that>.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 15, 2015, 03:11:03 pm
I don't check for mobile in the PHP. In fact I only made minor edits to the template, and the whole mobile theme is pure CSS based on window width, with the page meta viewport set. I don't like stuff that dynamically changes the HTML depending on the user agent.

As for tables, it's to make formatting easier (they make horizontal/vertical alignment uniform). There's no reason why they should go. Hell even wirc uses a table to display messages.
Title: Re: Making forum skin mobile-friendly
Post by: Duke "Tape" Eiyeron on May 15, 2015, 10:05:52 pm
Trusting user agents is so fragile that even a curl with some settings could be taken as every browser in the world.

And about tables, they went unpopular because people were overusing them. A HTML document is before a web page a document. You're assumed to follow the documentation and use the right elements to give to your page some semantic sense (using a title to name the document, h1 to give a principal visible title, em to have an normal emphasis and strong to have an heavy one, etc...). HTML went through versions to evolve to something that would split the style from the content (hence the apparition of CSS). Thus we should avoid using tags only because they have a graphical effect on a few browsers and build the pages on a semantic manner than a visually appealing one.

But yeah, tables are fine because they set a lot of things done but they tend to be treated/rendered quite differently across the browsers (margin hell for instance).
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on May 15, 2015, 10:09:58 pm
In those cases I use appearance: none; and its other browser friends.
Title: Re: Making forum skin mobile-friendly
Post by: Duke "Tape" Eiyeron on May 15, 2015, 10:15:29 pm
Actually, it's a bit more complicated than just swapping CSS properties. Now, search engines or even browser for visually impaired people (no offense, I just don't know the right term) tries to fetch the data in a semantic manner. In a tag, you would have a more important sentece or term than just in a <p>. <header>, <footer> <nav> <aside> doesn't do anything to help formatting but to give sense to your page. Web crawlers/browsers will be more able to navigate through your page if you structure it correctly. Giving it a structural sense will help you also in web-dev as you know that when you're playing with a <aside> you're programming something related to the main content.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 16, 2015, 05:36:39 am
ok, so it seems that my kindle has a just big enough screen so it is registered as a half desktop half mobile device. Is there any way that is can be 100% mobile? I know this because I can see all the stats on the home screen on my kindle,  but not on an actual iPhone.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 16, 2015, 05:50:56 am
I guess it depends. The mobile theme is entirely based on screen resolution, though, so you would need to ask Street to see if it's possible to detect which device you use.

However I would really recommend getting your Kindle replaced with something else, because from what you have been describing in the last few months, the Kindle browser seems worse than Internet Explorer 6.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 16, 2015, 06:38:39 am
Oh, yeah. It doen't really matter to me tho. As long as I can get online its good. Anyways, its not gonna get replaced by an i device or kindle fire or android. My parents have rules about that stuff.  :=|
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 16, 2015, 08:07:45 am
It's based on window width which is not the same as screen resolution. Try resizing the window on a pc. ;) Also, it's completely expected to display that way on tablets. The page width adapts to the window so that it uses as much screen space as possible.
Btw : my phone in landscape switches to tablet mode, my tablet in landscape switches to desktop, and in both cases I find that to be a good thing given the screen sizes.
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on May 16, 2015, 08:10:13 am
Could there maybe be a group for larger windows size? I am always on portrait mode,so it looks weird.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 16, 2015, 10:24:29 am
I could add themes that force the desktop and mobile versions, but you need to switch themes all the time.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 19, 2015, 05:16:48 pm
I would preferably not want that, because on Cemetech I often get switched back to mobile theme even when I don't want to use it.

Also regarding theme bugs, here are the pages that are broken:

http://codewalr.us/index.php?action=admin;area=portalarticles - Some stuff is outside the screen and unreachable, so we cannot approve news from mobile devices.
http://codewalr.us/index.php?action=stats - Same issue with the post stats. Page views in particular are impossible to see completely.
http://codewalr.us/index.php?action=mlist - The list and navigation overlaps outside the screen and we can scroll the page left and right

The following are PHP-related, not CSS:
http://codewalr.us/index.php?action=profile - Not really a mobile-specific bug, but PHP code appears underneath the navigation and the page text is much bigger. This started happening after I uninstalled then reinstalled some mods a few days ago.
http://codewalr.us/index.php?action=admin - Same
http://codewalr.us/index.php?action=who - Same
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on May 21, 2015, 05:07:56 pm
Quote from: DJ Omnimaga on May 19, 2015, 05:16:48 pm
http://codewalr.us/index.php?action=admin;area=portalarticles - Some stuff is outside the screen and unreachable, so we cannot approve news from mobile devices.
http://codewalr.us/index.php?action=stats - Same issue with the post stats. Page views in particular are impossible to see completely.
http://codewalr.us/index.php?action=mlist - The list and navigation overlaps outside the screen and we can scroll the page left and right

Gonna check these out.

Quote from: DJ Omnimaga on May 19, 2015, 05:16:48 pm
The following are PHP-related, not CSS:
http://codewalr.us/index.php?action=profile - Not really a mobile-specific bug, but PHP code appears underneath the navigation and the page text is much bigger. This started happening after I uninstalled then reinstalled some mods a few days ago.
http://codewalr.us/index.php?action=admin - Same
http://codewalr.us/index.php?action=who - Same

Apparently you solved it already so that's cool.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on May 21, 2015, 07:49:16 pm
Yeah for some reasons, one mod package added code after a PHP closing tag so that code showed up as plain text under the site navigation.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on June 03, 2015, 07:15:41 pm
Another display issue:

(https://img.ourl.ca/Screenshot_2015-06-03-15-14-13.png)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on June 03, 2015, 08:17:22 pm
This one I'm aware of. It's probably a weird bug in the SMF CSS, couldn't find a fix for it. :/

But yeah the bugs aren't exactly top priority so I didn't make any time to look at them yet. :P (I'm aware of one or two others as well that I'm too lazy to fix).
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on June 03, 2015, 08:48:43 pm
You can try opacity: .999; it's been known to work as an alternative to z-index.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on June 03, 2015, 08:52:48 pm
Oh I'll keep that in mind thanks.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on June 03, 2015, 09:53:16 pm
Ah I didn't know about that opacity trick. I wasn't sure if the bug could be fixed via z-index so I was gonna suggest that, but if it can't be fixed that way, then disregard that, I guess.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on June 03, 2015, 09:54:47 pm
I tried z-index but iirc it either didnt work or broke something else (it already uses z-index btw).
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on June 03, 2015, 09:56:18 pm
Yeah there are like 10 layers around that part of the page. I had serious issues  myself with the navigation. It's because the navigation isn't intended to be placed there. Using a completely custom PHP template would fix it, but might cause issues when upgrading and might be too much effort for a forum skin that's not going to be SMF 2.1 compatible, let alone with 3.0.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on June 04, 2015, 10:35:59 am
If I can figure it out I'll fix it, otherwise it's not very important.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on June 05, 2015, 03:10:42 am
Indeed. By the way, have you gotten any luck with the member list?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on June 05, 2015, 07:38:45 am
Haven't tried. :P
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 22, 2015, 09:42:55 am
Update: I just made the navbar a lot more usable for mobile users. :)
If you don't get the changes right away, try reloading the page a few times.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on August 22, 2015, 10:02:35 am
It's indeed way better :) Thanks, Street
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 22, 2015, 10:08:32 am
Hehe, wasn't hard. I just disabled links and changed the z-index of the dropdown.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on August 22, 2015, 10:42:19 am
That is indeed much better, if you could make the link work the second time you click it that would be awesome.

I'd use JS to add onclick="return false" unless hover because I think that disables the redirect.
Title: Re: Making forum skin mobile-friendly
Post by: Duke "Tape" Eiyeron on August 22, 2015, 10:42:57 am
Disabling the links broke my habit but it's better than the original behaviour. Thanks.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 22, 2015, 10:44:26 am
Quote from: CKH4 on August 22, 2015, 10:42:19 am
That is indeed much better, if you could make the link work the second time you click it that would be awesome.

I'd use JS to add onclick="return false" unless hover because I think that disables the redirect.
It's actually doable in pure CSS, let me try.
Meh, doesn't work.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on August 22, 2015, 10:49:21 am
Yes it is, don't let things get too complicated like I do though :P.
(I like to use CSS for things that JS would be way better at and my code becomes a nightmare to figure out because I didn't use something that would make it way easier or because I used something improperly)

Also @Streetwalrus this isn't really specific to the mobile theme but you should use border or box shadow for button design since your button images are fairly simple. I had talked to dj about it a while ago but here's a mockup of the idea: http://codepen.io/CKH4/pen/emKMKq
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 22, 2015, 11:58:32 am
Sounds good, I'm too lazy to do it now tho. :P
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 22, 2015, 04:04:08 pm
There is a problem with the skin update. When you click Profile or My messages on mobile, one second later it clicks on forum or downloads by itself ??? (Basically it clicks both buttons within 1 second interval or less)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 22, 2015, 04:05:55 pm
That's odd. I have no idea why it would do that.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 22, 2015, 04:10:43 pm
I use latest Chrome on Android 5.1.1 btw and the bug usually happens on the next page after you clicked a navigation link that is still clickable.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 23, 2015, 07:56:00 pm
@Streetwalrus Fatal bug with the new theme update: The login and register buttons can no longer be clicked, so it's no longer possible to login to CW from the site navigation (or entirely on mobile, since the login box on the portal is not available on mobile).

I had to revert the changes  by commenting out your CSS, because it prevented people from logging in. This issue can be reproduced in Firefox and Chrome on Windows.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 23, 2015, 08:15:42 pm
Oh that, if you'd looked just below you could have fixed it. :P
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 23, 2015, 08:17:50 pm
How? O.O
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 23, 2015, 08:21:16 pm
You commented out 3 rules. The second one does the link disabling and the third one re-enables some links. Fixed it now.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 24, 2015, 01:28:12 pm
Oh OK. I didn't notice any specific numbers but maybe I didn't check carefully. :P

Anyway it works now it seems. :) The thing, though, is are the links CSS hard-coded or something? Because if we ever decide to change the navigation around and insert extra stuff between Downloads and About, for example, then wouldn't  links to the right become out of sync with the CSS?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 24, 2015, 01:49:22 pm
I made it so that links are disabled by default, and they're re-enabled with a per-id whitelist.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 24, 2015, 03:18:18 pm
Ah I see. That was my concern actually. If we shift them around we need to not forget to change the whitelist, to not lock people out without noticing. :P
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 24, 2015, 03:54:37 pm
The id is by name. Check the code out. :P You just need to not forget adding stuff to the whitelist or you'll wonder why it doesn't work.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 24, 2015, 05:38:49 pm
Ah I didn't know that each navigation options had individual names.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on August 24, 2015, 09:53:46 pm
You could do a nextsibling subitems (or whatever) JS selector. That may make things more automated while still allowing the whitelist.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 25, 2015, 12:57:45 am
But what about people who have javascript disabled? :P
Title: Re: Making forum skin mobile-friendly
Post by: Unicorn on August 25, 2015, 04:30:20 am
More specifically, me! On my kindle. As long as there is an option for a regular theme without any crazy new stuff, I'm good. :)
Title: Re: Making forum skin mobile-friendly
Post by: c4ooo on August 25, 2015, 01:19:53 pm
Hmm... On my iPad CW is actually good looking. In fact it is practically identical to how it looks like on my PC. When i use an iPhone, however, which had a much smaller screen, then the site starts looking ugly, because the sides of the page are adhered to the sides of the screen, so on a smaller screen the different texts and buttons and stuff turn into a jumble thats a pain to the eye.  On a similar note, when I turn my iPad right side up, so that it is taller then it is wider, the active posts page becomes unpleasant to read.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 25, 2015, 01:24:56 pm
Any screenshots? One major problem on mobile devices is that text adjusts its size based on some rather unlikely things, which can make it challenging to make a forum theme look decent on mobile without removing too many features. But iDevices tend to be garbage when it comes to web standards and third-party software.

As for the smaller screens, under a certain resolution the site is set to hide the side bars. Personally I would like the recent posts page to have smaller text, but I don't think it's possible to have control on text size on mobile devices.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 25, 2015, 01:39:30 pm
That sounds weird, I use CSS3 mediaqueries to adapt the site design to smaller screens, I suspect that mobile safari doesn't support it, or at least you're on an older version that doesn't.
Title: Re: Making forum skin mobile-friendly
Post by: c4ooo on August 25, 2015, 01:43:45 pm
Here are two images:(https://codewalr.us/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FQGi1aSr.jpg&hash=6a1d5af517a86a1a0793413d1717eef1).
(https://codewalr.us/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FhqbXfYl.jpg&hash=a5d9ff6721d3e5133e797a8e6cf4a72b)

It looks a hell of a lot worst on smaller screens. On an iPhone the avatar is on the right and the buttons are somewhere in the middle, and the text is all over the place.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on August 25, 2015, 01:44:34 pm
Didn't you check if the schreen is smaller than 500 pixels or something? isn't iphone wider than 500 pixels?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 25, 2015, 01:54:46 pm
At 1024px it should make the page full width and enable responsive image scaling, at 490px it should switch to a nicer on column layout. Try it in a desktop browser by making your window narrower for comparison.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 25, 2015, 05:22:56 pm
Ideally i would like if  recent posts only took 1 line each instead of two.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 25, 2015, 11:30:36 pm
It's because of the table layout, the only way to fit it on one line is to hide the text that doesn't fit.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 26, 2015, 01:07:18 am
That sucks. I wish there was a workaround that didn't involve hiding text.

That said, I find the site much easier to browse on mobile than it used to be a few months ago.


EDIT: Also I am almost tempted to make the site show a red warning at the top of the page for iOS users that encourages them to upgrade to the much more web-compliant Windows browser called Internet Explorer 6 so that they don't miss out on CW functionalities. :P
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 28, 2015, 05:05:29 pm
Something I noticed is that on Chrome mobile, sometimes the navigation links are still clickable like before, then other times they aren't. Is that normal?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 28, 2015, 05:07:32 pm
I have no idea, I noticed that firefox is kind of wonky when aiming at a menu that has an active link next to it as well. Guess the CSS thing I did is not well supported. :P
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 28, 2015, 05:12:16 pm
Weird as well. That said I think I noticed that the clickable area of links more to the riggt is slightly off by a couple of pixels in Windows Chrome and Opera. Maybe that's the same issue that you are having?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 28, 2015, 06:38:39 pm
Not really, it's just that it likes to click the nearest link instead of bringing up the menu, unless I zoom in a lot.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 28, 2015, 09:28:12 pm
Aah ok. Good thing you don't have an iDevice because the iPod Touch 4 had a very innacurate touchscreen that required zooming in to maximum in order to click the right link >.<
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on August 28, 2015, 11:03:21 pm
That's pretty much what happens, but usually my touchscreen is very accurate.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on August 29, 2015, 03:09:31 am
yeah I never had issues with any Android phone touchscreens.
Title: Re: Making forum skin mobile-friendly
Post by: c4ooo on September 01, 2015, 02:22:13 am
Btw, here is codewalr.us on an iPhone 5:
http://m.imgur.com/GDno4FK,3bvRoxs,1m1EFZh
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on September 01, 2015, 02:27:12 am
That's pretty normal actually. The site theme was adapted to hide less necessary stuff (eg post counts) and move other essential stuff elsewhere to ensure that post content takes the entire page width.

If you have any CSS edit you could suggest that is neither Tapatalk, a single-site app nor a third-party theme then feel free to suggest them. Of course we can't please everyone, though.

Could you post a screenshot of how WalrusIRC looks like? By the way, you can also access the chat from IRC at EFnet, just like Omnimaga and Cemetech
Title: Re: Making forum skin mobile-friendly
Post by: c4ooo on September 01, 2015, 02:38:20 am
Here is wirc:
http://m.imgur.com/eJSoQ5F,C7m8LKN
While the page is loading the type box is there, but when the page finishes loading the type box disappears. There is no scroll bar, and the messages are behind time. Also, yes I do know about Efnet and stuff, I was on #codewalrus the day I joined, remember?  :blah: :D
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on September 01, 2015, 02:42:19 am
So basically the box does show up. Now to investigate about why it disappears outside of the view. Something probably makes it move up, down or on the sides (most likely down).

And yeah I was suggesting since you never went on IRC again after the day you joined. :P
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on September 28, 2015, 11:05:51 am
I just made a couple minor visual improvements on the mobile skin. Added vertical padding on buttons so that the rows aren't right against each other, and made the font on page numbers bigger so that they're easier to click with fingers.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 02, 2015, 03:11:45 am
Now I see why some stuff seemed to have changed lol. I didn't see this topic until now.

Do you think something can be done about misaligned lists of stuff and stuff that is off-screen? For example, in your inbox the text above the PM list is not aligned and there are missing options. Would adding scrollbars to those cause Google to see the site as not mobile-friendly?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 12, 2015, 03:14:30 pm
Not sure about that. I don't really see a point in adding scrollbars, in my experience they tend to be extremely painful to use in mobile browsers.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 12, 2015, 10:04:28 pm
If the issue is on desktop then you can use a media query to omit the mobile site.
Title: Re: Making forum skin mobile-friendly
Post by: Snektron on October 13, 2015, 06:50:38 am
Would it be possible for the recent posts menu to show up if you swiped right on the main page?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 13, 2015, 06:55:01 am
Nah there are glitches in the mobile version because I didn't take the time to do some things properly and I didn't check every page either. There's also the problem of some tables being too wide, while I can hide some columns, some still won't fit in the page. DJ suggested adding a horizontal scrollbar to these instead of letting the whole page overflow but as I said these never work on mobile browsers.

Cumred: that would require some JS I think.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 13, 2015, 02:11:07 pm
If you add tables inside of a div set to width: 100%; overflow: auto; that should solve your problems.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 14, 2015, 03:14:30 am
Quote from: Streetwalrus on October 12, 2015, 03:14:30 pm
Not sure about that. I don't really see a point in adding scrollbars, in my experience they tend to be extremely painful to use in mobile browsers.
True, although ideally it would be more professional if our content didn't go outside the screen. It's actually slowly getting worse when our page views per day and user counts increase, because now if you check board stats, we barely can even see one digit in page views.

@CKH4 ideally, we need a solution that only involves adding CSS, not tables, unless you suggest adding CSS to the current tables. It wouldn't hurt to try your trick, though, although it would be better if you explained further what you mean. Thanks for the suggestion :)
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 14, 2015, 06:27:59 am
Quote from: CKH4 on October 13, 2015, 02:11:07 pm
If you add tables inside of a div set to width: 100%; overflow: auto; that should solve your problems.

As I said I won't do that, it's unusable in mobile browsers.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 14, 2015, 06:26:03 pm
@DJ Omnimaga

Here (http://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css) is a guide that demonstrates it pretty well but here is my own thinking:

Code ("New HTML") Select

<div class="table-wrapper">
  <table style="width:100%">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>


Code ("css") Select

.table-wrapper {
  max-width: 100%;
  overflow: auto;
}


And you could automate the div wrapping (maybe there's a config in smf) in jquery (the native JS version sucks but I'll try to figure it out):
Code ("jquery") Select

$('table').wrap('<div class="table-wrapper"></div>');


Pure JS. Answer from here (http://stackoverflow.com/questions/6838104/pure-javascript-method-to-wrap-content-in-a-div):
Code ("javascript") Select

old_table = document.getElementByTagName("table").innerHTML;
new_table = "<div class='table-wrapper'>" + table + "</div>";
document.getElementByTagName("table").innerHTML = new_table;




Quote from: Streetwalrus on October 14, 2015, 06:27:59 am
Quote from: CKH4 on October 13, 2015, 02:11:07 pm
If you add tables inside of a div set to width: 100%; overflow: auto; that should solve your problems.

As I said I won't do that, it's unusable in mobile browsers.

What mobile browser? It works for me as far as I know.
http://codepen.io/CKH4/pen/BowWgw
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 14, 2015, 08:17:10 pm
It works but often the browser will not trigger the right scrollbar. On a desktop browser this can be fixed by clicking  the area you want to scroll but on mobile browsers there's no such thing.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 15, 2015, 01:24:10 am
Eh that sucks. It works fine in chrome on mobile and opera on mobile. To get it to work on only chrome and opera you can do:


@media not all and (-webkit-min-device-pixel-ratio:0), (pointer: fine), (pointer: coarse) {
  .table-wrapper {
    overflow: auto;
  }
}

And omit that line from the previous code. No ill effects should come from it.
Title: Re: Making forum skin mobile-friendly
Post by: Araidia on October 15, 2015, 02:08:42 am
Does the WalrusIRC work in the mobile site?
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 15, 2015, 03:04:50 am
Quote from: CKH4 on October 15, 2015, 01:24:10 am
Eh that sucks. It works fine in chrome on mobile and opera on mobile. To get it to work on only chrome and opera you can do:


@media not all and (-webkit-min-device-pixel-ratio:0), (pointer: fine), (pointer: coarse) {
  .table-wrapper {
    overflow: auto;
  }
}

And omit that line from the previous code. No ill effects should come from it.
Is there a way to get it to work in Firefox mobile?
Quote from: Araidia on October 15, 2015, 02:08:42 am
Does the WalrusIRC work in the mobile site?
Yes, but not on iOS because Apple is absolute garbage when it comes to browser policies and compatibility.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 15, 2015, 01:13:57 pm
Sorry DJ but I don't think so. Firefox mobile uses a different scrolling engine. Personally I'd be fine with it but I guess that's because I never use ff mobile. You could still enable it for chrome and opera though.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 15, 2015, 03:13:58 pm
I gave up on Firefox mobile, the performance is horrible and it's full of bugs. Instead I'm building Chromium with a few patches of mine.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 18, 2015, 04:24:50 am
Seriously, all those browser differences really makes it hard to keep a website cross-compatible, especially now with all those mobile devices. The best is to keep standard features with a responsive theme with the essential stuff
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 18, 2015, 01:20:00 pm
Well Firefox and Chrome are actually a good thing for browser compatibility since they're straight ports of the PC versions to Android. There are a few compatibility issues but they're not too numerous. It would help if the standards were stricter to make browsers more compatible. There are some things like percentage width/height inside a table that do not work in Firefox on purpose (a table cell is supposed to fit to content, it doesn't have a fixed size which is why they do that) while Chrome and Safari do actually allow doing it because the table cells have a max width defined by the browser window. In that regard Firefox is the most compliant.
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 18, 2015, 05:17:53 pm
Quote from: Streetwalrus on October 15, 2015, 03:13:58 pm
I gave up on Firefox mobile, the performance is horrible and it's full of bugs. Instead I'm building Chromium with a few patches of mine.

That's strange. It works fine on the regular build of chrome. Its still based off of chromium right?
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 18, 2015, 05:19:44 pm
Yeah actually, it works a lot better in chrome than in firefox, I might give it a shot. I must say I'm still in post trauma from using that piece of crap (firefox is so great on the desktop, how the hell could they screw up their port ?).
Title: Re: Making forum skin mobile-friendly
Post by: CKH4 on October 18, 2015, 05:32:53 pm
Quote from: Streetwalrus on October 18, 2015, 05:19:44 pm
Yeah actually, it works a lot better in chrome than in firefox, I might give it a shot. I must say I'm still in post trauma from using that piece of crap (firefox is so great on the desktop, how the hell could they screw up their port ?).

I do wonder because ff on desktop feels really smooth but on mobile it feels really bloated and difficult to use.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 18, 2015, 05:35:15 pm
I actually missed a couple features from firefox when I switched to chrome at first but it's not too bad.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 18, 2015, 09:41:17 pm
Something to look into for the site would be to move the vote buttons a bit away from the Quote button, because people have been misclicking the downvote button instead of quoting lately. I might apply this change to non-mobile browsing, though.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on October 19, 2015, 08:26:31 am
Fixed (see the thread).
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on October 27, 2015, 08:16:10 pm
They are still a bit close in mobile mode, though, hence my idea of moving them a bit further to the left (only in mobile view). The main issue is that in mobile view there is no text.

Also it seems that the site navigation has the same issue that the voting buttons had. The clickable area is a bit off, so it's another thing we might want to look into.

We also need to make the sidebars on the front page show up at the bottom of the news feed or board stats, so that this content isn't missing from mobile view, while still keeping news full-width and at the top.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on November 23, 2015, 04:16:43 am
By the way, should we hide the individual boards/child boards topic/post counts on mobile view? Since we use the clone topic mod, the totals are inaccurate anyway since some topics appear in multiple sections. I was also contemplating making it like on yAronet, where it says t and p instead of topics and posts.

Also we really need to find a way to fix the content going outside the screen issue on mobile, since it makes some sections unuseable. After all, Cemetech managed to do it fine.

And of course we need to bring back the sidebars on the front page and board stats page, but have them show up below everything else. Cemetech does it with their sidebar in some ways and it's quite handy.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on January 20, 2017, 12:58:21 am
So @Streetwalrus , on mobile I think the logo should be moved down by a few pixels, since the navigation overlaps on it and hides parts of it.
Title: Re: Making forum skin mobile-friendly
Post by: Streetwalrus on January 20, 2017, 01:54:56 am
Good catch, I never thought it was a problem up til now. This should do the trick.
Title: Re: Making forum skin mobile-friendly
Post by: DJ Omnimaga on January 20, 2017, 06:07:49 am
Yup, it looks much better now. Thanks :D