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&nbsp;
+{% elif condition in node.todo.blockers and condition.is_active %}
+!&nbsp;
+{% endif %}
+</td>
 {% endfor %}
 
-<td class="todo_line">-&gt;</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) %}&nbsp; {% endfor %} +
+<td class="todo_line right_border">
+{% for i in range(indent) %}&nbsp; &nbsp; {% 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">-&gt;</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 %}&nbsp;+{% elif condition in node.todo.disables %}&nbsp;!{% 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 %}&nbsp;{% 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">&nbsp;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