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/conditions?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}}"> +> {% elif condition in node.todo.blockers and condition.is_active %} +<td class="cond_line cond_{{loop.index0 % 3}}"> -> +{% 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 %}+>{% elif condition in node.todo.disables %}->{% endif %}</td> +{% if condition in node.todo.enables %} +<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}}"> ++> +{% elif condition in node.todo.disables %} +<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}}"> +-> +{% else %} +<td class="cond_line cond_{{(conditions_present|length - loop.index) % 3}} cond_shrink"> + | +{% 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"> | {% 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"> \ {% 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"> |</td> {% endfor %} <th colspan=2>comments</th> </tr>