From 3bc56075efe4e4409824c7bd99a55593905e960e Mon Sep 17 00:00:00 2001
From: Christian Heller <c.heller@plomlompom.de>
Date: Tue, 11 Jun 2024 21:35:05 +0200
Subject: [PATCH] Template layout and code improvements.

---
 templates/_base.html      | 26 ++++++++++++++++++++++++--
 templates/_macros.html    |  2 ++
 templates/calendar.html   |  4 ++--
 templates/conditions.html |  4 ++--
 templates/day.html        | 24 +++++++++++++-----------
 templates/process.html    |  8 +++++---
 templates/processes.html  | 10 +++++-----
 templates/todo.html       |  2 +-
 templates/todos.html      | 11 +++++------
 9 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/templates/_base.html b/templates/_base.html
index 0b44171..182a1c6 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -6,10 +6,17 @@ body {
   font-family: monospace;
   text-align: left;
   padding: 0;
+  background-color: white;
 }
 input[type="text"] {
   width: 100em;
 }
+input.timestamp {
+  width: 11em;
+}
+input.date {
+  width: 6em;
+}
 input.btn-harmless {
   color: green;
 }
@@ -21,7 +28,6 @@ div.btn-to-right {
   text-align: right;
 }
 td, th, tr, table {
-  vertical-align: top;
   margin-top: 1em;
   padding: 0;
   border-collapse: collapse;
@@ -32,11 +38,27 @@ th, td {
 a {
   color: black;
 }
-table.edit_table > tbody > tr > td, table.main > tbody > tr > th {
+table.edit_table > tbody > tr > td,
+table.edit_table > tbody > tr > th {
   border-bottom: 0.1em solid #bbbbbb;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
+td.number, input[type="number"] {
+  text-align: right;
+}
+input[name="effort"] {
+  width: 3.5em;
+}
+textarea {
+  width: 100%;
+}
+table.alternating > tbody > tr:nth-child(odd) {
+  background-color: #dfdfdf;
+}
+div.edit_buttons {
+  margin-top: 1em;
+}
 {% block css %}
 {% endblock %}
 </style>
diff --git a/templates/_macros.html b/templates/_macros.html
index a19c063..23dfbe9 100644
--- a/templates/_macros.html
+++ b/templates/_macros.html
@@ -1,8 +1,10 @@
 {% macro edit_buttons() %}
+<div class="edit_buttons">
 <input class="btn-harmless" type="submit" name="update" value="update" />
 <div class="btn-to-right">
 <input class="btn-dangerous" type="submit" name="delete" value="delete" />
 </div>
+</div>
 {% endmacro %}
 
 
diff --git a/templates/calendar.html b/templates/calendar.html
index 699caab..4e83573 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -38,8 +38,8 @@ td.today {
 <p><a href="/calendar_txt">basic view</a></p>
 
 <form action="calendar" method="GET">
-from <input name="start" value="{{start}}" />
-to <input name="end" value="{{end}}" />
+from <input name="start" class="date" value="{{start}}" />
+to <input name="end" class="date" value="{{end}}" />
 <input type="submit" value="OK" />
 </form>
 <table>
diff --git a/templates/conditions.html b/templates/conditions.html
index 5990711..aa8fcac 100644
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -5,10 +5,10 @@
 
 <form action="conditions" method="GET">
 <input type="submit" value="filter" />
-<input name="pattern" value="{{pattern}}" />
+<input name="pattern" type="text" value="{{pattern}}" />
 </form>
 
-<table>
+<table class="alternating">
 <tr>
 <th><a href="?sort_by={% if sort_by == "is_active" %}-{% endif %}is_active">active</a></th>
 <th><a href="?sort_by={% if sort_by == "title" %}-{% endif %}title">title</a></th>
diff --git a/templates/day.html b/templates/day.html
index 93a430f..2941105 100644
--- a/templates/day.html
+++ b/templates/day.html
@@ -4,9 +4,6 @@
 
 
 {% block css %}
-table {
-  border-collapse: collapse;
-}
 th {
   border: 1px solid black;
 }
@@ -35,6 +32,7 @@ td.todo_line {
 }
 tr.inactive > td.todo_line {
   background-color: #bfbfbf;
+  border-bottom: 1px solid white;
 }
 tr.hidden_undone > td, tr.hidden_undone a {
   color: #9f9f9f;
@@ -74,7 +72,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 %} +
@@ -109,13 +107,11 @@ 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>{{node.todo.performed_effort}}</td>
-<td>{{node.todo.tree_effort|round(1)}}</td>
+<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 %}
@@ -201,7 +197,7 @@ add: <input type="text" name="new_todo" list="processes">
 {% for condition in conditions_present %}
 <td class="cond_line_{{(conditions_present|length - loop.index) % 3}}"></td>
 {% endfor %}
-<td colspan=2></td>
+<th colspan=2>comments</th>
 </tr>
 {% for node in top_nodes %}
 {{ show_node_undone(node, 0) }}
@@ -211,7 +207,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 %}
diff --git a/templates/process.html b/templates/process.html
index 4027f50..60687d8 100644
--- a/templates/process.html
+++ b/templates/process.html
@@ -84,8 +84,8 @@ edit process of ID {{process.id_}}
 <td><input name="title" type="text" value="{{process.title.newest|e}}" />{% if process.id_ %} [<a href="process_titles?id={{process.id_}}">history</a>]{% endif %}</td>
 </tr>
 <tr>
-<th>default effort</th>
-<td><input name="effort" type="number" step=0.1 value={{process.effort.newest}} />{% if process.id_ %} [<a href="process_efforts?id={{process.id_}}">history</a>]{% endif %}</td>
+<th>effort</th>
+<td><input type="number" name="effort" step=0.1 value={{process.effort.newest}} />{% if process.id_ %} [<a href="process_efforts?id={{process.id_}}">history</a>]{% endif %}</td>
 </tr>
 <tr>
 <th>description</th>
@@ -114,12 +114,14 @@ edit process of ID {{process.id_}}
 <tr>
 <th>steps</th>
 <td>
+{% if steps %}
 <table>
 {% for step_id, step_node in steps.items() %}
 {{ step_with_steps(step_id, step_node, 0) }}
 {% endfor %}
 </table>
-add: <input name="new_top_step" list="process_candidates" autocomplete="off" value="{{preset_top_step or ''}}" />
+{% endif %}
+add: <input type="text" name="new_top_step" list="process_candidates" autocomplete="off" value="{{preset_top_step or ''}}" />
 </td>
 </tr>
 <tr>
diff --git a/templates/processes.html b/templates/processes.html
index c057890..b6a9608 100644
--- a/templates/processes.html
+++ b/templates/processes.html
@@ -5,10 +5,10 @@
 
 <form action="processes" method="GET">
 <input type="submit" value="filter" />
-<input name="pattern" value="{{pattern}}" />
+<input name="pattern" type="text" value="{{pattern}}" />
 </form>
 
-<table>
+<table class="alternating">
 <tr>
 <th><a href="?sort_by={% if sort_by == "steps" %}-{% endif %}steps">steps</a></th>
 <th><a href="?sort_by={% if sort_by == "owners" %}-{% endif %}owners">owners</a></th>
@@ -17,9 +17,9 @@
 </tr>
 {% for process in processes %}
 <tr>
-<td>{{ process.explicit_steps|count }}</td>
-<td>{{ process.n_owners }}</td>
-<td>{{ process.effort.newest }}</td>
+<td class="number">{{ process.explicit_steps|count }}</td>
+<td class="number">{{ process.n_owners }}</td>
+<td class="number">{{ process.effort.newest }}</td>
 <td><a href="process?id={{process.id_}}">{{process.title.newest}}</a></td>
 </tr>
 {% endfor %}
diff --git a/templates/todo.html b/templates/todo.html
index fd16680..f62b0d1 100644
--- a/templates/todo.html
+++ b/templates/todo.html
@@ -24,7 +24,7 @@
 </tr>
 <tr>
 <th>effort</th>
-<td><input type="number" name="effort" step=0.1 size=5 placeholder={{todo.effort_then}} value={{todo.effort}} /></td>
+<td><input type="number" name="effort" step=0.1 placeholder={{todo.effort_then}} value={{todo.effort}} /></td>
 </tr>
 <tr>
 <th>comment</th>
diff --git a/templates/todos.html b/templates/todos.html
index 3dd1f3f..ac5240a 100644
--- a/templates/todos.html
+++ b/templates/todos.html
@@ -7,15 +7,14 @@
 <h3>todos</h3>
 
 <form action="todos" method="GET">
+from <input name="start" class="date" value="{{start}}" />
+to <input name="end" class="date" value="{{end}}" /><br />
+process <input name="process_id" type="text" value="{{process_id or ''}}" list="processes" /><br />
+in comment  <input name="comment_pattern" type="text" value="{{comment_pattern}}" /><br />
 <input type="submit" value="filter" />
-process <input name="process_id" value="{{process_id or ''}}" list="processes" />
-from <input name="start" value="{{start}}" />
-to <input name="end" value="{{end}}" />
-in comment  <input name="comment_pattern" value="{{comment_pattern}}" />
-<input type="submit" value="OK" />
 </form>
 
-<table>
+<table class="alternating">
 <tr>
 <th><a href="?sort_by={% if sort_by == "doneness" %}-{% endif %}doneness">done</a></th>
 <th><a href="?sort_by={% if sort_by == "date" %}-{% endif %}date">date</a></th>
-- 
2.30.2