Merge branch 'redesign' of github.com:osmlab/openstreetmap-website into redesign
authorAaron Lidman <aaronlidman@gmail.com>
Tue, 5 Nov 2013 21:31:50 +0000 (13:31 -0800)
committerAaron Lidman <aaronlidman@gmail.com>
Tue, 5 Nov 2013 21:31:50 +0000 (13:31 -0800)
app/assets/javascripts/index.js
app/assets/javascripts/index/search.js
app/assets/javascripts/leaflet.key.js
app/assets/javascripts/leaflet.layers.js
app/assets/javascripts/leaflet.share.js
app/assets/stylesheets/common.css.scss
app/helpers/geocoder_helper.rb
app/views/layouts/_inbox.html.erb
app/views/site/about.html.erb
app/views/site/export.html.erb
app/views/site/help.html.erb

index e9e95abfef40e81eb7f3ae0be17fdc97a2735aeb..a044937fc1158546bc3f6cff24bac50743bc2f13 100644 (file)
@@ -303,6 +303,9 @@ $(document).ready(function () {
 
   $("#describe_location").on("click", function(e) {
     e.preventDefault();
-    OSM.route("/search?query=" + encodeURIComponent(map.getCenter().lat + "," + map.getCenter().lng));
+    var precision = zoomPrecision(map.getZoom());
+    OSM.route("/search?query=" + encodeURIComponent(
+      map.getCenter().lat.toFixed(precision) + "," +
+      map.getCenter().lng.toFixed(precision)));
   });
 });
index 52920d8bb90fbaf3eb176344f7ddf5721c4d859c..b9e86a4c312b45cbc1f8b85f53bad8e72c054235 100644 (file)
@@ -26,26 +26,20 @@ OSM.Search = function(map) {
   }
 
   function clickSearchResult(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
     var data = $(this).data(),
       center = L.latLng(data.lat, data.lon);
 
+    if (data.type && data.id) return; // Browse link
+
+    e.preventDefault();
+    e.stopPropagation();
+
     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
       map.fitBounds([[data.minLat, data.minLon],
         [data.maxLat, data.maxLon]]);
     } else {
       map.setView(center, data.zoom);
     }
-
-    marker
-      .setLatLng(center)
-      .addTo(map);
-
-    if (data.type && data.id) {
-      map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } });
-    }
   }
 
   var marker = L.marker([0, 0], {icon: getUserIcon()});
