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 3 Guests are viewing this topic.

CKH4

Can you add a switch to desktop button?
  • Calculators owned: TI-83+, TI-84+


novenary

#46
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.

Dream of Omnimaga

I agree. If some features are really wanted back on mobile, then we can always bring them back in different format, such as icons.
  • 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

Snektron

Tbh i kinda miss the recent posts bit :(
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


novenary

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.

Dream of Omnimaga

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

  • 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

I have no idea, idk php. :P All the changes I did are pure CSS with two minor edits to the template HTML.

Snektron

Php is not that hard. Its basically a bad version of the core components every language has
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


novenary


Dream of Omnimaga

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

Iirc I can't change the member list too much without editing the php. I'll have to look into that.

Dream of Omnimaga

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?
  • 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

Hmm I dunno, it's a friggin table. <_<

Dream of Omnimaga

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

Snektron

#59
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 :)
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


Powered by EzPortal