From 7503caa750f2788e2412e5b7f8ed37210b7407c3 Mon Sep 17 00:00:00 2001 From: Eden Halperin Date: Tue, 5 Nov 2013 13:28:37 -0500 Subject: [PATCH] touch up secondary pages and leaflet sidebar content --- app/assets/javascripts/leaflet.key.js | 5 +- app/assets/javascripts/leaflet.layers.js | 13 ++-- app/assets/javascripts/leaflet.share.js | 5 +- app/assets/stylesheets/common.css.scss | 87 +++++++++++++++--------- app/views/layouts/_inbox.html.erb | 2 + app/views/site/about.html.erb | 4 +- app/views/site/export.html.erb | 16 ++--- app/views/site/help.html.erb | 2 +- 8 files changed, 75 insertions(+), 59 deletions(-) diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index cc86736ef..ea236a569 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -19,10 +19,9 @@ L.OSM.key = function (options) { .attr('class', 'sidebar_heading') .appendTo($ui) .append( - $('') + $('') .text(I18n.t('javascripts.close')) - .attr('class', 'sidebar_close') - .attr('href', '#') + .attr('class', 'icon close') .bind('click', toggle)) .append( $('

') diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 2534a91c2..fffafa121 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -22,10 +22,9 @@ L.OSM.layers = function(options) { .attr('class', 'sidebar_heading') .appendTo($ui) .append( - $('') + $('') .text(I18n.t('javascripts.close')) - .attr('class', 'sidebar_close') - .attr('href', '#') + .attr('class', 'icon close') .bind('click', toggle)) .append( $('

') @@ -84,10 +83,10 @@ L.OSM.layers = function(options) { var label = $('') + $('') .text(I18n.t('javascripts.close')) - .attr('class', 'sidebar_close') - .attr('href', '#') + .attr('class', 'icon close') .bind('click', toggle)) .append( $('

') diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 6e1c8e016..557ef94f0 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -7,6 +7,7 @@ $blue: #7092FF; $lightblue: #B8C5F0; $green: #7ebc6f; $grey: #CCC; +$red: red; $lightgrey: #EEE; $darkgrey: #AAA; $hovercolor: 20%; @@ -51,6 +52,8 @@ abbr, acronym { cursor: help; } +strong { font-weight: 500; } + /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, @@ -123,6 +126,8 @@ h1, h2, h3 { line-height: 1.2; } +h4, h5 { font-weight: 500; } + h1 { font-size: 18px; } @@ -150,6 +155,8 @@ small, aside { margin-right: $lineheight/4; } +.red { color: $red; } + /* Rules for icons */ .icon { @@ -662,7 +669,7 @@ nav.secondary { .section { border-bottom: 1px solid #DDD; - padding: 15px; + padding: 10px 20px; } a.close-button { @@ -685,20 +692,36 @@ nav.secondary { .layers-ui { li { - border-radius: 4px; overflow: hidden; - margin-bottom: 10px; + border-radius: 3px; + border: 3px solid #fff; + margin-bottom: 8px; + position: relative; + transition: border-color 0.08s ease-in; } label { - display: block; - padding: 5px 5px 5px 7px; - background-color: #eee; + position: absolute; + top: 12px; + left: 10px; cursor: pointer; + font-weight: 500; + font-size: 16px; + text-stroke: 2px #fff; + text-shadow: + -2px -2px 1px #fff, + 2px -2px 1px #fff, + -2px 2px 1px #fff, + 2px 2px 1px #fff; + } + + li.active { + border-color: darken($green, 10%); } - li.active label { - background-color: #ccc; + li:hover { + border-color: $grey; + &.active { border-color: darken($green, 20%); } } .base-layers { @@ -804,17 +827,13 @@ nav.secondary { .sidebar_heading { position: relative; padding: $lineheight/2 $lineheight; - background: $offwhite; - border-bottom: 1px solid #ccc; -} - -.sidebar_close { - position: absolute; - height: $lineheight; - top: 0px; - bottom: 0; - right: $lineheight; - margin: auto; + // background: $offwhite; + // border-bottom: 1px solid #ccc; + > .close { + float: right; + margin-top: 2px; + cursor: pointer; + } } #sidebar_content { @@ -1123,7 +1142,8 @@ a.donate { .content-heading { background: $lightgrey; - // border-bottom: $keyline; + + h1 { font-size: 22px; } } .content-body { @@ -1810,7 +1830,7 @@ abbr.geo { .rsssmall { position: relative; - top: 5px; + top: 3px; } /* General styles for action lists / subnavs / pager navs */ @@ -1828,8 +1848,8 @@ ul.secondary-actions { float: left; list-style: none; border-left: 1px solid #ccc; - padding-left: $lineheight/4; - margin-right: $lineheight/4; + padding-left: $lineheight/2; + margin-right: $lineheight/2; &:first-child { border-left: 0; padding-left: 0; @@ -2414,13 +2434,14 @@ a.button { .caption { max-width: 200px; - font: italic 14px/20px 'Times New Roman', serif; + font: 13px/20px Helvetica, Arial, sans-serif; position: fixed; text-align: right; right: 20px; bottom: 60px; text-shadow: #000 0px 1px 5px; - color: #fff; + color: #eee; + opacity: 0.8; display: none; } @@ -2467,15 +2488,17 @@ a.button { .attr { position: relative; - padding: 170px 20px 20px 20px; + padding: 170px 40px 20px; background: #333; background: rgba(0, 0, 0, .8); margin-bottom: 0; + margin-top: -20px; - strong { + h1 { display: block; color: white; - font-size: 25px; + font-weight: 300; + font-size: 34px; span { color: #76c551; } @@ -2502,16 +2525,16 @@ a.button { width: 240px; height: 150px; padding: 20px 20px 20px 40px; - font: 500 24px/25px Helvetica, Arial, sans-serif; + font: 500 20px/24px Helvetica, Arial, sans-serif; white-space: nowrap; color: #fff; - background: #76c551 + background: #76c551; } .byosm span { display: inline-block; - width: 25px; - margin-left: -25px; + width: 20px; + margin-left: -20px; } } diff --git a/app/views/layouts/_inbox.html.erb b/app/views/layouts/_inbox.html.erb index 02c22e26c..cdd708e1c 100644 --- a/app/views/layouts/_inbox.html.erb +++ b/app/views/layouts/_inbox.html.erb @@ -1 +1,3 @@ +<% if @user.new_messages.size > 0 %> <%= @user.new_messages.size %> +<% end %> diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb index d16e85257..066df724c 100644 --- a/app/views/site/about.html.erb +++ b/app/views/site/about.html.erb @@ -9,9 +9,7 @@
- - <%= raw t "about_page.used_by", :name => "OpenStreetMap" %> - +

<%= raw t "about_page.used_by", :name => "OpenStreetMap" %>

diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb index c8d964a59..978244db4 100644 --- a/app/views/site/export.html.erb +++ b/app/views/site/export.html.erb @@ -12,21 +12,17 @@
<%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %>
- <%= t'export.start.manually_select' %> + <%= t'export.start.manually_select' %>
-

<%= t'export.start.licence' %>

- -
-

<%= raw t'export.start.export_details' %>

-
+

<%= t'export.start.licence' %>
+ <%= raw t'export.start.export_details' %>

-

<%= t'export.start.too_large.heading' %>

- -
-

<%= t'export.start.too_large.body' %>

+
+

<%= t'export.start.too_large.heading' %>
+ <%= t'export.start.too_large.body' %>

<%= t'export.start.too_large.planet.title' %>
<%= t'export.start.too_large.planet.description' %>
diff --git a/app/views/site/help.html.erb b/app/views/site/help.html.erb index 53d479b85..412dfc7f6 100644 --- a/app/views/site/help.html.erb +++ b/app/views/site/help.html.erb @@ -1,5 +1,5 @@ <% content_for :heading do %> -

<%= t "help_page.title" %>

+

<%= t "help_page.title" %>

<% end %>

<%= t "help_page.introduction" %>

-- 2.43.2