touch up secondary pages and leaflet sidebar content

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index cc86736ef848bec653e3c5e30ff901480b7b58b0..ea236a569e316b99ec87f0e86f6189a75fccfbaf 100644 (file)
--- 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(
-        $('<a>')
+        $('<span>')
           .text(I18n.t('javascripts.close'))
-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')
           .bind('click', toggle))
       .append(
         $('<h4>')

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 2534a91c29b1071911924382697a90faff928b82..fffafa1217b4071d4b5fdf5b98c998b5d4b52b64 100644 (file)
--- 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(
-        $('<a>')
+        $('<span>')
           .text(I18n.t('javascripts.close'))
-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')
           .bind('click', toggle))
       .append(
         $('<h4>')
@@ -84,10 +83,10 @@ L.OSM.layers = function(options) {
       var label = $('<label>')
         .appendTo(item);
 
-      var input = $('<input>')
-        .attr('type', 'radio')
-        .prop('checked', map.hasLayer(layer))
-        .appendTo(label);
+      // var input = $('<input>')
+      //   .attr('type', 'radio')
+      //   .prop('checked', map.hasLayer(layer))
+      //   .appendTo(label);
 
       label.append(layer.options.name);
 

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 01fc0c80a42ebfc310664302b13af991ae980ad5..6a4491c2a7e57fcbf6158603bf8779dfd8990f70 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -25,10 +25,9 @@ L.OSM.share = function (options) {
       .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(
-        $('<a>')
+        $('<span>')
           .text(I18n.t('javascripts.close'))
-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')
           .bind('click', toggle))
       .append(
         $('<h4>')

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 6e1c8e016f2bf560e4db4d3463eb675dc875ffe7..557ef94f0a4911b35d3ea7f813d54d3e2043394f 100644 (file)
--- 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 02c22e26c1c264967ce23bc3fe4f2ae8aefd9272..cdd708e1cb5a0508ca6981b148f53c1ae42c4e41 100644 (file)
--- a/app/views/layouts/_inbox.html.erb
+++ b/app/views/layouts/_inbox.html.erb
@@ -1 +1,3 @@
+<% if @user.new_messages.size > 0 %>
 <span id="inboxanchor" class="count-number"><%= @user.new_messages.size %></span>
+<% end %>

diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb
index d16e8525705589cd884382b1a7d392132e1722c4..066df724cc54c1b4bc23d9a213406da1f008417d 100644 (file)
--- a/app/views/site/about.html.erb
+++ b/app/views/site/about.html.erb
@@ -9,9 +9,7 @@
 
   <div class='user-image'></div>
 
-  <strong>
-    <%= raw t "about_page.used_by", :name => "<span class='user-name'>OpenStreetMap</span>" %>
-  </strong>
+  <h1><%= raw t "about_page.used_by", :name => "<span class='user-name'>OpenStreetMap</span>" %></h1>
 </div>
 
 <div class='text'>

diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index c8d964a596327c053a694b20aae567572f596c3f..978244db485c6a4679b7b4c00347a62c8878c963 100644 (file)
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -12,21 +12,17 @@
       <br/>
       <%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %>
     </div>
-    <a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a>
+    <a id="drag_box" class='export_hint' href="#"><%= t'export.start.manually_select' %></a>
   </div>
 
   <div id="export_osm">
-    <h4><%= t'export.start.licence' %></h4>
-
-    <div class="export_details inner22">
-      <p><%= raw t'export.start.export_details' %></p>
-    </div>
+    <h4><strong><%= t'export.start.licence' %></strong><br>
+    <%= raw t'export.start.export_details' %></h4>
 
     <div  id="export_osm_too_large">
-      <h4><%= t'export.start.too_large.heading' %></h4>
-
-      <div class="export_details inner22">
-        <p><%= t'export.start.too_large.body' %></p>
+      <div class="export_details">
+        <h4><strong class="red"><%= t'export.start.too_large.heading' %></strong><br>
+        <%= t'export.start.too_large.body' %></p>
         <dl>
           <dt><a href="http://planet.openstreetmap.org/"><%= t'export.start.too_large.planet.title' %></a></dt>
           <dd><%= t'export.start.too_large.planet.description' %></dd>

diff --git a/app/views/site/help.html.erb b/app/views/site/help.html.erb
index 53d479b8588dd2d9c1a4701847ee3aee15434b73..412dfc7f65de3a89f586b16334df777c235768e2 100644 (file)
--- a/app/views/site/help.html.erb
+++ b/app/views/site/help.html.erb
@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  <h2><%= t "help_page.title" %></h2>
+  <h1><%= t "help_page.title" %></h1>
 <% end %>
 
 <p class='introduction'><%= t "help_page.introduction" %></p>