From c241c3c312c998c06a47417231abf5636159bb22 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 9 Feb 2012 12:44:32 -0500 Subject: [PATCH] Cleanup style This is a mild restyling of OpenStreetMap. Changes include: * Remove margin from map, add more margin to text content * Rearrange permalink & link buttons and gives them a background * Pull OpenStreetMap text below logo along with subtitle * Simplify sidebar styling * Move towards a baseline, start to consolidate text size and line height This is tested with LTR, RTL, and the compact mode, and looks good. Looks more uniform in older browsers because it relies less on round corners. --- app/assets/stylesheets/common.css.scss | 165 +++++++++++++------------ app/assets/stylesheets/large.css | 2 +- app/assets/stylesheets/ltr.css.scss | 21 ++-- app/assets/stylesheets/rtl.css.scss | 24 ++-- app/views/layouts/site.html.erb | 10 +- app/views/site/index.html.erb | 2 +- 6 files changed, 120 insertions(+), 104 deletions(-) diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 04247ac8b..04ee87d9f 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -3,8 +3,10 @@ /* Default rules for the body of every page */ body { - font-family: Arial,sans-serif; - color: #000; + font-family: 'Helvetica Neue',Arial,sans-serif; + font-size: 14px; + line-height: 20px; + color: #222; background-color: #fff; margin: 0px; padding: 0px; @@ -34,12 +36,18 @@ hr { height: 1px; } +h2 { + margin: 5px 0; + font-size: 25px; + line-height: 30px; +} + /* Rules for the whole left sidebar, including the logo */ #left { position: absolute; top: 0px; - min-width: 170px; + width: 185px; } /* Rules for the OpenStreetMap logo in the top left corner */ @@ -48,22 +56,20 @@ hr { width: 170px; min-width: 170px; padding: 5px; - margin: 5px; - height: 150px; - background: #fff; - border: 1px solid #ccd; - border-radius: 5px; - -moz-border-radius: 5px; + text-align: center; + margin: 25px 0 5px 0; } #logo h1 { - font-size: 14px; + font-size: 18px; + line-height: 20px; text-align: center; margin: 0px; } #logo h2 { font-size: 10px; + line-height: 15px; margin: 0px; } @@ -76,13 +82,9 @@ hr { /* Rules for the introductory text displayed in the left sidebar to new users */ #intro { - width: 170px; - padding: 5px; - margin: 5px; - border: 1px solid #ccc; font-size: 11px; - border-radius: 5px; - -moz-border-radius: 5px; + line-height: 12px; + border-top: 1px solid #ccc; } #intro p { @@ -119,7 +121,7 @@ hr { padding: 5px; border: 1px solid #ccc; background: #ea0; - line-height: 1.2em; + line-height: 20px; font-size: 14px; border-radius: 5px; -moz-border-radius: 5px; @@ -128,17 +130,13 @@ hr { /* Rules for the menu displayed in the left sidebar */ .left_menu { - width: 170px; - min-width: 170px; - margin: 5px; - padding: 5px; - border: 1px solid #ccc; - background: #ddd; - line-height: 1.2em; + padding: 10px; + margin: 4px 0; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + line-height: 20px; font-size: 14px; font-weight: bold; - border-radius: 5px; - -moz-border-radius: 5px; } .left_menu td { @@ -182,22 +180,17 @@ hr { */ .optionalbox { - width: 170px; - min-width: 170px; - margin: 5px; padding: 5px; - border: 1px solid #ccc; - line-height: 1.2em; + margin: 4px 0; + border-top: 1px solid #ccc; + line-height: 15px; font-size: 12px; - background: #eee; - border-radius: 5px; - -moz-border-radius: 5px; } .optionalbox h1 { font-size: 14px; font-weight: bold; - line-height: 22px; + line-height: 20px; margin: 0px; vertical-align: bottom; } @@ -205,13 +198,13 @@ hr { /* Rules for the search box */ .whereami { - line-height: 22px; + line-height: 20px; vertical-align: bottom; } .search_container { - height: 16px; - padding-bottom: 6px; + height: 15px; + padding-bottom: 5px; } #search_field form { @@ -232,20 +225,20 @@ hr { .search_help { font-size: 10px; - line-height: 1em; - margin-top: 3px; + line-height: 15px; + margin-top: 2px; margin-bottom: 0px; } /* Rules for donation request box */ .donate { - width: 170px; - margin: 5px; + width: 155px; + margin: 10px 5px; padding: 5px; border: 1px solid #ccc; background: #cbeea7; - line-height: 1.2em; + line-height: 20px; text-align: center; font-size: 14px; border-radius: 5px; @@ -261,24 +254,21 @@ hr { /* Rules for tabbed navigation bar */ -#tabnav -{ +#tabnav { height: 20px; margin: 0px; padding-top: 5px; background: image-url('tab_bottom.gif') repeat-x bottom; } -#tabnav li -{ - margin: 0px; +#tabnav li { + margin: 0px; padding: 0px; display: inline; list-style-type: none; } -#tabnav a, #tabnav a:link, #tabnav a:visited -{ +#tabnav a, #tabnav a:link, #tabnav a:visited { background: #f3f3f3; font-size: 13px; line-height: 14px; @@ -293,21 +283,20 @@ hr { -moz-border-radius-topleft: 5px; } -#tabnav a:link.active, #tabnav a:visited.active -{ +#tabnav a:link.active, #tabnav a:visited.active { border-bottom: 1px solid #fff; background: #fff; color: #000; } -#tabnav a:link:hover, #tabnav a:visited:hover -{ +#tabnav a:link:hover, #tabnav a:visited:hover { background: #fff; } -#tabnav a:link.disabled, #tabnav a:visited.disabled, -#tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled -{ +#tabnav a:link.disabled, +#tabnav a:visited.disabled, +#tabnav a:link:hover.disabled, +#tabnav a:visited:hover.disabled { background: #bbbbbb; color: white } @@ -319,7 +308,7 @@ hr { margin: 0px; padding-top: 5px; font-size: 13px; - line-height: 14px; + line-height: 15px; background: image-url('tab_bottom.gif') repeat-x bottom; } @@ -336,10 +325,8 @@ hr { } /* Rules for OpenLayers maps */ - #map { - border: 1px solid black; - margin: 0px; + margin: 0px; padding: 0px; } @@ -353,10 +340,16 @@ hr { #permalink { z-index: 10000; position: absolute; - bottom: 15px; - right: 15px; + bottom: 0px; + right: 0px; + padding: 5px; + background:#fff; text-align: right; - font-size: smaller; + font-size: 12px; +} + +#permalink a { + padding: 5px; } /* Rules for edit menu */ @@ -396,7 +389,7 @@ hr { #sidebar { display: none; position: absolute; - border: 1px solid black; + border: 1px solid #888; margin: 0px; padding: 0px; width: 30%; @@ -408,7 +401,7 @@ hr { overflow: auto; position: absolute; font-size: 13px; - line-height: 14px; + line-height: 15px; top: 29px; bottom: 0px; left: 0px; @@ -421,7 +414,7 @@ hr { height: 29px; font-size: 14px; line-height: 15px; - border-bottom: 1px solid black; + border-bottom: 1px solid #888; background: #bbb; } @@ -488,9 +481,9 @@ hr { .export_heading { margin: 0px; - padding: 3px 6px; - border: 1px solid #ccc; - background: #ddd; + padding: 2px 5px; + border-bottom: 1px solid #ccc; + font-weight: bold; } .export_bounds { @@ -530,12 +523,18 @@ hr { /* Rules for the main content area */ -#content { +body.site #content { padding: 0px; margin: 0px; - position: absolute; - bottom: 10px; - line-height: 1.2em; + position: absolute; + bottom: 0px; +} + +#content { + padding: 10px; + margin: 0px; + position: absolute; + bottom: 0px; } #slim_container { @@ -976,18 +975,20 @@ p#contributorGuidance { .fieldName { vertical-align: top; font-weight: bold; + font-size: 12px; + line-height: 20px; } .minorNote { font-size: 0.8em; } -input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { - border: 1px solid black; -} - -input[type="submit"] { - border: 1px solid black; +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +textarea { + border: 1px solid #888; } /* Rules for user images */ @@ -1025,11 +1026,11 @@ abbr.geo { /* Rules for doing distinct colour of alternate table rows */ -.table0 { +.table0 { background: #f6f6f6; } -.table1 { +.table1 { background: #fff; } diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css index 1c4d493ec..c86672e9a 100644 --- a/app/assets/stylesheets/large.css +++ b/app/assets/stylesheets/large.css @@ -9,7 +9,7 @@ /* Rules for the main content area */ #content { - top: 35px; + top: 25px; } /* Rules for OpenLayers maps */ diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss index 817404a79..67faffc77 100644 --- a/app/assets/stylesheets/ltr.css.scss +++ b/app/assets/stylesheets/ltr.css.scss @@ -68,13 +68,11 @@ html body { /* Rules for tabbed navigation bar */ -#tabnav -{ - padding-left: 215px; +#tabnav { + margin-left: 185px; } -#tabnav a, #tabnav a:link, #tabnav a:visited -{ +#tabnav a, #tabnav a:link, #tabnav a:visited { float: left; margin-right: 4px; } @@ -102,6 +100,10 @@ html body { text-align: right; } +#map { + border-left: 1px solid #ccc; +} + /* Rules for the popout map sidebar */ #sidebar { @@ -119,9 +121,14 @@ html body { /* Rules for the main content area */ +body.site #content { + border: 0; +} + #content { - left: 192px; - right: 10px; + border-left: 1px solid #ccc; + left: 185px; + right: 0px; text-align: left; } diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss index 953efd7a6..5d3bad582 100644 --- a/app/assets/stylesheets/rtl.css.scss +++ b/app/assets/stylesheets/rtl.css.scss @@ -69,13 +69,13 @@ html body { /* Rules for tabbed navigation bar */ -#tabnav -{ - padding-right: 215px; +#tabnav { + margin-right: 185px; } -#tabnav a, #tabnav a:link, #tabnav a:visited -{ +#tabnav a, +#tabnav a:link, +#tabnav a:visited { float: right; margin-left: 4px; } @@ -93,6 +93,11 @@ html body { right: 15px } + +#map { + border-right: 1px solid #ccc; +} + /* Rules for attribution text under the main map shown on printouts */ .attribution_license { @@ -120,9 +125,14 @@ html body { /* Rules for the main content area */ +body.site #content { + border: 0; +} + #content { - right: 192px; - left: 10px; + border-right: 1px solid #ccc; + right: 185px; + left: 0px; text-align: right; } diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index a2cd2aa40..f43d3b395 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -1,7 +1,7 @@ <%= render :partial => "layouts/head" %> - +
<%= link_to(image_tag("osm_logo.png", :size => "16x16", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %>

<%= t 'layouts.project_name.h1' %>

@@ -64,11 +64,9 @@
<%= yield :optionals %> diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb index 38242da00..0c47227f8 100644 --- a/app/views/site/index.html.erb +++ b/app/views/site/index.html.erb @@ -18,7 +18,7 @@ -- 2.43.2