elm-city-craftworks/practicing-ruby-web — pull request #226 by jordanbyron (2014-10-19 15:39:15+00:00)
Title: Favorites

Heya @sandal,

Finally had a little downtime today to get started on this feature. Below are a few screenshots of my first attempt at adding a favorite link to the articles index. There are 3 different options for the "favorite" link placement and one example video of the favoriting interaction. The code is spiked with no tests but once we lock down a design I'll fix that up.

Since the favorite link interactions aren't trivial I'll probably bring in Angular to handle toggling favorites on and off. That should also make it much easier to change the tooltip text from "Favorite this article" to "Remove from favorites". Plus I'd like to use the [open heart](http://fortawesome.github.io/Font-Awesome/icon/heart-o/) for non-favorited articles and then fill it in when a user favorites it.

Still trying to come up with a sensible place to put the favorite link on the article itself. Currently we don't have a place in the header or footer to shove a tiny little heart link that wouldn't throw off the design. Let me know if you have any thoughts. Right now I'm leaning towards something similar to the old "Share this article" box but smaller. I also think the bottom of the article is the most logical place to put it.

## TODO

- [ ] Favorite link on the article show page
- [ ] Filters for articles (Favorites, Recommend)
- [ ] Tests
- [ ] Angularize favorite link

## Screenshots

### Left dedicated column
![left column](https://cloud.githubusercontent.com/assets/40662/4693628/93887bae-57a4-11e4-8d26-3fcb18a93ddf.png)

### Right next to article title
![right article](https://cloud.githubusercontent.com/assets/40662/4693629/938bff4a-57a4-11e4-9882-fc15e4c79cb9.png)

### Left next to article title

![left article](https://cloud.githubusercontent.com/assets/40662/4693630/938d58cc-57a4-11e4-8afa-0e247fb652a0.png)

### Favoriting an article

![fav](https://cloud.githubusercontent.com/assets/40662/4693631/cf1c082a-57a4-11e4-935d-51da110a0728.gif)