Create project filtering on HFLA Home Page

[ashlingam]

Create project filtering on home page that allows for filtering by programming language, location, and project status. This filtering replicates the functionality found on the Projects List page as wireframes earlier.

[StephenVNelson]

submitted this pull request to add filters to the front page.

[ExperimentsInHonesty]

this issue has a pull request is we need to determine where it fits in the redesign

[yuikomajima]

Filter items discussed on 5/3/2020:

1. Topic
2. Location
3. Language
4. Framework
5. Status
6. Site
7. Open Roles

[yuikomajima]

Hi @harishlingam @ExperimentsInHonesty , I did a draft wire here showing 2 things. For the sake of time I used Harish's mockup and includes wires on top of the mockup for the filters.

1. How a grid may look like. Left wire is 3 column grid, right side is 2 columns but a bit more compact than what we have.

Question: is there a character limit for these cards? If we are maintaining the current copy, going smaller than what we have now is a bit hard.

2. 2 types of filters. The left side would be individual dropdowns with smaller menu, and the right side the dropdown menu would take up the entire screen. For both filters would automatically filter the project below.

Question: Can you please tell me how many items there would be for topic, languages, frameworks, and open roles? Depending on this how we should show the items may differ.

Draft so far here:
https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=388%3A211

[ashlingam]

1. @yuikomajima We agree on going with the 3 column route. As for the character limit, thanks for bringing this up. We are going to make all descriptions limited to one sentence (so much shorter than they are now) across all projects.

2. I actually like way the layout of filtering looks on the right hand mockup, but the left hand mockup may be more mobile friendly. Please see comments below.

[ExperimentsInHonesty]

@yuikomajima We had this screen shot from this issue #156 (comment)

where it used a mobile friend sort buttons instead of the drop downs.
also, it allows us to break up the rows if screen size dictates.

NEVERMIND the above. I just realized we have to have the drop down because otherwise the sorts are exclusive instead of multiple factors.

@harishlingam provided a link to an article with some other options - work checking out as well.

[ashlingam]

@yuikomajima Just to clarify: One of the locations is "South LA" not "South Bay". Additionally, please add "Remote" as a location to the drop down.

Concerning project filtering:

Please see Best Buy's project filtering for an example of what we may do. Please see the execution of drop down filtering of the above page on mobile as well (screenshots are below):

https://www.bestbuy.com/site/searchpage.jsp?_dyncharset=UTF-8&id=pcat17071&iht=y&keys=keys&ks=960&list=n&qp=tvscreensizeplusrange_facet%3DTV%20Screen%20Size~55%22%20-%2064%22%5Etvscreensizeplusrange_facet%3DTV%20Screen%20Size~65%22%20-%2074%22&sc=Global&st=tv&type=page&usc=All%20Categories

[ExperimentsInHonesty]

The below screenshots represent what the user is shown after any filters have been selected. Please note that for development purposes, our design choice must be cross-compatabile across mobile and desktop browsers. In other words, we don't have the ability to show different filter styles depending on device.

Desktop Screenshot:

Mobile Screenshot: