From 12be63c6ef58282cb6b7d5b7bc2eabe8946a1bfc Mon Sep 17 00:00:00 2001
From: Christian Heller <c.heller@plomlompom.de>
Date: Sat, 18 May 2024 02:46:56 +0200
Subject: [PATCH] Improve template layouts.

---
 templates/base.html      |   6 +++
 templates/calendar.html  |  17 +++++--
 templates/condition.html |  23 +++++++--
 templates/process.html   |  34 +++++++++----
 templates/todo.html      | 106 +++++++++++++++++++++++++++------------
 5 files changed, 135 insertions(+), 51 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 87b1864..0070630 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,6 +4,8 @@
 <style>
 body {
   font-family: monospace;
+  text-align: left;
+  padding: 0;
 }
 input.btn-harmless {
   color: green;
@@ -15,6 +17,10 @@ div.btn-to-right {
   float: right;
   text-align: right;
 }
+td, th, tr, table {
+  vertical-align: top;
+  padding: 0;
+}
 {% block css %}
 {% endblock %}
 </style>
diff --git a/templates/calendar.html b/templates/calendar.html
index 715131a..eae103d 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -1,8 +1,19 @@
 {% extends 'base.html' %}
 
 {% block css %}
-tr.week_row td { height: 0.1em; background-color: black; padding: 0; margin: 0; }
-tr.month_row td { border: 0.1em solid black; text-align: center; }
+tr.week_row td {
+  height: 0.1em;
+  background-color: black;
+  padding: 0;
+  margin: 0;
+}
+tr.month_row td {
+  border: 0.1em solid black;
+  text-align: center;
+}
+td.day_name {
+  padding-right: 0.5em;
+}
 {% endblock %}
 
 
@@ -29,7 +40,7 @@ to <input name="end" value="{{end}}" />
 {% endif %}
 
 <tr>
-<td>{{day.weekday|truncate(2,True,'',0)}}</td>
+<td class="day_name">{{day.weekday|truncate(2,True,'',0)}}</td>
 <td><a href="day?date={{day.date}}">{{day.date}}</a></td>
 <td>{{day.comment|e}}</td>
 </tr>
diff --git a/templates/condition.html b/templates/condition.html
index 92f04eb..00aeedb 100644
--- a/templates/condition.html
+++ b/templates/condition.html
@@ -1,16 +1,31 @@
 {% extends 'base.html' %}
 
+
+
 {% block content %}
 <h3>condition</h3>
 <form action="condition?id={{condition.id_ or ''}}" method="POST">
-title: <input name="title" value="{{condition.title.newest|e}}" />
-description: <input name="description" value="{{condition.description.newest|e}}" />
-is active: <input name="is_active" type="checkbox" {% if condition.is_active %}checked{% endif %} />
+<table>
+
+<tr>
+<th>title</th>
+<td><input name="title" value="{{condition.title.newest|e}}" /></td>
+<tr/>
 
+<tr>
+<th>is active</th>
+<td><input name="is_active" type="checkbox" {% if condition.is_active %}checked{% endif %} /></td>
+<tr/>
+
+<tr>
+<th>description</th>
+<td><input name="description" value="{{condition.description.newest|e}}" /></td>
+<tr/>
+
+</table>
 <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>
-
 {% endblock %}
 
diff --git a/templates/process.html b/templates/process.html
index 2a57715..10442cf 100644
--- a/templates/process.html
+++ b/templates/process.html
@@ -21,7 +21,7 @@
 </td>
 <td>
 {% if step_node.is_explicit %}
-add step: <input name="new_step_to_{{step_id}}" list="candidates" autocomplete="off" />
+add: <input name="new_step_to_{{step_id}}" list="candidates" autocomplete="off" />
 {% endif %}
 </td>
 </tr>
@@ -38,18 +38,22 @@ add step: <input name="new_step_to_{{step_id}}" list="candidates" autocomplete="
 <h3>process</h3>
 <form action="process?id={{process.id_ or ''}}" method="POST">
 <table>
+
 <tr>
 <th>title</th>
 <td><input name="title" value="{{process.title.newest|e}}" /></td>
 </tr>
+
 <tr>
 <th>default effort</th>
 <td><input name="effort" type="number" step=0.1 value={{process.effort.newest}} /></td>
 </tr>
+
 <tr>
 <th>description</th>
 <td><textarea name="description">{{process.description.newest|e}}</textarea></td>
 </tr>
+
 <tr>
 <th>conditions</th>
 <td>
@@ -65,9 +69,10 @@ add step: <input name="new_step_to_{{step_id}}" list="candidates" autocomplete="
 </tr>
 {% endfor %}
 </table>
-add condition: <input name="condition" list="condition_candidates" autocomplete="off" />
+add: <input name="condition" list="condition_candidates" autocomplete="off" />
 </td>
 </tr>
+
 <tr>
 <th>enables</th>
 <td>
@@ -83,9 +88,10 @@ add condition: <input name="condition" list="condition_candidates" autocomplete=
 </tr>
 {% endfor %}
 </table>
-add enables: <input name="enables" list="condition_candidates" autocomplete="off" />
+add: <input name="enables" list="condition_candidates" autocomplete="off" />
 </td>
 </tr>
+
 <tr>
 <th>disables</th>
 <td>
@@ -101,9 +107,10 @@ add enables: <input name="enables" list="condition_candidates" autocomplete="off
 </tr>
 {% endfor %}
 </table>
-add disables: <input name="disables" list="condition_candidates" autocomplete="off" />
+add: <input name="disables" list="condition_candidates" autocomplete="off" />
 </td>
 </tr>
+
 <tr>
 <th>steps</th>
 <td>
@@ -112,9 +119,19 @@ add disables: <input name="disables" list="condition_candidates" autocomplete="o
 {{ step_with_steps(step_id, step_node, 0) }}
 {% endfor %}
 </table>
-add step: <input name="new_top_step" list="step_candidates" autocomplete="off" />
+add: <input name="new_top_step" list="step_candidates" autocomplete="off" />
+</td>
+<tr>
+
+<tr>
+<th>step of</th>
+<td>
+{% for owner in owners %}
+<a href="process?id={{owner.id_}}">{{owner.title.newest|e}}</a><br />
+{% endfor %}
 </td>
 <tr>
+
 </table>
 <datalist id="condition_candidates">
 {% for condition_candidate in condition_candidates %}
@@ -126,15 +143,10 @@ add step: <input name="new_top_step" list="step_candidates" autocomplete="off" /
 <option value="{{candidate.id_}}">{{candidate.title.newest|e}}</option>
 {% endfor %}
 </datalist>
+
 <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>
 </form>
-<h4>step of</h4>
-<ul>
-{% for owner in owners %}
-<li><a href="process?id={{owner.id_}}">{{owner.title.newest|e}}</a>
-{% endfor %}
-</ul>
 {% endblock %}
diff --git a/templates/todo.html b/templates/todo.html
index 9395ada..44cdfa7 100644
--- a/templates/todo.html
+++ b/templates/todo.html
@@ -5,14 +5,31 @@
 {% block content %}
 <h3>Todo: {{todo.process.title.newest|e}}</h3>
 <form action="todo?id={{todo.id_}}" method="POST">
-<p>
-id: {{todo.id_}}<br />
-day: <a href="day?date={{todo.date}}">{{todo.date}}</a><br />
-process: <a href="process?id={{todo.process.id_}}">{{todo.process.title.newest|e}}</a><br />
-done: <input type="checkbox" name="done" {% if todo.is_done %}checked {% endif %} {% if not todo.is_doable %}disabled {% endif %}/><br /> 
-comment: <input name="comment" value="{{todo.comment|e}}"/>
-</p>
-<h4>conditions</h4>
+<table>
+
+<tr>
+<th>day</th>
+<td><a href="day?date={{todo.date}}">{{todo.date}}</a></td>
+</tr>
+
+<tr>
+<th>process</th>
+<td><a href="process?id={{todo.process.id_}}">{{todo.process.title.newest|e}}</a></td>
+</tr>
+
+<tr>
+<th>done</th>
+<td><input type="checkbox" name="done" {% if todo.is_done %}checked {% endif %} {% if not todo.is_doable %}disabled {% endif %}/><br /></td>
+</tr>
+
+<tr>
+<th>comment</th>
+<td><input name="comment" value="{{todo.comment|e}}"/></td>
+</tr>
+
+<tr>
+<th>conditions</th>
+<td>
 <table>
 {% for condition in todo.conditions %}
 <tr>
@@ -25,13 +42,13 @@ comment: <input name="comment" value="{{todo.comment|e}}"/>
 </tr>
 {% endfor %}
 </table>
-add condition: <input name="condition" list="condition_candidates" autocomplete="off" />
-<datalist id="condition_candidates">
-{% for condition_candidate in condition_candidates %}
-<option value="{{condition_candidate.id_}}">{{condition_candidate.title.newest|e}}</option>
-{% endfor %}
-</datalist>
-<h4>enables</h4>
+add: <input name="condition" list="condition_candidates" autocomplete="off" />
+</td>
+</tr>
+
+<tr>
+<th>enables</th>
+<td>
 <table>
 {% for condition in todo.enables %}
 <tr>
@@ -44,8 +61,13 @@ add condition: <input name="condition" list="condition_candidates" autocomplete=
 </tr>
 {% endfor %}
 </table>
-add enables: <input name="enables" list="condition_candidates" autocomplete="off" />
-<h4>disables</h4>
+add: <input name="enables" list="condition_candidates" autocomplete="off" />
+</td>
+</tr>
+
+<tr>
+<th>disables</th>
+<td>
 <table>
 {% for condition in todo.disables%}
 <tr>
@@ -58,31 +80,49 @@ add enables: <input name="enables" list="condition_candidates" autocomplete="off
 </tr>
 {% endfor %}
 </table>
-add disables: <input name="disables" list="condition_candidates" autocomplete="off" />
-<h4>parents</h4>
-<ul>
+add: <input name="disables" list="condition_candidates" autocomplete="off" />
+</td>
+</tr>
+
+<tr>
+<th>parents</th>
+<td>
 {% for parent in todo.parents %}
-<li><a href="todo?id={{parent.id_}}">{{parent.process.title.newest|e}}</a>
+<a href="todo?id={{parent.id_}}">{{parent.process.title.newest|e}}</a><br />
 {% endfor %}
-</ul>
-<h4>children</h4>
-<ul>
+</td>
+</tr>
+
+<tr>
+<th>children</th>
+<td>
+<table>
 {% for child in todo.children %}
-<li><input type="checkbox" name="adopt" value="{{child.id_}}" checked />
-<a href="todo?id={{child.id_}}">{{child.process.title.newest|e}}</a>
+<tr>
+<td><input type="checkbox" name="adopt" value="{{child.id_}}" checked /></td>
+<td><a href="todo?id={{child.id_}}">{{child.process.title.newest|e}}</a></td>
+</tr>
 {% endfor %}
-</ul>
+</table>
 adopt: <input name="adopt" list="todo_candidates" autocomplete="off" />
-<datalist id="todo_candidates">
-{% for candidate in todo_candidates %}
-<option value="{{candidate.id_}}">{{candidate.process.title.newest|e}} ({{candidate.id_}})</option>
-{% endfor %}
-</datalist>
+</td>
+</tr>
 
+</table>
 <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>
+</form>
 
-</form
+<datalist id="condition_candidates">
+{% for condition_candidate in condition_candidates %}
+<option value="{{condition_candidate.id_}}">{{condition_candidate.title.newest|e}}</option>
+{% endfor %}
+</datalist>
+<datalist id="todo_candidates">
+{% for candidate in todo_candidates %}
+<option value="{{candidate.id_}}">{{candidate.process.title.newest|e}} ({{candidate.id_}})</option>
+{% endfor %}
+</datalist>
 {% endblock %}
-- 
2.30.2