Issue 662 - Job links shouldn't use anchors

includes/jobs/header.tmpl

Index: includes/jobs/header.tmpl
===================================================================
rename from pages/jobs.tmpl
rename to includes/jobs/header.tmpl
--- a/pages/jobs.tmpl
+++ b/includes/jobs/header.tmpl
@@ -1,8 +1,6 @@
-title=Working at Eyeo
-
 {#
   For each job opening you have to list the title and the name of the file under
-  includes/jobs/openings that contains the job description.
+  pages/jobs that contains the job description.
 #}
 {% set openings = [
   ("Account Manager USA/GB", "account-manager-usa-gb"),
@@ -17,38 +15,8 @@
 ] %}
 {% set german_openings = [] %}
 
-<script src="/js/jquery.ui.core.min.js"></script>
-<script src="/js/jquery.ui.widget.min.js"></script>
-<script src="/js/jquery.ui.tabs.min.js"></script>
-<script>
-  jQuery(function()
-  {
-    jQuery(
-      "ul:first", jQuery("#tabs-openings").tabs(
-      {
-        activate: function(event, ui)
-        {
-          var hash = ui.newTab.find("a")[0].hash;
-          if (hash != "#jobs-overview")
-            location.hash = hash;
-          window.scrollTo(0, 0);
-        }
-      })
-    ).addClass("ui-tabs-nav-vertical");
-
-    jQuery("#tabs-details").tabs();
-
-    jQuery(window).on("hashchange", function()
-    {
-      var hash = location.hash != "" ? location.hash : "#jobs-overview";
-      var escapedHash = hash.replace(/\+/g, "\\+");
-      jQuery("[href=" + escapedHash + "]").click();
-    });
-
-    setTimeout(function() { window.scrollTo(0, 0); }, 0);
-  });
-</script>
-
+{% set opening = openings|find(page.split("/")[-1], attribute=1) %}
+{% set title, _ = opening or (title, "") %}
 
 <header class="page-title">
   <h1>Working at Eyeo</h1>
@@ -59,11 +27,10 @@
     <div class="column sidebar-left">
       <h3 class="heading centered"><span>Current openings:</span></h3>
 
-      <ul>
-        <li id="jobs-overview-tab"><a href="#jobs-overview"></a></li>
+      <ul class="ui-tabs-nav ui-tabs-nav-vertical">
         {% for title, file in openings %}
-          <li>
-            <a href="#{{ title|slugify }}">
+          <li {% if file == page.split("/")[-1] %} class="ui-tabs-active" {% endif %}>
+            {{("jobs/" + file)|linkify(class="ui-tabs-anchor")}}
               {{ title }}
               {% if file in german_openings %}
                 <img src="/images/flags/de.png" alt="German" width="15" height="10">
@@ -84,40 +51,7 @@
     </div>
 
     <div class="column">
-      <div id="panels-openings">
-        <div id="jobs-overview">
-          <? include jobs/overview ?>
-
-          <div id="tabs-details">
-            <ul>
-              <li><a href="#why">Why work with us?</a></li>
-              <li><a href="#benefits">Employee benefits</a></li>
-              <li><a href="#office">Our office</a></li>
-            </ul>
-
-            <div id="why">
-              <? include jobs/why ?>
-            </div>
-
-            <div id="benefits">
-              <? include jobs/benefits ?>
-            </div>
-
-            <div id="office">
-              <? include jobs/office ?>
-            </div>
-          </div>
-        </div>
-
-        {% for title, file in openings %}
-          <div id="{{ title|slugify }}">
-            <h2>{{ title }}</h2>
-            <? include jobs/openings/{{ file }} ?>
-            <a href="mailto:jobs@eyeo.com"><button>apply now</button></a>
-            <a href="#jobs-overview"><button class="why-work-here-button">why work here?</button></a>
-          </div>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
-</div>
+      <div id="panels-openings" class="ui-tabs-panel">
+        {% if opening %}
+        <h2>{{ title }}</h2>
+        {% endif %}