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 6d927fdb1c09ab1f2d1fc1e9fa48a0bfef814b20..b611f154e37295a25156c9c6e57ee65ea4d6e789 100644 (file)
--- a/templates/day.html
+++ b/templates/day.html
@@ -4,37 +4,48 @@
 
 
 {% block css %}
-table {
-  border-collapse: collapse;
-}
 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_left {
+  background-image: linear-gradient(to right, black 0.2em, transparent 0);
 }
-td.cond_line_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;
 }
 tr.inactive > td.todo_line {
   background-color: #bfbfbf;
+  border-bottom: 1px solid white;
 }
 tr.hidden_undone > td, tr.hidden_undone a {
   color: #9f9f9f;
@@ -60,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 %}
@@ -74,7 +85,7 @@ O&nbsp;
 <td class="todo_line">{% if node.todo.effort %}{{ node.todo.effort }}{% endif %}</td>
 {% else %}
 <td class="todo_line left_border"><input name="done" type="checkbox" value="{{node.todo.id_}}" {% if not node.todo.is_doable %}disabled{% endif %}/></td>
-<td class="todo_line"><input name="effort" type="number" step=0.1 size=5 placeholder={{node.todo.effort_then}} value={{node.todo.effort}} /></td>
+<td class="todo_line"><input name="effort" type="number" step=0.1 placeholder={{node.todo.effort_then}} value={{node.todo.effort}} /></td>
 {% endif %}
 <td class="todo_line right_border">
 {% for i in range(indent) %}&nbsp; &nbsp; {% endfor %} +
@@ -82,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>
@@ -109,13 +120,12 @@ O&nbsp;
 {% macro show_node_done(node, indent, path) %}
 {% if node.todo.has_doneness_in_path %}
 <tr{% if not node.todo.is_done %} class="hidden_undone"{% endif %}>
+<td class="number">{{ '{:4.1f}'.format(node.todo.performed_effort) }}</td>
+<td class="number">{{ '{:4.1f}'.format(node.todo.tree_effort) }}</td>
 <td>
 {% for i in range(indent) %}&nbsp; &nbsp; {% endfor %} +
-{% if not node.todo.is_done %}({% endif %}<a href="todo?id={{node.todo.id_}}">{{node.todo.title_then|e}}</a>{% if not node.todo.is_done %}){% endif %}
-</td>
-<td>{{node.todo.comment|e}}</td>
+{% if not node.todo.is_done %}({% endif %}{% if node.seen %}[{% endif %}<a href="todo?id={{node.todo.id_}}">{{node.todo.title_then|e}}</a>{% if node.seen %}]{% endif %}{% if not node.todo.is_done %}){% endif %}{% if node.todo.comment %} · {{node.todo.comment|e}}{% endif %}</td>
 </tr>
-
 {% if not node.seen %}
 {% for child in node.children %}
 {{ show_node_done(child, indent+1) }}
@@ -127,7 +137,7 @@ O&nbsp;
 
 
 {% block content %}
-<h3>{{day.date}} / {{day.weekday}}</h3>
+<h3>{{day.date}} / {{day.weekday}} ({{day.total_effort|round(1)}})</h3>
 <p>
 <a href="day?date={{day.prev_date}}">prev</a> | <a href="day?date={{day.next_date}}">next</a>
 </p>
@@ -144,6 +154,14 @@ comment:
 <p>
 add: <input type="text" name="new_todo" list="processes">
 </p>
+<p>
+make new todos
+<select name="make_type">
+<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>
 
@@ -159,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 %}
 
@@ -194,13 +212,13 @@ 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 %}
-<td colspan=2></td>
+<th colspan=2>comments</th>
 </tr>
 {% for node in top_nodes %}
 {{ show_node_undone(node, 0) }}
@@ -210,7 +228,13 @@ add: <input type="text" name="new_todo" list="processes">
 
 <h4>done</h4>
 
-<table>
+<table class="alternating">
+<tr>
+<th colspan=2>effort</th><th rowspan=2>action · comment</th>
+</tr>
+<tr>
+<th>self</th><th>tree</th>
+</tr>
 {% for node in top_nodes %}
 {{ show_node_done(node, 0, []) }}
 {% endfor %}