Projects page has nice layout and there is filtering

[rufuspollock]

part of #46

• nice layout
• filter
• sort

implement

use isotope plus masonry

[loleg]

I haven't changed the layout very much, just gave it a tidier look - and added filtering by Featured, Help wanted, Language, Type and Tags. I'm not sure that sorting will be very useful, probably just by last update is good enough for most uses.

[rufuspollock]

@loleg so looks good so far but think we want further improvements:

• It would be nice to be able to apply filters together (not sure I can atm) e.g. show me all featured projects written in Javascript
• UI could look a bit nicer (maybe use bootstrap button groups - http://getbootstrap.com/2.3.2/components.html#buttonGroups) - this is what isotope is doing in its demo i think
• featured seems buggy in that if i switch it off and then on again the page seems blank

I also wonder whether we should display some of this info on projects separate from filter especially, should we somehow badge:

• featured projects
• helpwanted projects
• retired projects (grey them out somehow?)

This way even when i'm looking at all projects I know which ones are retired or featured.

Lastly: anyway we can get the funky animation that isotope does on its filtering (with stuff moving around) ;-)

[andylolz]

featured seems buggy in that if i switch it off and then on again the page seems blank

There are currently no featured projects, so the page should be blank. The bug is actually with the initial filter.

[andylolz]

UI could look a bit nicer (maybe use bootstrap button groups […])

+1. This will work well for ‘featured’, ‘help wanted’ and ‘type’, but perhaps not for ‘tags’ (where there is no predefined set of options to choose from).

[rufuspollock]

But couldn't you just pull down the complete tag list? For other I was imagine buttons styyle for them all so:

• Featured: one button that is on off
• Help Wanted: one button that is on/off
• Language becomes a list of buttons each which can be on/off (so i can show just JS and python). All would be selected by default (i.e. show all languages)

etc

[andylolz]

But couldn't you just pull down the complete tag list?

You can.. it's just quite a lot for a button group. An autocomplete would be better - it's a shame they took typeahead out of bootstrap.

[andylolz]

Take a look at this branch, @rgrp. The javascript is simplified, but the tag and language filters look a bit messy.

[rufuspollock]

@loleg are you planning to do any more here?

[loleg]

@andylolz I had a look and am not convinced by the way those buttons look and work, even if restyled they don't add much to the simple, quick, responsive old selects. Which could be also be just checkboxes or multi-selects.

@rgrp am unfortunately not able to commit any time in the next two weeks.

[andylolz]

@loleg I tend to agree. They do add the ability to apply multiple filters, but I’m not convinced that’s so important, and they don’t look good in that branch at present.

In terms of UX, rather than using custom styled tabs with selects acting like dropdowns, we could instead use bootstrap dropdowns.

Alternatively, I think my preferred option would be to use the “multiple select with groups” bit of Chosen. I’ll have a go at implementing that now.

[rufuspollock]

@andylolz @loleg - sorry I'd issed the PRs here. I will review the chosen PR but my feeling on use here is that I do want to be able to apply different combinations of filters e.g.

• show me all featured projects written in javascript (javascript on AND featured on)
• show me all projects written in python and javascript (javascript OR python (or implied by fact that are from same category ...)
• show me all helpwanted projects written in javascript or python

Overall: AND operates across categories and OR within categories

@andylolz I get the sense that this proposal is closer to the UX provided by button groupings than the chosen option (?). If so perhaps we should work on improving that. Alternatively we want dropdowns with checkboxes ... (but that may get quite painful ...)

[andylolz]

I hadn’t thought of doing 'or' within categories. That sounds good.

The Chosen option already has combinations of filters… The logic just needs changing to do 'or' within categories.

[rufuspollock]

@andylolz ok - i'm going to merge the chosen PR in right now!

[loleg]

@andylolz well done, the filtering looks/works wonderful

[rufuspollock]

@andylolz as mentioned on the PR - one small thing: i think we should immediately update the filtering when someone adds or removes a filter rather than waiting for them to hit "filter" button (i kept waiting for things to change and couldn't understand why nothing was happening!)

Other than that I think we could close :-)

[rufuspollock]

@mchelen work here fixes this i think!

[rufuspollock]

FIXED. Awesome work @loleg @andylolz @mchelen