merge quick access menu from the staging site

michael63-osm · michael63-osm · commit d8a1fc16f647 · 2017-02-03T13:31:49.000+01:00
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -37,7 +37,7 @@
   <body>
    <div id='wrapper'>
     <div class="fillG cell11" id="banner-top">
-      <div class="dropdown marginL"> <a> {{site.translations.[page.lang].language}} ... </a>
+      <div class="dropdown language-switcher marginL"> <a> {{site.translations.[page.lang].language}} ... </a>
         <div class='language-switcher dropdown-content'>
           {% assign start_page = "/" | append: page.lang | append: "/" | strip %}
           {% assign this_page = page.permalink | strip %}
@@ -72,6 +72,29 @@
           {% endif %}
         </div>
       </div>
+      <div class="dropdown quick-access"> <a> {{site.translations.[page.lang].quickaccess}} </a>
+        <div class='quick-access dropdown-content'>
+          <!-- find out whether the remote-tracing guide exists in the current language; otherwise we will use English -->
+          {% assign remote_tracing = "/" | append: page.lang | append: "/coordination/remote-tracing/" %}
+          {% assign found = "0" %}
+          {% for post in site.categories['coordination'] %}
+            {% if post.permalink == remote_tracing %}
+              {% assign found = "1" %}
+              {% break %}
+            {% endif %}
+          {% endfor %}
+          {% if found == "1" %}
+            {% assign use_lang = page.lang %}
+          {% else %}
+            {% assign use_lang = "en" %}
+          {% endif %}
+          <!-- now build the menu proper -->
+          {% assign remote_tracing = "/" | append: use_lang | append: "/coordination/remote-tracing" %}
+          <a href="{{remote_tracing}}/#highways-howto">Highways - How to map</a><br>
+          <a href="{{remote_tracing}}/#residential-howto">landuse=residential - How to map</a><br>
+          <a href="{{remote_tracing}}/#buildings-howto">Buildings - How to map</a><br>
+        </div>
+      </div>
       <!-- small search bar does not appear on the front page -->
       {% unless page.fronttitle or page.contributetitle%}
       <form class='searchbox-default rounded'>
diff --git a/site.js b/site.js
@@ -2,22 +2,35 @@
 ---
 $(function() {
     var app = window.app;
-    $('.dropdown').hover(
+    $('.dropdown.language-switcher').hover(
         function() {
-            $('.dropdown-content').addClass('active');
+            $('.dropdown-content.language-switcher').addClass('active');
         },
         function() {
-            $('.dropdown-content').removeClass('active');
+            $('.dropdown-content.language-switcher').removeClass('active');
         }
     );
+    $('.dropdown.quick-access').hover(
+        function() {
+            $('.dropdown-content.quick-access').addClass('active');
+        },
+        function() {
+            $('.dropdown-content.quick-access').removeClass('active');
+        }
+    );
+    $('.dropdown.language-switcher > a').on('touchstart', function(e) {
+        e.preventDefault();
+        $('.dropdown-content.language-switcher').toggleClass('active');
+    });
+    $('.dropdown.quick-access > a').on('touchstart', function(e) {
+        e.preventDefault();
+        $('.dropdown-content.quick-access').toggleClass('active');
+    });
     $('.language-switcher a').each(function(i, e) {
         if (app.permalink.length < 3) return;
         var remainder = app.permalink.match(/(\/[^\/]+)(\/.*)/)[2];
-        $(e).attr('href',
-            app.baseurl + '/' +
-            $(e).attr('lang') +
-            remainder
-        );
+        var new_url = app.baseurl + '/' + $(e).attr('lang') + remainder;
+        $(e).attr('href', new_url);
     });
     $('.language-switcher a[lang=' + app.lang + ']').addClass('active');
       // contribute banner pops out when hovered over
diff --git a/style.css b/style.css
@@ -259,21 +259,22 @@ body {
   left:0;
 }
 .dropdown {
+  padding:6px 20px;
   position:relative;
   display:inline-block;
 }
 .dropdown-content {
   display:none;
 }
 .dropdown-content.active {
+  padding:6px 20px;
   display:block;
   position:absolute;
   background-color:#f0f0f0;
   z-index:1;
 }
-.language-switcher {
-  padding:6px 20px;
-}
+.dropdown-content.language-switcher { width: 20ch; }
+.dropdown-content.quick-access { width: 35ch; }
 .language-switcher a.active {
   color: #79bc5f;
   text-decoration: none;
