Join us on Discord!
You can help CodeWalrus stay online by donating here.

Making forum skin mobile-friendly

Started by Dream of Omnimaga, January 14, 2015, 07:09:14 AM

Previous topic - Next topic

0 Members and 4 Guests are viewing this topic.

novenary

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

#136
@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
  • Calculators owned: TI-83+, TI-84+


novenary

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

#138
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.
  • Calculators owned: TI-83+, TI-84+


Araidia

Does the WalrusIRC work in the mobile site?
  • Calculators owned: TI84+ CE

Also Known as: Soul | Enguard

Dream of 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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

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.
  • Calculators owned: TI-83+, TI-84+


novenary

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.

Dream of 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
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

novenary

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?
  • Calculators owned: TI-83+, TI-84+


novenary

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.
  • Calculators owned: TI-83+, TI-84+


novenary

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

Dream of 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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Powered by EzPortal