We're on Discord! Please join our server now if you don't want to miss anything! (More info) | Join the UCC4 contest! (More info)

* WalrusIRC & Discord main room

If you have a forum account, have more than 4 posts and are not part of a restricted usergroup, then you can chat in our main Discord server room directly from here and continue using the forums at the same time. Or you can join our server directly and access many more discussion rooms!

Author Topic: Making forum skin mobile-friendly  (Read 41783 times)

0 Members and 1 Guest are viewing this topic.

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3264
  • Post Rating Ratio: +39/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Making forum skin mobile-friendly
« Reply #15 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.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #16 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.

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3264
  • Post Rating Ratio: +39/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Making forum skin mobile-friendly
« Reply #17 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
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #18 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:


I'm getting there. I just need to figure out width adjustments for this view and it'll be awesome.
« Last Edit: May 08, 2015, 03:38:08 pm by Streetwalrus »

Offline xlibman

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Moderator
  • Forum Maintenance
  • Original 5
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 19071
  • Post Rating Ratio: +101/-5
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #19 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
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! :)
« Last Edit: May 08, 2015, 03:50:45 pm by DJ Omnimaga »
  • Calculators owned: TI-84 Plus C Silver Edition, TI-84 Plus CE, Casio fx-CG10
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nintendo Switch, Playstation TV

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #20 on: May 08, 2015, 03:51:22 pm »
Oooh I like the result so far :O. But sig images should have a lower max height :P
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. ;)

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #21 on: May 08, 2015, 05:13:59 pm »
Uh oh
  • Calculators owned: TI-83+, TI-84+


Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #22 on: May 08, 2015, 05:14:34 pm »
Yeah the header is borked, I'm working on it. Gonna hide some stuff in there.

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #23 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.
  • Calculators owned: TI-83+, TI-84+


Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #24 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.
« Last Edit: May 08, 2015, 05:25:59 pm by Streetwalrus »

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #25 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.
  • Calculators owned: TI-83+, TI-84+


Offline xlibman

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Moderator
  • Forum Maintenance
  • Original 5
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 19071
  • Post Rating Ratio: +101/-5
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #26 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:

  • Calculators owned: TI-84 Plus C Silver Edition, TI-84 Plus CE, Casio fx-CG10
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nintendo Switch, Playstation TV

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #27 on: May 08, 2015, 06:15:33 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.

Also if you could make the full post editor text box 100% width that would be easier to type.
Will do.

Offline Unicorn

  • ??? ??? ??? ??? ???
  • Super User
  • CW Contest II - 2nd place
  • *
  • Join Date: Jan 2015
  • Location: ??? ??? ??? ??? ???
  • Posts: 2830
  • Post Rating Ratio: +5/-2
  • make :PICKACHUP: a thing!
    • Unicorn808
    • 114/11432
    • ??? ??? ??? ??? ???
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #28 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.
  • Calculators owned: I own all of them: PICKACHUP TI 84+ CSE TI 83+ SE TI something something ??? ??? ??? ??? ???
  • Consoles, mobile devices and vintage computers owned: PICKACHUP ??? ??? ??? ??? ???



??? ??? ??? ??? ???

Offline Streetwalrus

  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 2903
  • Post Rating Ratio: +20/-0
Re: Making forum skin mobile-friendly
« Reply #29 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.

 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games