compact menu fix, changeset highlight styles

app/assets/javascripts/index/history.js

@@ -29,7 +29,7 @@ OSM.History = function(map) {
   };
 
   function highlightChangeset(id) {
-    group.getLayer(id).setStyle({fillOpacity: 0.5});
+    group.getLayer(id).setStyle({fillOpacity: 0.3});
     $("#changeset_" + id).addClass("selected");
   }
 

app/assets/javascripts/leaflet.extend.js.erb

@@ -125,7 +125,7 @@ L.extend(L.Map.prototype, {
             area: options.style,
             changeset: {
               weight: 2,
-              color: '#e90',
+              color: '#7ebc6f',
               fillOpacity: 0
             }
           }

app/assets/stylesheets/common.css.scss

@@ -397,6 +397,7 @@ nav.secondary {
 
     a {
       padding: 5px 15px;
+
     }
 
     &.logged-in > a {
@@ -404,7 +405,9 @@ nav.secondary {
       > .user-button {
         padding: 5px 10px 5px 6px;
         display: inline-block;
+        color: $darkgrey;
       }
+      &:hover > .user-button { color: darken($darkgrey, 5%); }
     }
   }
 
@@ -433,7 +436,8 @@ nav.secondary {
 
   .dropdown-menu {
     left: auto;
-    right: 0;
+    right: -1px;
+    border-radius: 3px 0 3px 3px;
 
     .count-number {
       float: right;
@@ -443,6 +447,25 @@ nav.secondary {
   }
 }
 
+#compact-secondary-nav {
+  display: none;
+  ul li a {
+    width: 100%;
+    color: #333;
+    &:hover { color: #fff; }
+  }
+}
+
+@media only screen and (max-width:960px) {
+  #compact-secondary-nav {
+    display: inline-block;
+  }
+  .compact-hide {
+    display: none;
+  }
+}
+
+
 /* Utility for styling notification numbers */
 
 .count-number {
@@ -2281,6 +2304,7 @@ a.button {
   list-style: none;
   background-color: #ffffff;
   border: 1px solid #ccc;
+  border-radius: 0 3px 3px;
   *border-right-width: 2px;
   *border-bottom-width: 2px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

app/views/layouts/_head.html.erb

@@ -2,8 +2,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
   <%= javascript_include_tag "application" %>
   <!--[if lt IE 7]><%= javascript_include_tag "pngfix" %><![endif]--> <!-- thanks, microsoft! -->
-  <%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:641px)" %>
+  <%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:721px)" %>
-  <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 642px)" %>
+  <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 722px)" %>
   <%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
   <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
   <!--[if IE]>

app/views/layouts/_header.html.erb

@@ -37,11 +37,20 @@
   </nav>
   <nav class='secondary'>
     <ul>
+      <li class="compact-hide <%= current_page_class(traces_path) %>"><%= link_to t('layouts.gps_traces'), traces_path %></li>
+      <li class="compact-hide <%= current_page_class(diary_path) %>"><%= link_to t('layouts.user_diaries'), diary_path %></li>
+      <li class="compact-hide <%= current_page_class(help_path) %>"><%= link_to t('layouts.help'), help_path %></li>
+      <li class="compact-hide <%= current_page_class(about_path) %>"><%= link_to t('layouts.about'), about_path %></li>
+      <li id="compact-secondary-nav" class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <b class="caret"></b></a>
+        <ul class="dropdown-menu">
           <li class="<%= current_page_class(traces_path) %>"><%= link_to t('layouts.gps_traces'), traces_path %></li>
           <li class="<%= current_page_class(diary_path) %>"><%= link_to t('layouts.user_diaries'), diary_path %></li>
           <li class="<%= current_page_class(help_path) %>"><%= link_to t('layouts.help'), help_path %></li>
           <li class="<%= current_page_class(about_path) %>"><%= link_to t('layouts.about'), about_path %></li>
         </ul>
+      </li>
+    </ul>
     <% if @user %>
       <div class='dropdown user-menu logged-in'>
         <a class='dropdown-toggle' data-toggle='dropdown' href="#">