Disable TO screens until screen 1 is filled out

styles/components/_progress_menu.scss

@@ -50,6 +50,12 @@
 
     a.active {
       color: $color-blue;
+      cursor: default;
+    }
+
+    a.disabled{
+      color: $color-gray-light;
+      cursor: default;
     }
 
 

templates/task_orders/new/menu.html

@@ -10,8 +10,17 @@
       {% endif %}
 
       <li class="progress-menu__item progress-menu__item--{{ step_indicator }}">
-        <a href="{{ url_for('task_orders.new', screen=loop.index, task_order_id=task_order_id) }}"
+        <a
-          {% if g.matchesPath(url_for('task_orders.new', screen=loop.index)) %}class="active"{% endif %}
+          {% set class='' %}
+          {% if task_order_id %}
+            href="{{ url_for('task_orders.new', screen=loop.index, task_order_id=task_order_id) }}"
+          {% else %}
+            {% set class="disabled"%}
+          {% endif %}
+          {% if g.matchesPath(url_for('task_orders.new', screen=loop.index)) %}
+            {% set class="active" %}
+          {% endif %}
+          class={{class}}
         >
           {{ s['title'] }}
         </a>