From 8542cd471f1aeea1abbe0b237a94f7863fb12dd0 Mon Sep 17 00:00:00 2001 From: Christian Heller <c.heller@plomlompom.de> Date: Mon, 3 Jun 2024 04:16:48 +0200 Subject: [PATCH] Enhance layouts. --- templates/_base.html | 4 ++ templates/_macros.html | 2 +- templates/calendar.html | 8 +++- templates/day.html | 87 +++++++++++++++++++++++++++-------------- templates/todo.html | 8 ++-- templates/todos.html | 4 +- 6 files changed, 74 insertions(+), 39 deletions(-) diff --git a/templates/_base.html b/templates/_base.html index 0e38465..7c10506 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -21,6 +21,10 @@ td, th, tr, table { vertical-align: top; margin-top: 1em; padding: 0; + border-collapse: collapse; +} +a { + color: black; } {% block css %} {% endblock %} diff --git a/templates/_macros.html b/templates/_macros.html index b1f0104..cb1bb45 100644 --- a/templates/_macros.html +++ b/templates/_macros.html @@ -25,7 +25,7 @@ <input type="checkbox" name="{{title}}" value="{{item.id_}}" checked /> </td> <td> -<a href="{{type_name}}?id={{item.id_}}">{% if historical %}{{item.title_then}}{% else %}{{item.title.newest|e}}{% endif %}</a> +<a href="{{type_name}}?id={{item.id_}}">{% if historical is true %}{{item.title_then}}{% else %}{{item.title.newest|e}}{% endif %}</a> </td> </tr> {% endfor %} diff --git a/templates/calendar.html b/templates/calendar.html index 4674262..42c821a 100644 --- a/templates/calendar.html +++ b/templates/calendar.html @@ -8,15 +8,19 @@ tr.week_row td { background-color: black; padding: 0; margin: 0; + border-top: 0.2em solid white; } tr.month_row td { - border: 0.1em solid black; - text-align: center; + border-top: 0.2em solid white; color: white; background-color: #555555; } +table { + width: 100%; +} tr.day_row td { background-color: #cccccc; + border-top: 0.2em solid white; } td.day_name { padding-right: 0.5em; diff --git a/templates/day.html b/templates/day.html index 2e1a380..0165c9e 100644 --- a/templates/day.html +++ b/templates/day.html @@ -8,23 +8,45 @@ td, th, tr, table { padding: 0; margin: 0; } +table { + border-collapse: collapse; +} th { border: 1px solid black; } -td.min_width { - min-width: 1em; -} td.cond_line_0 { - background-color: #ffbbbb; + border-top: 1px solid white; + background-color: #dddddd; } td.cond_line_1 { - background-color: #bbffbb; + border-top: 1px solid white; + background-color: #efefef; } td.cond_line_2 { - background-color: #bbbbff; + border-top: 1px solid white; + background-color: #fffff; +} +td.cond_line_corner { + max-width: 0px; + white-space: nowrap; + overflow: hidden; + text-overflow: clip; } td.todo_line { - border-bottom: 1px solid #bbbbbb; + border-bottom: 1px solid #dddddd; + height: 1.7em; +} +tr.inactive td.todo_line { + background-color: #efefef; +} +td.left_border { + border-left: 1px solid black; +} +td.right_border { + border-right: 1px solid black; +} +input { + height: 100%; } {% endblock %} @@ -32,38 +54,42 @@ td.todo_line { {% macro show_node_undone(node, indent) %} {% if not node.todo.is_done %} -<tr> +<tr {% if node.seen or not node.todo.is_doable %}class="inactive"{% endif %}> {% if not node.seen %} <input type="hidden" name="todo_id" value="{{node.todo.id_}}" /> {% endif %} {% for condition in conditions_present %} -<td class="cond_line_{{loop.index0 % 3}} {% if not condition.is_active %}min_width{% endif %}">{% if condition in node.todo.conditions and not condition.is_active %}O{% elif condition in node.todo.blockers and condition.is_active %}!{% endif %}</td> +<td class="cond_line_{{loop.index0 % 3}}"> +{% if condition in node.todo.conditions and not condition.is_active %} +O +{% elif condition in node.todo.blockers and condition.is_active %} +! +{% endif %} +</td> {% endfor %} -<td class="todo_line">-></td> {% if node.seen %} -<td class="todo_line"></td> +<td class="todo_line left_border"></td> <td class="todo_line">{% if node.todo.effort %}{{ node.todo.effort }}{% endif %}</td> {% else %} -<td class="todo_line"><input name="done" type="checkbox" value="{{node.todo.id_}}" {% if not node.todo.is_doable %}disabled{% endif %}/></td> +<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> {% endif %} -<td class="todo_line"> -{% for i in range(indent) %} {% endfor %} + +<td class="todo_line right_border"> +{% for i in range(indent) %} {% endfor %} + {% if node.seen %}({% endif %}<a href="todo?id={{node.todo.id_}}">{{node.todo.title_then|e}}</a>{% if node.seen %}){% endif %} </td> -<td class="todo_line">-></td> {% for condition in conditions_present|reverse %} -<td class="cond_line_{{(conditions_present|length - loop.index) % 3}} {% if condition in node.todo.enables or condition in node.todo.disables %}min_width{% endif %}">{% if condition in node.todo.enables %}+{% elif condition in node.todo.disables %}!{% endif %}</td> +<td class="cond_line_{{(conditions_present|length - loop.index) % 3}} {% if condition in node.todo.enables or condition in node.todo.disables %}min_width{% endif %}">{% if condition in node.todo.enables %} +{% elif condition in node.todo.disables %} !{% endif %}</td> {% endfor %} -<td> +<td colspan=2> {% if node.seen %} {{node.todo.comment|e}} {% else %} -<input name="comment" value="{{node.todo.comment|e}}" /> +<input name="comment" value="{{node.todo.comment|e}}" style="width: 100%" /> {% endif %} </td> @@ -122,14 +148,12 @@ comment: <input name="day_comment" value="{{day.comment|e}}" /> <input type="submit" value="OK" /><br /> add todo: <input name="new_todo" list="processes" autocomplete="off" /> -<h4>todo</h4> +<h4>to do</h4> <table> <tr> -<th colspan={{ conditions_present|length}}>c</th> -<th colspan=5>states</th> -<th colspan={{ conditions_present|length}}>t</th> +<th colspan={{ conditions_present|length + 3 + conditions_present|length }}>states</th> <th>add enabler</th> <th>add disabler</th> </tr> @@ -141,24 +165,27 @@ add todo: <input name="new_todo" list="processes" autocomplete="off" /> {% for _ in conditions_present %} {% if outer_loop.index > loop.index %} <td class="cond_line_{{loop.index0 % 3}}"> -{% else %} +{% elif outer_loop.index < loop.index %} <td class="cond_line_{{outer_loop.index0 % 3}}"> -{% endif %} -{% if outer_loop.index == loop.index %} +{% else %} +<td class="cond_line_{{outer_loop.index0 % 3}} cond_line_corner">X {% endif %} </td> {% endfor %} <td class="cond_line_{{loop.index0 % 3}}">[{% if condition.is_active %}X{% else %} {% endif %}]</td> -<td colspan=4 class="cond_line_{{loop.index0 % 3}}"><a href="condition?id={{condition.id_}}">{{condition.title.at(day.date)|e}}</a></td> +<td colspan=2 class="cond_line_{{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.index0 < conditions_present|length %} +{% if outer_loop.index0 + loop.index < conditions_present|length %} <td class="cond_line_{{outer_loop.index0 % 3}}"> -{% else %} +{% elif outer_loop.index0 + loop.index > conditions_present|length %} <td class="cond_line_{{(conditions_present|length - loop.index) % 3}}"> +{% else %} +<td class="cond_line_{{outer_loop.index0 % 3}} cond_line_corner"> X {% endif %} {% endfor %} + {% set list_name = "todos_for_%s"|format(condition.id_) %} <td><input name="new_todo" list="{{list_name}}" autocomplete="off" /></td> {{ macros.datalist_of_titles(list_name, enablers_for[condition.id_]) }} @@ -174,11 +201,11 @@ add todo: <input name="new_todo" list="processes" autocomplete="off" /> {% for condition in conditions_present %} <td class="cond_line_{{loop.index0 % 3}}"></td> {% endfor %} -<th colspan=5>doables</th> +<th class="left_border right_border vertical_borders" colspan=3>doables</th> {% for condition in conditions_present %} <td class="cond_line_{{(conditions_present|length - loop.index) % 3}}"></td> {% endfor %} -<th>comments</th> +<th colspan=2>comments</th> </tr> {% for node in top_nodes %} {{ show_node_undone(node, 0) }} diff --git a/templates/todo.html b/templates/todo.html index 0d4773c..a2ef536 100644 --- a/templates/todo.html +++ b/templates/todo.html @@ -40,22 +40,22 @@ <tr> <th>conditions</th> -<td>{{ macros.simple_checkbox_table("condition", todo.conditions, "condition", "condition_candidates", historical=true) }}</td> +<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", historical=true) }}</td> +<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", historical=true) }}</td> +<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", historical=true) }}</td> +<td>{{ macros.simple_checkbox_table("disables", todo.disables, "condition", "condition_candidates") }}</td> </tr> <tr> diff --git a/templates/todos.html b/templates/todos.html index 6b733e0..3dd1f3f 100644 --- a/templates/todos.html +++ b/templates/todos.html @@ -25,9 +25,9 @@ in comment <input name="comment_pattern" value="{{comment_pattern}}" /> {% for todo in todos %} <tr> <td>[{% if todo.is_done %}x{% else %} {% endif %}]</td> -<td><a href="{{todo.date}}">{{todo.date}}</a></td> +<td><a href="day?date={{todo.date}}">{{todo.date}}</a></td> <td><a href="todo?id={{todo.id_}}">{{todo.title_then}}</a></td> -<td><a href="{{todo.comment}}">{{todo.comment}}</a></td> +<td>{{todo.comment}}</td> </tr> {% endfor %} </table> -- 2.30.2