UI Improvements

[smcalilly]

Here's a list of all the design and UI improvements we'd like to make since adding the GIS asset tool and bundled projects. Please feel free to add to this list.

Asset Map

• Give some margin/padding between the elements. The bottom table especially needs some breathing room.
• Center the pagination buttons for the bottom table, it's offset slightly left of center.
• Consider a better name for the bottom table's heading. Phase Assets -> ?
• Add interaction between search table and the asset map #120
• Decide on colors of the geometries?
• Do something about the top of this container. I've made it too minimalist, as is my inclination. It needs some life.
  • A better font would help.
  • We could also give the help text more bearing by wrapping it in a container and maybe giving it some color, because it looks lonely as it is now.
  • We should also bring the search bar flush with the phase name heading. This will require us to add the phase name to props and render it in react — the construction - Q4 - in-progress header is rendered in the django template and everything below that is in the react component's div and thus it's not flush.
  • We could take a different approach for this header layout, but my thinking was to have the search compartmentalized on the left side, with the phase name and asset saving interaction on the right side, above the map (where a phase's existing assets are rendered).

Phase Add/Edit page

• Tighten up the layout for the form input elements.
• Make the map smaller.
• Add a table with the asset list?

Overall changes

• Use logo and header color from the document search app we made.
• Use the font from their style guide. See Style all of the pages to match the CCFP style guide #25.