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(
       .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(

-        $('<a>')
+        $('<span>')

           .text(I18n.t('javascripts.close'))
           .text(I18n.t('javascripts.close'))

-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')

           .bind('click', toggle))
       .append(
         $('<h4>')
           .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(
       .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(

-        $('<a>')
+        $('<span>')

           .text(I18n.t('javascripts.close'))
           .text(I18n.t('javascripts.close'))

-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')

           .bind('click', toggle))
       .append(
         $('<h4>')
           .bind('click', toggle))
       .append(
         $('<h4>')


@@ -84,10 +83,10 @@ L.OSM.layers = function(options) {
       var label = $('<label>')
         .appendTo(item);
 
       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);
 
 
       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(
       .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(

-        $('<a>')
+        $('<span>')

           .text(I18n.t('javascripts.close'))
           .text(I18n.t('javascripts.close'))

-          .attr('class', 'sidebar_close')
-          .attr('href', '#')
+          .attr('class', 'icon close')

           .bind('click', toggle))
       .append(
         $('<h4>')
           .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;
 $lightblue: #B8C5F0;
 $green: #7ebc6f;
 $grey: #CCC;

+$red: red;

 $lightgrey: #EEE;
 $darkgrey: #AAA;
 $hovercolor: 20%;
 $lightgrey: #EEE;
 $darkgrey: #AAA;
 $hovercolor: 20%;


@@ -51,6 +52,8 @@ abbr, acronym {
   cursor: help;
 }
 
   cursor: help;
 }
 

+strong { font-weight: 500; }
+

 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
 
 .clearfix:before,
 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
 
 .clearfix:before,


@@ -123,6 +126,8 @@ h1, h2, h3 {
   line-height: 1.2;
 }
 
   line-height: 1.2;
 }
 

+h4, h5 { font-weight: 500; }
+

 h1 {
   font-size: 18px;
 }
 h1 {
   font-size: 18px;
 }


@@ -150,6 +155,8 @@ small, aside {
   margin-right: $lineheight/4;
 }
 
   margin-right: $lineheight/4;
 }
 

+.red { color: $red; }
+

 /* Rules for icons */
 
 .icon {
 /* Rules for icons */
 
 .icon {


@@ -662,7 +669,7 @@ nav.secondary {
 
     .section {
       border-bottom: 1px solid #DDD;
 
     .section {
       border-bottom: 1px solid #DDD;

-      padding: 15px;
+      padding: 10px 20px;

     }
 
     a.close-button {
     }
 
     a.close-button {


@@ -685,20 +692,36 @@ nav.secondary {
 
 .layers-ui {
   li {
 
 .layers-ui {
   li {

-    border-radius: 4px;

     overflow: hidden;
     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 {
   }
 
   label {

-    display: block;
-    padding: 5px 5px 5px 7px;
-    background-color: #eee;
+    position: absolute;
+    top: 12px;
+    left: 10px;

     cursor: pointer;
     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 {
   }
 
   .base-layers {


@@ -804,17 +827,13 @@ nav.secondary {
 .sidebar_heading {
   position: relative;
   padding: $lineheight/2 $lineheight;
 .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 {
 }
 
 #sidebar_content {


@@ -1123,7 +1142,8 @@ a.donate {
 
 .content-heading {
   background: $lightgrey;
 
 .content-heading {
   background: $lightgrey;

-  // border-bottom: $keyline;
+  
+  h1 { font-size: 22px; }

 }
 
 .content-body {
 }
 
 .content-body {


@@ -1810,7 +1830,7 @@ abbr.geo {
 
 .rsssmall {
   position: relative;
 
 .rsssmall {
   position: relative;

-  top: 5px;
+  top: 3px;

 }
 
 /* General styles for action lists / subnavs / pager navs */
 }
 
 /* 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;
     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;
     &:first-child {
       border-left: 0;
       padding-left: 0;


@@ -2414,13 +2434,14 @@ a.button {
 
   .caption {
     max-width: 200px;
 
   .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;
     position: fixed;
     text-align: right;
     right: 20px;
     bottom: 60px;
     text-shadow: #000 0px 1px 5px;

-    color: #fff;
+    color: #eee;
+    opacity: 0.8;

     display: none;
   }
 
     display: none;
   }
 


@@ -2467,15 +2488,17 @@ a.button {
 
   .attr {
     position: relative;
 
   .attr {
     position: relative;

-    padding: 170px 20px 20px 20px;
+    padding: 170px 40px 20px;

     background: #333;
     background: rgba(0, 0, 0, .8);
     margin-bottom: 0;
     background: #333;
     background: rgba(0, 0, 0, .8);
     margin-bottom: 0;

+    margin-top: -20px;

 
 

-    strong {
+    h1 {

       display: block;
       color: white;
       display: block;
       color: white;

-      font-size: 25px;
+      font-weight: 300;
+      font-size: 34px;

       span {
         color: #76c551;
       }
       span {
         color: #76c551;
       }


@@ -2502,16 +2525,16 @@ a.button {
       width: 240px;
       height: 150px;
       padding: 20px 20px 20px 40px;
       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;
       white-space: nowrap;
       color: #fff;

-      background: #76c551
+      background: #76c551;

     }
 
     .byosm span {
       display: inline-block;
     }
 
     .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>
 <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>
 
 
   <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'>
 </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>
       <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">
   </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">
 
     <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>
         <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 %>
 <% 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>
 <% end %>
 
 <p class='introduction'><%= t "help_page.introduction" %></p>