index cc86736ef848bec653e3c5e30ff901480b7b58b0..ea236a569e316b99ec87f0e86f6189a75fccfbaf 100644 (file)
@@ -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>')
index 2534a91c29b1071911924382697a90faff928b82..d40a1b6037515f1276765fafd5b217f5c3953219 100644 (file)
@@ -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>')
@@ -85,9 +84,9 @@ L.OSM.layers = function(options) {
         .appendTo(item);
 
       var input = $('<input>')
-        .attr('type', 'radio')
-        .prop('checked', map.hasLayer(layer))
-        .appendTo(label);
+         .attr('type', 'radio')
+         .prop('checked', map.hasLayer(layer))
+         .appendTo(label);
 
       label.append(layer.options.name);
 
index 01fc0c80a42ebfc310664302b13af991ae980ad5..6a4491c2a7e57fcbf6158603bf8779dfd8990f70 100644 (file)
@@ -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>')
index a2d8e994ea0d5201e6bbcdf89a15bff5633d0452..13910e565c5ace4e5deff53af0db923ccb53bd60 100644 (file)
@@ -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 {
@@ -592,7 +599,6 @@ nav.secondary {
   #sidebar {
     float: left;
     width: $sidebarWidth;
-    border-right: $keyline;
 
     h2, h3, h4 {
       padding: $lineheight $lineheight $lineheight/2;
@@ -662,7 +668,7 @@ nav.secondary {
 
     .section {
       border-bottom: 1px solid #DDD;
-      padding: 15px;
+      padding: 10px 20px;
     }
 
     a.close-button {
@@ -685,20 +691,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 label {
-    background-color: #ccc;
+  li.active {
+    border-color: darken($green, 10%);
+  }
+
+  li:hover {
+    border-color: $grey;
+    &.active { border-color: darken($green, 20%); }
   }
 
   .base-layers {
@@ -804,17 +826,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 {
@@ -1104,6 +1122,25 @@ a.donate {
   margin: $lineheight/4;
 }
 
+#export_osm {
+  span.small-title { 
+    font-weight: 500;
+    display: block;
+    font-size: 14px;
+    padding-bottom: 5px; 
+  }
+
+  dl {
+    padding-left: 30px;
+    font-size: 13px;
+    color: #666;
+    dd {
+      margin-left: 0;
+      margin-bottom: 10px;
+    }
+  }
+}
+
 /* Rules for edit pages */
 
 .site-edit {
@@ -1123,7 +1160,8 @@ a.donate {
 
 .content-heading {
   background: $lightgrey;
-  // border-bottom: $keyline;
+  
+  h1 { font-size: 22px; }
 }
 
 .content-body {
@@ -1810,7 +1848,7 @@ abbr.geo {
 
 .rsssmall {
   position: relative;
-  top: 5px;
+  top: 3px;
 }
 
 /* General styles for action lists / subnavs / pager navs */
@@ -1828,8 +1866,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 +2452,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 +2506,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 +2543,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;
     }
   }
 
index 33ef84b07c46ec066c04fc99cb1de0ef46e3e993..ce6c7eafa71f68065872e116fd1906827726437f 100644 (file)
@@ -2,7 +2,9 @@ module GeocoderHelper
   def result_to_html(result)
     html_options = { :class => "set_position", :data => {} }
 
-    if result[:min_lon] and result[:min_lat] and result[:max_lon] and result[:max_lat]
+    if result[:type] and result[:id]
+      url = url_for(:controller => :browse, :action => result[:type], :id => result[:id])
+    elsif result[:min_lon] and result[:min_lat] and result[:max_lon] and result[:max_lat]
       url = "?minlon=#{result[:min_lon]}&minlat=#{result[:min_lat]}&maxlon=#{result[:max_lon]}&maxlat=#{result[:max_lat]}"
     else
       url = "?mlat=#{result[:lat]}&mlon=#{result[:lon]}&zoom=#{result[:zoom]}"
@@ -17,14 +19,7 @@ module GeocoderHelper
     html << " " if result[:prefix] and result[:name]
     html << link_to(result[:name], url, html_options) if result[:name]
     html << result[:suffix] if result[:suffix]
-
-    # if result[:type] and result[:id]
-    #   html << content_tag(:small, :class => ["deemphasize", "search_details"]) do
-    #     link_to(t("browse.#{result[:type]}_history.view_details"), :controller => :browse, :action => result[:type], :id => result[:id])
-    #   end
-    # end
-
-    return raw(html)
+    html.html_safe
   end
 
   def describe_location(lat, lon, zoom = nil, language = nil)
index 02c22e26c1c264967ce23bc3fe4f2ae8aefd9272..cdd708e1cb5a0508ca6981b148f53c1ae42c4e41 100644 (file)
@@ -1 +1,3 @@
+<% if @user.new_messages.size > 0 %>
 <span id="inboxanchor" class="count-number"><%= @user.new_messages.size %></span>
+<% end %>
index d16e8525705589cd884382b1a7d392132e1722c4..066df724cc54c1b4bc23d9a213406da1f008417d 100644 (file)
@@ -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'>
index c8d964a596327c053a694b20aae567572f596c3f..127a4767b422d57db15dce6ebcdde0cbb2cdac11 100644 (file)
       <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><span class="small-title"><%= t'export.start.licence' %></span><%= 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>
-        <dl>
+      <div class="export_details">
+        <h4><span class="small-title red"><%= t'export.start.too_large.heading' %></span><%= t'export.start.too_large.body' %></h4>
+        <dl class="inner12">
           <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>
 
index 53d479b8588dd2d9c1a4701847ee3aee15434b73..412dfc7f65de3a89f586b16334df777c235768e2 100644 (file)
@@ -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>