Feature Draft: Responsiveness

Introduction

Currently the styles are written without specific media queries for mobile screen sizes. It would be awesome if mobile users can use Offcourse, or at least part of it. This specification is on how to do this.

Tech

Currently there are 10 breakpoints defined in the configuration of the stylesheets. While these are mostly used for typographic definitions, the lowest few need specific attention, changing the layout. Most modules are already defined in a flexible manner, but some have a fixed width or are compressing the content beyond recognition. Mobile screen sizes also have different UI/UX concerns in some cases. For instance to keep the collection pages easily browsable it might be desirable to hide some content on the card, and make it available on click/tap.

Docs

These are changes to the styles: Check the modules of the style guide. Also check the Styles section of the docs for general information about the styles. Thirdly check the contribution workflow.

Todo

• Check one or all modules for responsive issues
• Try to resolve them without media queries if possible
• Switch to adding a media queries if the layout needs to be significantly changed
• Implement UI/UX concerns, like collapsable on hover/active.
• Test you implementation on all screen sizes and zoom levels.
• Write up to contextualize your changes and submit a pull request

As this feature could also be split up into multiple pull requests, depending on you knowledgeability with this issue, you could also choose to submit this on a module by module basis and ask for reviews on specific code changes.

Contribution Specifics

Deliver via pull request to the the offcourse-frontend repository.

Knowledge requirement: Basic Clojure and Garden + Advanced (modular) CSS
Time requirement: approx. 1 day.