Issue 662 - Job links shouldn't use anchors

includes/jobs/generic-header.tmpl

Index: includes/jobs/generic-header.tmpl
===================================================================
rename from pages/jobs.tmpl
rename to includes/jobs/generic-header.tmpl
--- a/pages/jobs.tmpl
+++ b/includes/jobs/generic-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,7 @@
 ] %}
 {% 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 title, _ = openings|find(page.split("/")[-1], attribute=1) or (title, "") %}

[Sebastian Noack, 2015/03/20 17:00:52]

I'd rather move the whole logic into a function like get_title(page, openings).
This is a little much logic in the template for my taste, in particular if you
added already a filter for this particular use case.

[Wladimir Palant, 2015/03/20 17:35:52]

find() as it is currently defined is a pretty generic filter. get_title()
function on the other hand would have to consider specifics of the data
structure used in this particular template. All that would achieve is breaking
code locality and spreading out logic that belongs together.

[Wladimir Palant, 2015/03/20 17:35:52]

How about {% set opening = openings|find(page.split("/")[-1], attribute=1) %}
here and {% set title, _ = opening or (title, "") %}? The opening variable could
be reused in the footer to add the "apply now" button conditionally - you would
no longer need two footers.

[Sebastian Noack, 2015/03/20 17:50:28]

This would make the logic certainly clearer. Still not that great IMO.

[saroyanm, 2015/03/21 17:27:10]

Done.

 
 <header class="page-title">
   <h1>Working at Eyeo</h1>
@@ -59,11 +26,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 "jobs/" ~ file == page %} class="ui-tabs-active" {% endif %}>

[Wladimir Palant, 2015/03/20 17:35:52]

I really wouldn't hardcode the full page path here. Maybe {% if file ==
page.split("/")[-1] %} like above?

[saroyanm, 2015/03/21 17:27:10]

Done.

+            <a href="/en/jobs/{{ file }}" class="ui-tabs-anchor">

[Wladimir Palant, 2015/03/20 17:35:52]

This should be href="{{("jobs/" + file)|linkify}}"

[saroyanm, 2015/03/21 17:27:10]

Done.

               {{ title }}
               {% if file in german_openings %}
                 <img src="/images/flags/de.png" alt="German" width="15" height="10">
@@ -84,40 +50,4 @@
     </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">