blob: aed9ee9b1f840a28c5b65454964924559af583d2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<html>
<head>
<style>
.tree, .tree ul{ font: normal normal 14px/20px Helvetica, Arial, sans-serif; list-style-type: none; margin-left: 0 0 0 10px; padding: 0; position: relative; overflow:hidden;}
.tree li{ margin: 0; padding: 0 12px; position: relative; }
.tree li::before, .tree li::after{ content: ''; position: absolute; left: 0; }
/* horizontal line on inner list items */
.tree li::before{ border-top: 1px solid #999; top: 10px; width: 10px; height: 0; }
/* vertical line on list items */
.tree li:after{ border-left: 1px solid #999; height: 100%; width: 0px; top: -10px; }
/* lower line on list items from the first level because they don't have parents */
.tree > li::after{ top: 10px; }
/* hide line from the last of the first level list items */
.tree > li:last-child::after{ display: none; }
.tree ul:last-child li:last-child:after{ height:20px; }
</style>
</head>
<body>
<ul class="tree">
{% for network in networks %}
<li><a href="{{ network.url }}">{{ network.name }}</a>
<ul>
{% for channel in network.channels %}
<li><a href="{{ channel.url }}">{{ channel.name }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</body>
|