Port module finder page to v3

[yangshun]

From @yangshun on September 11, 2016 15:1

• [ ] Search options section
• [ ] Active filters section
• [ ] Module results section
  • [ ] Module info
  • [ ] CORS and IVLE link
  • [ ] Filter by dept (we can leave out filter by module credits)
  • [ ] Add to semester
  • [ ] Bookmark (leave out first)
  • [ ] Change to pagination (page size 30) instead of infinite scrolling
• [ ] New: Sync pagination/sorting/filtering state with URL params

Copied from original issue: nusmodifications/nusmods-v3#3

[yangshun]

Might be useful:

• https://medium.com/@alitorbati/death-to-complexity-how-we-simplified-advanced-search-a9ab2940acf0#.k28kkvb1m
• https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

[li-kai]

Surprisingly a lot of what I had written this morning matched the first article's implementations.

Codepen Mockup

Filter design

• On mobile, filter is now a button like in the first article's example; which opens into...
• a carousel on desktop
• Use a dropdown if number of choices exceed 7
• Enable search if number of choices exceed 15
• Convert checkboxes to large buttons for UX and mobile
• Use a histogram and range slider for hours with Airbnb's open source React component
• Use chips/tags to enable removal of filters more easily on desktop

Card design

• Display most important, prominent information with larger headings and prominence
• Add a little color to make information easier to process (Not done)
• Partition information so that scanning is a top-to-bottom, left-to-right process.
• Not more than 7 pieces of data per card so prioritize.

[yangshun]

Closed in favor of #426 . @ZhangYiJiang do have a look and see if there's anything useful here that you would like to add to #426

[ZhangYiJiang]

Already did, thanks :+1: