[openstreetmap-website] Site cleanup (#150)

Saman Bemel-Benrud notifications at github.com
Tue Oct 30 01:34:39 GMT 2012


I set out to do a quick and dirty typography overhaul to make things more consistent and a bit cleaner, but I kept running into things I didn't like, so this lead me down something of a rabbit hole of design tweaks to the OSM site. 

__this is not yet complete__ but I wanted to submit it now as a pull request to let people check out what I'm up to. I hope to polish this up and have it ready to merge tomorrow or wednesday at the latest.

Goals here are to have better content hierarchy,  better vertical rhythm, more consistent UI, cleaner markup with less tables, all while keeping the basics pretty much intact. There are a lot of things I didn't touch even though they need to be updated (lots of tables where stuff shouldn't be tables, mostly). 

Basic overview of changes:

I added a new persistent header that helps segment pages. It's now a lot easier to know what you're looking at. The header has a page title, a description, plus a submenu of actions.

There is now a pattern of 20px/10px margins and padding for more rhythm and breathing room throughout the site.

Screenshots:

- map view with key: http://cl.ly/image/1Q3h2C473U40/o
- profile: http://cl.ly/image/3P3C472X1429/o
- user diary: http://cl.ly/image/1o0n0i17130x/o
- changesets: http://cl.ly/image/2G1f332z3p20/o
- status messages: http://cl.ly/image/2g3V232u3f2e/o

Todo:

- I might take another pass at improving the changeset page. Not happy with the table layout there.
- Browser testing
- RTL testing
- Adjustments for 'small' layout
- Q & A

I know there are other problems here or things I've missed - would love another set of eyes to look over this! I am still getting comfortable working on the site - it's my first time ever digging into a ruby or rails site so I'm not familiar with the templating language yet.

Note: this has been merged with #148, so if this is accepted the changes from that pull request will also be accepted.

You can merge this Pull Request by running:

  git pull https://github.com/samanpwbb/openstreetmap-website site-cleanup

Or you can view, comment on it, or merge it online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/150

-- Commit Summary --

  * changing approach to layout in order to fix some weird css problems.
  * initial commit of big typography overhaul.
  * resolved conflict>'
  * more progress on typo overhaul, adding structure while I'm at it.
  * revamped status message styles.
  * code, typography, and UI cleanup.
  * no more diary icon.
  * resolved conflict + cleaned up code a bit.

-- File Changes --

A app/assets/images/color-palette.svg (124)
M app/assets/images/new.png (0)
A app/assets/images/new.svg (72)
A app/assets/images/notice.png (0)
A app/assets/images/notice.svg (73)
M app/assets/javascripts/sidebar.js (1)
M app/assets/stylesheets/common.css.scss (433)
M app/assets/stylesheets/large.css (6)
M app/assets/stylesheets/ltr.css.scss (52)
M app/assets/stylesheets/rtl.css.scss (50)
M app/assets/stylesheets/small.css.scss (41)
M app/controllers/changeset_controller.rb (88)
M app/controllers/diary_entry_controller.rb (18)
M app/controllers/trace_controller.rb (5)
M app/views/changeset/_changeset.html.erb (4)
M app/views/changeset/list.html.erb (23)
M app/views/diary_entry/_diary_entry.html.erb (22)
M app/views/diary_entry/_diary_list_entry.html.erb (3)
M app/views/diary_entry/list.html.erb (42)
M app/views/diary_entry/view.html.erb (9)
M app/views/export/start.html.erb (16)
M app/views/layouts/_flash.html.erb (6)
M app/views/site/_sidebar.html.erb (10)
M app/views/trace/_trace_optionals.html.erb (3)
M app/views/trace/list.html.erb (21)
M app/views/user/_contact.html.erb (72)
M app/views/user/view.html.erb (60)
M config/locales/en.yml (15)
M vendor/assets/openlayers/theme/default/style.css (4)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/150.patch
https://github.com/openstreetmap/openstreetmap-website/pull/150.diff


---
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/150
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20121029/e72d8376/attachment.html>


More information about the rails-dev mailing list