From 83c31bdf2a1b2cd1f3beadee482feb91c64759f9 Mon Sep 17 00:00:00 2001 From: Christian Heller <c.heller@plomlompom.de> Date: Sat, 8 Jun 2024 21:04:07 +0200 Subject: [PATCH] Improve multiple template layouts and refactor CSS. --- templates/_base.html | 8 ++++++++ templates/condition.html | 28 ++++++++++------------------ templates/day.html | 15 ++++++--------- templates/process.html | 29 +++++------------------------ templates/todo.html | 20 ++++---------------- 5 files changed, 33 insertions(+), 67 deletions(-) diff --git a/templates/_base.html b/templates/_base.html index 0d2debe..0b44171 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -7,6 +7,9 @@ body { text-align: left; padding: 0; } +input[type="text"] { + width: 100em; +} input.btn-harmless { color: green; } @@ -29,6 +32,11 @@ th, td { a { color: black; } +table.edit_table > tbody > tr > td, table.main > tbody > tr > th { + border-bottom: 0.1em solid #bbbbbb; + padding-top: 0.5em; + padding-bottom: 0.5em; +} {% block css %} {% endblock %} </style> diff --git a/templates/condition.html b/templates/condition.html index 8deb71c..7142363 100644 --- a/templates/condition.html +++ b/templates/condition.html @@ -3,34 +3,29 @@ -{% block css %} -input[name="title"] { - width: 100em; -} -{% endblock %} - - - {% block content %} -<h3>{% if is_new %}NEW {% endif %}condition</h3> +<h3> +{% if is_new %} +add NEW condition +{% else %} +edit condition of ID {{condition.id_}} +{% endif %} +</h3> <form action="condition?id={{condition.id_ or ''}}" method="POST"> -<table> +<table class="edit_table"> <tr> <th>title</th> -<td><input name="title" value="{{condition.title.newest|e}}" />{% if condition.id_ %} [<a href="condition_titles?id={{condition.id_}}">history</a>]{% endif %}</td> +<td><input name="title" type="text" value="{{condition.title.newest|e}}" />{% if condition.id_ %} [<a href="condition_titles?id={{condition.id_}}">history</a>]{% endif %}</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><textarea name="description">{{condition.description.newest|e}}</textarea>{% if condition.id_ %} [<a href="condition_descriptions?id={{condition.id_}}">history</a>]{% endif %}</td> <tr/> - <tr> <th>enables</th> <td> @@ -39,7 +34,6 @@ input[name="title"] { {% endfor %} </td> </tr> - <tr> <th>disables</th> <td> @@ -48,7 +42,6 @@ input[name="title"] { {% endfor %} </td> </tr> - <tr> <th>enabled by</th> <td> @@ -57,7 +50,6 @@ input[name="title"] { {% endfor %} </td> </tr> - <tr> <th>disabled by</th> <td> @@ -66,8 +58,8 @@ input[name="title"] { {% endfor %} </td> </tr> - </table> + {{ macros.edit_buttons() }} {% endblock %} diff --git a/templates/day.html b/templates/day.html index 3b2e96a..c3a20aa 100644 --- a/templates/day.html +++ b/templates/day.html @@ -4,26 +4,23 @@ {% block css %} -td, th, tr, table { - padding: 0; - margin: 0; -} table { border-collapse: collapse; } th { border: 1px solid black; } -td.cond_line_0 { +td.cond_line_0, td.cond_line_1, td.cond_line_2 { + padding: 0; border-top: 1px solid white; +} +td.cond_line_0 { background-color: #bfbfbf; } td.cond_line_1 { - border-top: 1px solid white; background-color: #dfdfdf; } td.cond_line_2 { - border-top: 1px solid white; background-color: #fffff; } td.cond_line_corner { @@ -36,10 +33,10 @@ td.todo_line { border-bottom: 1px solid #bfbfbf; height: 1.7em; } -tr.inactive td.todo_line { +tr.inactive > td.todo_line { background-color: #bfbfbf; } -tr.hidden_undone td, tr.hidden_undone a { +tr.hidden_undone > td, tr.hidden_undone a { color: #9f9f9f; } td.left_border { diff --git a/templates/process.html b/templates/process.html index 064e83d..4027f50 100644 --- a/templates/process.html +++ b/templates/process.html @@ -4,9 +4,6 @@ {% block css %} -input[type="text"] { - width: 100em; -} details > summary::after { content: '[+]'; } @@ -16,11 +13,6 @@ details summary { details[open] > summary::after { content: '[-]'; } -table.main > tbody > tr > td, table.main > tbody > tr > th { - border-bottom: 0.1em solid #bbbbbb; - padding-top: 0.5em; - padding-bottom: 0.5em; -} {% endblock %} @@ -61,11 +53,11 @@ table.main > tbody > tr > td, table.main > tbody > tr > th { {% endif %} </td> -<td> {% if (not step_node.is_explicit) and (not step_node.seen) %} +<td> <input type="checkbox" name="suppresses" value="{{step_id}}" {% if step_node.is_suppressed %}checked{% endif %}> suppress -{% endif %} </td> +{% endif %} </tr> {% if step_node.is_explicit or not step_node.seen %} {% for substep_id, substep in step_node.steps.items() %} @@ -85,48 +77,40 @@ edit process of ID {{process.id_}} {% endif %} </h3> <form action="process?id={{process.id_ or ''}}" method="POST"> -<table class="main"> +<table class="edit_table"> <tr> <th>title</th> -<td><input name="title" value="{{process.title.newest|e}}" />{% if process.id_ %} [<a href="process_titles?id={{process.id_}}">history</a>]{% endif %}</td> +<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> </tr> - <tr> <th>description</th> <td><textarea name="description">{{process.description.newest|e}}</textarea><br />{% if process.id_ %} [<a href="process_descriptions?id={{process.id_}}">history</a>]{% endif %}</td> </tr> - <tr> <th>calendarize</th> <td><input type="checkbox" name="calendarize" {% if process.calendarize %}checked {% endif %}</td> </tr> - <tr> <th>conditions</th> <td>{{ macros.simple_checkbox_table("condition", process.conditions, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>blockers</th> <td>{{ macros.simple_checkbox_table("blocker", process.blockers, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>enables</th> <td>{{ macros.simple_checkbox_table("enables", process.enables, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>disables</th> <td>{{ macros.simple_checkbox_table("disables", process.disables, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>steps</th> <td> @@ -138,23 +122,20 @@ edit process of ID {{process.id_}} add: <input name="new_top_step" list="process_candidates" autocomplete="off" value="{{preset_top_step or ''}}" /> </td> </tr> - <tr> <th>step of</th> <td>{{ macros.simple_checkbox_table("step_of", owners, "process", "process_candidates") }}</td> </tr> - <tr> <th>todos</th> <td> <a href="todos?process_id={{process.id_}}">{{n_todos}}</a><br /> </td> </tr> - </table> + {{ macros.edit_buttons() }} </form> - {{ macros.datalist_of_titles("condition_candidates", condition_candidates) }} {{ macros.datalist_of_titles("process_candidates", process_candidates) }} {% endblock %} diff --git a/templates/todo.html b/templates/todo.html index 870eab3..05e5b62 100644 --- a/templates/todo.html +++ b/templates/todo.html @@ -6,58 +6,48 @@ {% block content %} <h3>Todo: {{todo.title_then|e}}</h3> <form action="todo?id={{todo.id_}}" method="POST"> -<table> +<table class="edit_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>effort</th> <td><input type="number" name="effort" step=0.1 size=5 placeholder={{todo.effort_then}} value={{todo.effort}} /><br /></td> </tr> - <tr> <th>comment</th> -<td><input name="comment" value="{{todo.comment|e}}"/></td> +<td><input name="comment" type="text" value="{{todo.comment|e}}"/></td> </tr> - <tr> <th>calendarize</th> <td><input type="checkbox" name="calendarize" {% if todo.calendarize %}checked {% endif %}</td> </tr> - <tr> <th>conditions</th> <td>{{ macros.simple_checkbox_table("condition", todo.conditions, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>blockers</th> <td>{{ macros.simple_checkbox_table("blocker", todo.blockers, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>enables</th> <td>{{ macros.simple_checkbox_table("enables", todo.enables, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>disables</th> <td>{{ macros.simple_checkbox_table("disables", todo.disables, "condition", "condition_candidates") }}</td> </tr> - <tr> <th>parents</th> <td> @@ -66,17 +56,15 @@ {% endfor %} </td> </tr> - <tr> <th>children</th> <td>{{ macros.simple_checkbox_table("adopt", todo.children, "todo", "todo_candidates", "adopt", true) }}<br /> -make: <input name="make" list="process_candidates" autocomplete="off" /></td> +make: <input type="text" name="make" list="process_candidates" autocomplete="off" /></td> </tr> - </table> + {{ macros.edit_buttons() }} </form> - {{ macros.datalist_of_titles("condition_candidates", condition_candidates) }} {{ macros.datalist_of_titles("process_candidates", process_candidates) }} <datalist id="todo_candidates"> -- 2.30.2