Spiral Knights - I made responsive CSS for the SK forums

I made responsive CSS for the SK forums

14 replies [Last post]

Sat, 06/18/2016 - 18:32

Sir-Pandabear

Please use it. Browsing this place on mobile devices is a pain right now.

Here are screenshots:
https://imgur.com/a/RrevN
https://imgur.com/nIAchJr Footer redone after some prompting.
http://www.giphy.com/gifs/3o6gDQHaqxQhGmNAYg Header redone after my own initiative.

Here's the CSS:
https://github.com/zeddidragon/sk-forums-responsive-css/blob/master/sk-f...

All of it is wrapped in a media query so that no changes will appear on browser windows larger than 960 pixels.

I use a div + selector a lot because I tested this using chrome extensions, and chrome says that if you try to override an attribute of an existing selector, you're not allowed to. div#id is more specific than just #id, so that worked out.

In addition to using the css file, you will have to put a viewport tag into the head tag somewhere. It looks basically like this:

< meta name="viewport" content="width=device-width; initial-scale=1" >

The tag tells views that your site design has thought about mobile views and they don't have to zoom out to fit all of the page in.

Some things I chose to hide outright rather than fit into the design. These are:

Post/topic count on forum index. (Number of replies in forum post index still there.)
Topic creator on forum post index, which I think is less interesting than last reply.
Search box. It was not very helpful.
The Spiral Knights logo itself was an unfortunate victim of the resizing. Due to it being baked into the large background, there's just no way to preserve it correctly. If this is a hindrance to using the CSS for the forums, please get in touch with me and we could discuss a solution.

The extension is hosted on Mozilla's official AMO, for use with Firefox mobile: https://addons.mozilla.org/en-GB/android/addon/mobile-sk-forums/

It is more or less standard web extension api, so any browsers supporting that should be able to make use of it.

Github repo: https://github.com/zeddidragon/sk-forums-responsive-css

Sun, 06/19/2016 - 06:16

Ethrie

Looks nice!

If you accept some nitpicking, personally I would try to rescale the footer logos (percentage based maybe), they don't need to be that big to take almost the whole screen width. They would look better slightly smaller, next to each other.

Also, this is exactly what I was mentioning somewhere else on this forum: the people in the community can actually help! GH only need to let us! We have you as a web page editor, and as far as internet goes there must be at least a few people here with java programming experience to fix the game's bugs.

Sun, 06/19/2016 - 08:51

Sir-Pandabear

I am also a hobbyist game developer with formal education in Java

The footer I didn't care too much about but I will see about adjusting the icon size tonight.

Sun, 06/19/2016 - 14:28

Sir-Pandabear

I added some improvements to the footer. There wasn't an elegant way to shrink the logos, but the structure is cleaner and more consistent now.

Sun, 06/19/2016 - 14:29

Sir-Pandabear

Oh my, I appear to have made a double derp.

Sun, 06/19/2016 - 17:51

Fehzors-Forum-Alt

0/10 too much effort required from devs will never make it into the game hack the forums and insert it yourself if you want to see it in action

Wed, 06/22/2016 - 15:32

Irthan

At the very least it could be

At the very least it could be made into a Greasemonkey script. That would give partial user coverage.

EDIT:
And now I derped. Greasemonkey doesn't quite work for mobile.

Wed, 06/22/2016 - 16:10

Crazee-Pi-Forum

Remember, don't shoot food.

Forums on mobile already work perfectly fine for me, no thank you.

Also this doesn't belong in suggestions.

Fri, 06/24/2016 - 03:16

Sir-Pandabear

@Crazee-Pi-Forum

Which part are you fine with? Reading tiny text or panning horizontally all the time? So far my strategy has been to hold the phone sideways using both hands and then zooming so that exactly only the text parts are visible and repeating this process every single page load.

I think the mobile experience could be improved.

And where does this belong? I tried asking others before posting and everyone seemed to agree on suggestions.

Sat, 06/25/2016 - 14:46

Sir-Pandabear

I am now using this on my own phone. You can too:

You'll need a browser that supports user scripts. I now use Sleipnir.
Visit the script:
https://zeddidragon.github.io/sk-forums-responsive-css/sk-forums-mobile....
If your browser is anything like mine, you'll be asked to install it. No special permissions should be required.

Enjoy!

Sat, 07/02/2016 - 13:17

#10

Sir-Pandabear

I've been using my sleipnir extension for about a week now and have been fairly pleased with it. One thing I found myself thinking was that the header was far too big and ugly. I've straightened out the account menu and packed the navigation into a hamburger menu.

The button is sort of weirdly placed because I used pure css and hover styling for it, but a happy coincidence I just discovered is that when you get your virtual keyboard out the menu button gets out of the way.

I'll keep using it for myself, and if anyone has any input I'm happy to hear it.

Tue, 12/17/2019 - 09:55

#11

Sir-Pandabear

A problem with this extension was having to use some weird Japanese browser, but Mozilla Firefox now supports extensions, so it's considerably more accessible!

If you're not already using Firefox on mobile, you probably should. I don't know any other phone browsers where you can get adblockers.

OP has been updated with a link to the Firefox AMO.

Tue, 12/17/2019 - 21:38

#12

Flowchart

I use Kiwi Browser for extensions (on Android, since that's what you linked to. Not sure about the iOS world but I doubt Apple would allow such a thing.)

Thu, 12/19/2019 - 23:57

#13

Batabii

Not sure why "view desktop page" doesn't work...

Thu, 12/26/2019 - 07:37

#14

Sir-Pandabear

@Batabii

I can explain by describing an experiment in which you recreate the experience of doing that:

1. Produce a playing card. This will approximate the size of my phone and most people's phones.
2.Hold it up to your monitor.
3. Walk backwards, still holding the card up, until the card covers your monitor.
4. Now read the forums.

@Flowchart
I haven't heard of that one before! Do you know what I'd have to with my plug-in to make it usable for you?

Search

I made responsive CSS for the SK forums