In Day template, improve visual connection between Conditions and Todos.

[plomtask] / templates / day.html

diff --git a/templates/day.html b/templates/day.html
index f980cd1f5ad93d271e8103c981c8cdf49523e8fe..b611f154e37295a25156c9c6e57ee65ea4d6e789 100644 (file)
--- a/templates/day.html
+++ b/templates/day.html
@@ -7,25 +7,38 @@
 th {
   border: 1px solid black;
 }
-td.cond_line_0, td.cond_line_1, td.cond_line_2 {
+td.cond_line {
   padding: 0;
   border-top: 1px solid white;
+  background-repeat: no-repeat;
 }
-td.cond_line_0 {
+td.cond_line_left {
+  background-image: linear-gradient(to right, black 0.2em, transparent 0);
+}
+td.cond_line_right {
+  background-image: linear-gradient(to left, black 0.2em, transparent 0);
+}
+td.cond_0 {
   background-color: #bfbfbf;
 }
-td.cond_line_1 {
+td.cond_1 {
   background-color: #dfdfdf;
 }
-td.cond_line_2 {
-  background-color: #fffff;
+td.cond_2 {
+  background-color: fffff;
 }
-td.cond_line_corner {
+td.cond_corner {
   max-width: 0px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
 }
+td.cond_corner_left {
+  background-image: linear-gradient(145deg, transparent 60%, black 60%, black 70%, transparent 70%);
+}
+td.cond_corner_right {
+  background-image: linear-gradient(35deg, transparent 30%, black 30%, black 40%, transparent 40%);
+}
 td.todo_line {
   border-bottom: 1px solid #bfbfbf;
   height: 1.7em;
@@ -58,11 +71,11 @@ input.ablers {
 {% endif %}
 
 {% for condition in conditions_present %}
-<td class="cond_line_{{loop.index0 % 3}}">
+<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left">
 {% if condition in node.todo.conditions and not condition.is_active %}
-O&nbsp;
++&gt;
 {% elif condition in node.todo.blockers and condition.is_active %}
-!&nbsp;
+-&gt;
 {% endif %}
 </td>
 {% endfor %}
@@ -80,7 +93,7 @@ O&nbsp;
 </td>
 
 {% for condition in conditions_present|reverse %}
-<td class="cond_line_{{(conditions_present|length - loop.index) % 3}}">{% if condition in node.todo.enables %}&nbsp;+{% elif condition in node.todo.disables %}&nbsp;!{% endif %}</td>
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right">{% if condition in node.todo.enables %}+&gt;{% elif condition in node.todo.disables %}-&gt;{% endif %}</td>
 {% endfor %}
 
 <td colspan=2>
@@ -142,10 +155,12 @@ comment:
 add: <input type="text" name="new_todo" list="processes">
 </p>
 <p>
+make new todos
 <select name="make_type">
-<option value="full">make new todos with children</option>
-<option value="empty"{% if make_type == "empty" %}selected {% endif %}>make new todos without children</option>
+<option value="full">with</option>
+<option value="empty"{% if make_type == "empty" %}selected {% endif %}>without</option>
 </select>
+descendants (i.e. adopt where possible, otherwise create anew)
 </p>
 
 <table>
@@ -162,25 +177,25 @@ add: <input type="text" name="new_todo" list="processes">
 
 {% for _ in conditions_present %}
 {% if outer_loop.index > loop.index %}
-<td class="cond_line_{{loop.index0 % 3}}">
+<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left">
 {% elif outer_loop.index < loop.index %}
-<td class="cond_line_{{outer_loop.index0 % 3}}">
+<td class="cond_line cond_{{outer_loop.index0 % 3}}">
 {% else %}
-<td class="cond_line_{{outer_loop.index0 % 3}} cond_line_corner">×
+<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_corner cond_corner_left">
 {% endif %}
 </td>
 {% endfor %}
 
-<td class="cond_line_{{loop.index0 % 3}}"><input type="checkbox" disabled{% if condition.is_active %} checked{% endif %}></td>
-<td colspan=2 class="cond_line_{{loop.index0 % 3}}"><a href="condition?id={{condition.id_}}">{{condition.title.at(day.date)|e}}</a></td>
+<td class="cond_line cond_{{loop.index0 % 3}}"><input type="checkbox" disabled{% if condition.is_active %} checked{% endif %}></td>
+<td colspan=2 class="cond_line cond_{{loop.index0 % 3}}"><a href="condition?id={{condition.id_}}">{{condition.title.at(day.date)|e}}</a></td>
 
 {% for _ in conditions_present %}
 {% if outer_loop.index0 + loop.index < conditions_present|length %}
-<td class="cond_line_{{outer_loop.index0 % 3}}">
+<td class="cond_line cond_{{outer_loop.index0 % 3}}">
 {% elif outer_loop.index0 + loop.index > conditions_present|length %}
-<td class="cond_line_{{(conditions_present|length - loop.index) % 3}}">
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right">
 {% else %}
-<td class="cond_line_{{outer_loop.index0 % 3}} cond_line_corner">&nbsp;×
+<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_corner cond_corner_right">
 {% endif %}
 {% endfor %}
 
@@ -197,11 +212,11 @@ add: <input type="text" name="new_todo" list="processes">
 
 <tr>
 {% for condition in conditions_present %}
-<td class="cond_line_{{loop.index0 % 3}}"></td>
+<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left"></td>
 {% endfor %}
 <th colspan=3>doables</th>
 {% for condition in conditions_present %}
-<td class="cond_line_{{(conditions_present|length - loop.index) % 3}}"></td>
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right"></td>
 {% endfor %}
 <th colspan=2>comments</th>
 </tr>