From: Christian Heller <c.heller@plomlompom.de>
Date: Thu, 20 Jun 2024 08:56:22 +0000 (+0200)
Subject: Reduce CSS magic in Day template for Condition-Todo lines to ASCII art.
X-Git-Url: https://plomlompom.com/repos/%7B%7Bprefix%7D%7D/%7B%7Bdb.prefix%7D%7D/%7B%7B%20web_path%20%7D%7D/decks/process?a=commitdiff_plain;h=32314e4c0a7e268eeeee5ffc3604c68ce09d3ce7;p=plomtask

Reduce CSS magic in Day template for Condition-Todo lines to ASCII art.
---

diff --git a/templates/day.html b/templates/day.html
index b611f15..59cf55b 100644
--- a/templates/day.html
+++ b/templates/day.html
@@ -10,13 +10,6 @@ th {
 td.cond_line {
   padding: 0;
   border-top: 1px solid white;
-  background-repeat: no-repeat;
-}
-td.cond_line_left {
-  background-image: linear-gradient(to right, black 0.2em, transparent 0);
-}
-td.cond_line_right {
-  background-image: linear-gradient(to left, black 0.2em, transparent 0);
 }
 td.cond_0 {
   background-color: #bfbfbf;
@@ -27,18 +20,12 @@ td.cond_1 {
 td.cond_2 {
   background-color: fffff;
 }
-td.cond_corner {
+td.cond_shrink {
   max-width: 0px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
 }
-td.cond_corner_left {
-  background-image: linear-gradient(145deg, transparent 60%, black 60%, black 70%, transparent 70%);
-}
-td.cond_corner_right {
-  background-image: linear-gradient(35deg, transparent 30%, black 30%, black 40%, transparent 40%);
-}
 td.todo_line {
   border-bottom: 1px solid #bfbfbf;
   height: 1.7em;
@@ -71,11 +58,15 @@ input.ablers {
 {% endif %}
 
 {% for condition in conditions_present %}
-<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left">
 {% if condition in node.todo.conditions and not condition.is_active %}
+<td class="cond_line cond_{{loop.index0 % 3}}">
 +&gt;
 {% elif condition in node.todo.blockers and condition.is_active %}
+<td class="cond_line cond_{{loop.index0 % 3}}">
 -&gt;
+{% else %}
+<td class="cond_line cond_{{loop.index0 % 3}} cond_shrink">
+|
 {% endif %}
 </td>
 {% endfor %}
@@ -93,7 +84,17 @@ input.ablers {
 </td>
 
 {% for condition in conditions_present|reverse %}
-<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right">{% if condition in node.todo.enables %}+&gt;{% elif condition in node.todo.disables %}-&gt;{% endif %}</td>
+{% if condition in node.todo.enables %}
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}}">
++&gt;
+{% elif condition in node.todo.disables %}
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}}">
+-&gt;
+{% else %}
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_shrink">
+&nbsp;|
+{% endif %}
+</td>
 {% endfor %}
 
 <td colspan=2>
@@ -177,11 +178,11 @@ descendants (i.e. adopt where possible, otherwise create anew)
 
 {% for _ in conditions_present %}
 {% if outer_loop.index > loop.index %}
-<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left">
+<td class="cond_line cond_{{loop.index0 % 3}} cond_shrink">|
 {% elif outer_loop.index < loop.index %}
 <td class="cond_line cond_{{outer_loop.index0 % 3}}">
 {% else %}
-<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_corner cond_corner_left">
+<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_shrink">/
 {% endif %}
 </td>
 {% endfor %}
@@ -193,9 +194,9 @@ descendants (i.e. adopt where possible, otherwise create anew)
 {% if outer_loop.index0 + loop.index < conditions_present|length %}
 <td class="cond_line cond_{{outer_loop.index0 % 3}}">
 {% elif outer_loop.index0 + loop.index > conditions_present|length %}
-<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right">
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_shrink">&nbsp;|
 {% else %}
-<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_corner cond_corner_right">
+<td class="cond_line cond_{{outer_loop.index0 % 3}} cond_shrink">&nbsp;\
 {% endif %}
 {% endfor %}
 
@@ -212,11 +213,11 @@ descendants (i.e. adopt where possible, otherwise create anew)
 
 <tr>
 {% for condition in conditions_present %}
-<td class="cond_line cond_{{loop.index0 % 3}} cond_line_left"></td>
+<td class="cond_line cond_{{loop.index0 % 3}} cond_shrink">|</td>
 {% endfor %}
 <th colspan=3>doables</th>
 {% for condition in conditions_present %}
-<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_line_right"></td>
+<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_shrink">&nbsp;|</td>
 {% endfor %}
 <th colspan=2>comments</th>
 </tr>