Alternatively, join us on Discord.

Making forum skin mobile-friendly

Started by DJ Omnimaga, January 14, 2015, 07:09:14 am

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Streetwalrus

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.

CKH4

October 14, 2015, 06:26:03 pm #136 Last Edit: October 14, 2015, 06:38:04 pm by CKH4
@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


Streetwalrus

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.

CKH4

October 15, 2015, 01:24:10 am #138 Last Edit: October 15, 2015, 01:26:19 am by CKH4
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.


Araidia

Does the WalrusIRC work in the mobile site?

Also Known as: Soul | Enguard

DJ Omnimaga

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.

CKH4

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.


Streetwalrus

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.

DJ Omnimaga

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

Streetwalrus

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.

CKH4

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?


Streetwalrus

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 ?).

CKH4

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.


Streetwalrus

I actually missed a couple features from firefox when I switched to chrome at first but it's not too bad.

DJ Omnimaga

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.

Powered by EzPortal