Dear visitors and members, with the staff having moved on to other life interests and as a result of changes in people's internet usage habits, the CodeWalrus community have migrated almost entirely to Discord, IRC and WalrusIRC and is now essentially a place where to hang out, chat about gaming, programming, music, anime, and chill. As a result, even though the CW forums will remain open for posting, for faster TI, Casio or HP calculator help and news we recommend using the bilingual TI-Planet forums instead.

We encourage everyone to join our Discord server now.

* WalrusIRC

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: Making forum skin mobile-friendly  (Read 31765 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: 3171
  • Post Rating Ratio: +36/-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
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
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: 3171
  • Post Rating Ratio: +36/-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
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
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
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18969
  • Post Rating Ratio: +100/-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-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

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
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18969
  • Post Rating Ratio: +100/-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-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

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: 2827
  • 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