18F/foia-hub — pull request #327 by konklone (2014-12-07 06:39:47+00:00)
Title: Implement home page and agency landing page

This implements our current mocks for the home page, and adds/implements a new agency listing page. The mocks are close to what's in #222, plus some further conversation that refined what we were doing.

### Home page

This is the implemented home page as shown on my desktop Chrome browser:

![home1](https://cloud.githubusercontent.com/assets/4592/5330231/3ace911a-7db0-11e4-97e7-37137c39a7ed.png)

Note that the blue background goes all the way from the left edge to the right edge of the browser window. This, and having a blue background that went wider than the content at all, was accomplished by rejiggering how the grid was laid out for the application generally.

The process diagram is filled with empty grey squares, as no images are made yet for them.

### Agency listing

When you click "or browse a list of federal agencies", this is what you get to:

![agency listing](https://cloud.githubusercontent.com/assets/4592/5330243/0000a220-7db1-11e4-8101-e8ea8cb80317.png)

Annoyingly, there's no simple way for me to remove the browse link on this page. Punting on that one for now.

The list is of all "agencies" and "top-level" offices, 157 in total. 156 of them have an associated description. The 1 that does not is the TSA, for which it says "Click to find out more about this agency."

### Refactoring

`

` is now best only used to keep vertically stacked major sections inside the `#main` div. They can optionally be surrounded by a `

` that applies an effect all the way across the browser window (transcending the grid system), like the blue background on the intro, and the grey border on the bottom of the nav.

One annoying sacrifice is that this means a `

` is now required inside each `

`. That means the `

` is the `outer-container` (so that it can stretch across the whole grid system) and the `.inner` div is shifted in a bit and cut to 3/4 of the size of the overall grid. Individual sections can override this subsetting -- for example, the "How does the process work?" section (`section.process`) widens itself to 11/12 of the grid.

I've added `

` to all the `

` tags of the app, and moved the `/about/` and `/learn/` pages to use a `

` instead of a `

`. I also had to slightly refactor the CSS for agency landing pages to go along with everything else.

### Still to do in a future PR:

* There's no "search results". The search bar's only purpose is still to provide an autocomplete, and selecting an autocomplete result will take you to that agency's landing page. The autocomplete plugin we're using can be stripped out, and the search box can work like a normal search form.
* The search bar needs a magnifying glass icon embedded inside it. I'd prefer @vz3 or someone else do that styling - it feels like something that would take me a long time. We could also decide to drop it for now, though it is nice.
* I think there really needs to be a hover effect of some sort on agencies on the listing page. It's not obvious that each whole thing is a link.
* The "process" squares are grey boxes, and real images need to be put in in their place.
* I think the copy could use some tweaks, and I'll propose some in a future PR. I did make very minor changes here, such as changing "information" to "records" in the intro.

Fixes #293. Goes a long way to fixing #294 but the search/autocomplete should be done before closing that one.