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