Mobile design!

[Kenny2github]

Mobile design is under way for the Scratch Wikis. You can see a public draft of the mobile design here: https://hkugawiki.ddns.net/test/Main_Page

Please comment with any issues or suggestions.

Checklist:

• [x] Hide the sidebar on narrower screens
• [x] Have some way to show it
  • [x] Make the way to show it obvious to new visitors
  • [x] Add new translation strings for the tutorial
• [x] Hide header and footer elements to fit the screen width

[mtwoll]

looks good!

[LiFaytheGoblin]

Can someone else review? I'll have time on Sunday but not before...

[Kenny2github]

@LiFaytheGoblin it's ok if you review on Sunday, since I was thinking you would review during Scratch Club.

[LiFaytheGoblin]

I'm in EST time zone till October so I can't join the Scratch Club till then. I'll review it on Sunday then. I'll let you know if something comes up.

[mtwoll]

I had a brief look at it and liked what I saw, so I‘m still at vacation in Denmark.

[Kenny2github]

@LiFaytheGoblin ping!

[LiFaytheGoblin]

Sorry, I was unexpectedly moving on Sunday so I didn't have time. Later this week!

[LiFaytheGoblin]

I checked out the website you linked to. It looks pretty good so far. The log-in menu is not quite in the view for me tho. Is there a way I can test this locally or would I need to set up a wiki?

[Kenny2github]

@LiFaytheGoblin The login menu isn't in the view? What width is your screen? and OS&browser?

EDIT: ah, it happened to me too, I wasn't hiding enough links. Is it fixed for you?

[Kenny2github]

Okay, I've added the tutorial for mobile users about swiping for the sidebar. Could someone make sure it works on their own device? :p

[mtwoll]

works for me at iOS! :-)

[apple502j]

https://github.com/InternationalScratchWiki/ScratchWikiSkin2/blob/mobile/ScratchWikiSkinTemplate.php#L345 Error "Cannot set property 'innerHTML' of undefined"

This seems to occur when we change responsive mode and normal mode

Is it all right since nobody except for developers will get it?

On Windows 10, Chrome 68

[apple502j]

On Windows 10 Chrome 68 Responsive Mode

"wipe left to hide it" S is hidden in iPhone 5 landscape

[apple502j]

There should be a way to skip the tutorial via URL.

[Kenny2github]

@apple502j fixed first two problems; but no, there doesn't need to be a way to skip the tutorial.

[LiFaytheGoblin]

Looks good now thanks!

[apple502j]

@Kenny2github And we also need a way to force desktop skin, via link or preferences

[Kenny2github]

@apple502j no, that doesn't work. You're thinking of MobileFrontend, which detects browser and OS details to present a different skin. This is responsive design, which is almost pure CSS and cannot be customized with a query parameter.

[Kenny2github]

@jacob-g any comments?

[apple502j]

One more: qqq is missing...

[Kenny2github]

@apple502j Done

[Kenny2github]

jvvg gave the OK on Discord. Time to merge!