Skip to content

Commit 121bc91

Browse files
cornelius-koeppcornelius-koepp
committed
Overview Table Improvements
* data-ofm * Separation of Name | Modules | Devices * Col-Groups * Highlight Col-Header by Underlining * data-ofm NOT for TR > * * Cleanup Template * Overview-Table: Col-Header Rotation -90° * CSS: Format
1 parent 117b2ee commit 121bc91

File tree

2 files changed

+49
-18
lines changed

2 files changed

+49
-18
lines changed

‎css/table_header_rotate.css‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,27 +78,39 @@ quick draft, based on https://css-tricks.com/rotated-table-column-headers/
7878
TODO cleanup and update
7979
*/
8080

81-
th.rotate {
82-
height: 140px;
81+
th.rotate45,
82+
th.rotate90 {
8383
white-space: nowrap;
84-
8584
height: 240px;
8685
}
87-
th.rotate > div {
88-
transform: translate(5px, 51px) rotate(315deg);
86+
th.rotate45 > div,
87+
th.rotate90 > div {
8988
width: 30px;
90-
89+
}
90+
th.rotate45 > div {
9191
transform: translate(0px, 100px) rotate(315deg);
9292
}
93-
th.rotate > div > span {
93+
th.rotate90 > div {
94+
transform: translate(0px, 100px) rotate(270deg);
95+
}
96+
th.rotate45 > div > span,
97+
th.rotate90 > div > span {
9498
padding: 5px 10px;
99+
padding: 3px 1ex;
100+
/* col-header highlight */
101+
/*
102+
border-bottom: 2px solid #9f9;
103+
*/
95104
}
96105
td, tbody th {
97106
border-right: 1px solid #ccc;
98107
/* replaced by rows background shading
99108
border-bottom: 1px solid #ccc;
100109
*/
101110
}
111+
td.before-new-cols, th.before-new-cols {
112+
border-right: 1px solid #999;
113+
}
102114

103115
/* Details for OAM */
104116
.oam-details {

‎templates/dependencies_template.html‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,64 @@
66
<title>OpenKNX-Applikationen/-Module und unterstützte Geräte</title>
77
<link rel="stylesheet" href="css/table_header_rotate.css">
88
<style>
9-
{% for col in range(1, 1 + (modules_sorted | length) + (devices_sorted | length) + 1) %}table:has(td:nth-child({{col}}):hover, th:nth-child({{col}}):hover) td:nth-child({{col}}).isPart,
9+
{% set col_count = 1 + (modules_sorted | length) + (devices_sorted | length) %}
10+
{% for col in range(2, col_count + 1) %}table:has(td:nth-child({{col}}):hover, th:nth-child({{col}}):hover) td:nth-child({{col}}).isPart,
1011
{% endfor %}
1112
tbody tr:hover {
1213
background-color: #dfd;
1314
}
15+
{% for col in range(2, col_count + 1) %}table:has(td:nth-child({{col}}):hover, th:nth-child({{col}}):hover) thead th.rotate45:nth-child({{col}}) div span,
16+
{% endfor %}
17+
.DUMMY-DUMMY-DUMMY
18+
{
19+
border-bottom: 2px solid #9f9;
20+
}
1421
</style>
1522
</head>
1623
<body>
1724
<table class="openknxTitleTable">
1825
<caption>OpenKNX-Applikationen/-Module und unterstützte Geräte</caption>
26+
<colgroup>
27+
<col class="before-new-cols" />
28+
{% for module, count in modules_sorted if count > 1 %}
29+
<col data-ofm="{{module}}" />
30+
{% endfor %}
31+
<col data-ofm="*special*" />
32+
{% for device, count in devices_sorted if count > 1 %}
33+
<col data-dev="{{device}}" />
34+
{% endfor %}
35+
<col data-dev="*special*" />
36+
<col data-dev="*other*" />
37+
</colgroup>
1938
<thead>
2039
<tr>
21-
<th></th>
40+
<th class="before-new-cols"></th>
2241
{% for module, count in modules_sorted if count > 1 %}
23-
<th class="rotate" data-ofm="{{module}}"><div><span>{{ module }}</span></div></th>
42+
<th class="rotate45" data-ofm="{{module}}"><div><span>{{ module }}</span></div></th>
2443
{% endfor %}
25-
<th class="singleModules" data-ofm="*special*">Einmalig verwendete Module:</th>
44+
<th class="singleModules before-new-cols" data-ofm="*special*">Einmalig verwendete Module:</th>
2645
{% for device, count in devices_sorted if count > 1 %}
27-
<th class="rotate" data-dev="{{device}}"><div><span>{{ device }}</span></div></th>
46+
<th class="rotate45" data-dev="{{device}}"><div><span>{{ device }}</span></div></th>
2847
{% endfor %}
2948
<th class="singleModules" data-dev="*special*">Spezielle Geräte:</th>
30-
<th class="rotate" data-dev="*other*"><div><span>Sonstige Geräte</span></div></th>
49+
<th class="rotate90" data-dev="*other*"><div><span>Sonstige Geräte</span></div></th>
3150
</tr>
3251
</thead>
3352
<tbody>
3453
{% for oamName, oam_details in oam_data.items() %}
3554
{% set oamModules = oam_details['modules'] %}
3655
{% set oamDevices = oam_details['devices'] %}
3756
{% set oamDescription = oam_details['description'] %}
38-
<tr>
39-
<th data-oam="{{oamName}}">{{ oamName }}{% if oamDescription %}<div class="oam-details">{{ oamDescription }}</div>{% endif %}</th>
57+
<tr data-oam="{{oamName}}">
58+
<th class="before-new-cols">{{ oamName }}{% if oamDescription %}<div class="oam-details">{{ oamDescription }}</div>{% endif %}</th>
4059

4160
{% for module, count in modules_sorted if count > 1 %}
42-
<td data-oam="{{oamName}}" data-ofm="{{module}}" class="isPart">{% if module in oamModules %}&#9632;{% else %}{% endif %}</td>
61+
<td data-ofm="{{module}}" class="isPart">{% if module in oamModules %}&#9632;{% endif %}</td>
4362
{% endfor %}
44-
<td class="left">{{ modules_sorted | selectattr('1', 'equalto', 1) | map(attribute='0') | select('in', oamModules) | join(', ') }}</td>
63+
<td class="left before-new-cols" data-ofm="*special*">{{ modules_sorted | selectattr('1', 'equalto', 1) | map(attribute='0') | select('in', oamModules) | join(', ') }}</td>
4564

4665
{% for device, count in devices_sorted if count > 1 %}
47-
<td data-oam="{{oamName}}" data-dev="{{device}}" class="isPart">{% if device in oamDevices %}&#9632;{% else %}{% endif %}</td>
66+
<td data-dev="{{device}}" class="isPart">{% if device in oamDevices %}&#9632;{% endif %}</td>
4867
{% endfor %}
4968
<td class="left">{{ devices_sorted | selectattr('1', 'equalto', 1) | map(attribute='0') | select('in', oamDevices) | join(', ') }}</td>
5069

0 commit comments

Comments
 (0)