Making forum skin mobile-friendly

u/novenary 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.

u/CKH4 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

Last Edit: October 14, 2015, 06:38:04 PM by CKH4

u/novenary 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.

u/CKH4 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:

Code Select


@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.

Last Edit: October 15, 2015, 01:26:19 AM by CKH4

u/Araidia October 15, 2015, 02:08:42 AM

Does the WalrusIRC work in the mobile site?

u/Dream of Omnimaga 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:

Code Select Expand
@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.

u/CKH4 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.

u/novenary 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.

u/Dream of Omnimaga 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

u/novenary 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.

u/CKH4 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?

u/novenary 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 ?).

u/CKH4 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.

u/novenary 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.

u/Dream of Omnimaga 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.