Skip to content

Commit ddc8fe3

Browse files
bzgbzg
committed
feat: Reorder report-table columns and add sort tooltips
1 parent 9df7e4e commit ddc8fe3

2 files changed

Lines changed: 27 additions & 26 deletions

File tree

‎resources/bone-index.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -917,11 +917,11 @@ function buildRowElement(rpt) {
917917
'<td title="' + priTitle + '" style="text-align:center">' + priLabel + '</td>' +
918918
'<td style="text-align:center;' + dueStyle + '">' + dueHtml + '</td>' +
919919
'<td title="' + escAttr(flagsTitle) + '" style="text-align:center;font-family:monospace;font-size:0.8rem;letter-spacing:0.1em">' + flagsStr + '</td>' +
920-
'<td>' + seriesHtml + patchHtml + eventsHtml + textsHtml + relatedHtml + votesHtml + (awaitingFlag ? '<span class="row-icon" title="Awaiting reply">\u231A </span>' : '') + subjectHtml + '</td>' +
921-
'<td class="secondary">' + authorHtml + '</td>' +
920+
'<td style="text-align:center">' + rpt.replies + '</td>' +
922921
'<td class="secondary" title="' + escAttr(ownerAddr) + '">' + ownerHtml + '</td>' +
923-
'<td title="Filter">' + dateHtml + '</td>' +
924-
'<td style="text-align:center">' + rpt.replies + '</td>';
922+
'<td class="secondary">' + authorHtml + '</td>' +
923+
'<td>' + seriesHtml + patchHtml + eventsHtml + textsHtml + relatedHtml + votesHtml + (awaitingFlag ? '<span class="row-icon" title="Awaiting reply">\u231A </span>' : '') + subjectHtml + '</td>' +
924+
'<td title="Filter">' + dateHtml + '</td>';
925925

926926
return tr;
927927
}
@@ -1302,16 +1302,17 @@ var _setupToggles, _showTogglesIfNeeded;
13021302
(function() {
13031303
var style = document.createElement('style');
13041304
style.textContent =
1305-
'td:nth-child(5) { position: relative; white-space: nowrap; overflow: hidden; max-width: 740px; }' +
1306-
'td:nth-child(5).expanded { white-space: normal; overflow: visible; }' +
1305+
/* nth-child(8) = the Subject column */
1306+
'td:nth-child(8) { position: relative; white-space: nowrap; overflow: hidden; max-width: 740px; }' +
1307+
'td:nth-child(8).expanded { white-space: normal; overflow: visible; }' +
13071308
'.unfold { position: absolute; right: 0; top: 50%; transform: translateY(-50%);' +
13081309
' cursor: pointer; font-weight: 700; font-size: 1em;' +
13091310
' padding: 0.1em 0.4em 0.1em 0.6em; user-select: none; z-index: 1;' +
13101311
' background-color: inherit; }';
13111312
document.head.appendChild(style);
13121313

13131314
_setupToggles = function(container) {
1314-
container.querySelectorAll('td:nth-child(5)').forEach(function(td) {
1315+
container.querySelectorAll('td:nth-child(8)').forEach(function(td) {
13151316
if (td.querySelector('.unfold') || td.classList.contains('expanded')) return;
13161317
var toggle = document.createElement('span');
13171318
toggle.className = 'unfold';
@@ -1332,7 +1333,7 @@ var _setupToggles, _showTogglesIfNeeded;
13321333
};
13331334

13341335
_showTogglesIfNeeded = function() {
1335-
var toggles = document.querySelectorAll('td:nth-child(5) .unfold');
1336+
var toggles = document.querySelectorAll('td:nth-child(8) .unfold');
13361337
// Only processes rendered rows (current page), not all 2000+
13371338
var items = [];
13381339
for (var i = 0; i < toggles.length; i++) {

‎scripts/bone-index.clj‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
tr.stripe td { background-color: var(--bone-stripe-bg); }
7373
tr:not(.stripe) td { background-color: var(--bone-row-bg); }
7474
td:nth-child(3) { white-space: nowrap; }
75-
td:nth-child(5) { min-width: 740px; }
76-
td:nth-child(6) { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
75+
td:nth-child(8) { min-width: 740px; } /* Subject */
76+
td:nth-child(7) { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Author */
7777
#status { font-size: 0.8rem; margin-bottom: 0.5rem; }
7878
.row-icon { font-size: 0.75rem; text-decoration: none; }
7979
a.row-icon[data-action] { margin-right: 0.3em; }
@@ -96,19 +96,19 @@
9696
}
9797
@media (max-width: 860px) {
9898
td:nth-child(2), th:nth-child(2) { display: none; } /* Priority */
99-
td:nth-child(5) { min-width: auto; }
99+
td:nth-child(8) { min-width: auto; } /* Subject */
100100
}
101101
@media (max-width: 780px) {
102-
td:nth-child(9), th:nth-child(9) { display: none; } /* Replies */
102+
td:nth-child(5), th:nth-child(5) { display: none; } /* Replies */
103103
}
104104
@media (max-width: 740px) {
105-
td:nth-child(8), th:nth-child(8) { display: none; } /* Date */
105+
td:nth-child(9), th:nth-child(9) { display: none; } /* Date */
106106
}
107107
@media (max-width: 680px) {
108-
td:nth-child(7), th:nth-child(7) { display: none; } /* Owner */
108+
td:nth-child(6), th:nth-child(6) { display: none; } /* Owner */
109109
}
110110
@media (max-width: 540px) {
111-
td:nth-child(6), th:nth-child(6) { display: none; } /* Author */
111+
td:nth-child(7), th:nth-child(7) { display: none; } /* Author */
112112
input[type=search] { max-width: none; min-width: 0; width: 100%; }
113113
.toolbar { flex-direction: column; align-items: stretch; }
114114
}
@@ -133,8 +133,8 @@
133133
;; data-sort / boneConfig.columnsSort ("author" sorts on the "from" key).
134134
(def ^:private canonical-columns
135135
[["type" "type"] ["priority" "priority"] ["due" "due"] ["flags" "flags"]
136-
["subject" "subject"] ["author" "from"] ["owner" "owner"] ["date" "date"]
137-
["replies" "replies"]])
136+
["replies" "replies"] ["owner" "owner"] ["author" "from"]
137+
["subject" "subject"] ["date" "date"]])
138138

139139
(def ^:private column-names (mapv first canonical-columns))
140140
(def ^:private column-sort-key (into {} canonical-columns))
@@ -211,15 +211,15 @@
211211
base-dir (.getParent (clojure.java.io/file reports-dir))
212212
has-ical? (and base-dir (.exists (clojure.java.io/file base-dir "events" "announcements.ics")))
213213
rss-href "reports/all.xml"
214-
cols [[:th {:data-sort "type" :onclick "sortTable(0,'type')"} "Type"]
215-
[:th {:data-sort "priority" :onclick "sortTable(1,'priority')"} "Prio"]
216-
[:th {:data-sort "due" :onclick "sortTable(2,'due')"} "Due"]
217-
[:th {:data-sort "flags" :onclick "sortTable(3,'flags')"} "Flags"]
218-
[:th {:data-sort "subject" :onclick "sortTable(4,'subject')" :title "Sort by last activity"} "Subject"]
219-
[:th {:data-sort "from" :onclick "sortTable(5,'from')"} "Author"]
220-
[:th {:data-sort "owner" :onclick "sortTable(6,'owner')"} "Owner"]
221-
[:th {:data-sort "date" :onclick "sortTable(7,'date')"} "Date"]
222-
[:th {:data-sort "replies" :onclick "sortTable(8,'replies')"} "↩"]]
214+
cols [[:th {:data-sort "type" :onclick "sortTable(0,'type')" :title "Sort by type"} "Type"]
215+
[:th {:data-sort "priority" :onclick "sortTable(1,'priority')" :title "Sort by priority"} "Prio"]
216+
[:th {:data-sort "due" :onclick "sortTable(2,'due')" :title "Sort by deadline"} "Due"]
217+
[:th {:data-sort "flags" :onclick "sortTable(3,'flags')" :title "Sort by flags"} "Flags"]
218+
[:th {:data-sort "replies" :onclick "sortTable(4,'replies')" :title "Sort by number of replies"} "↩"]
219+
[:th {:data-sort "owner" :onclick "sortTable(5,'owner')" :title "Sort by owner"} "Owner"]
220+
[:th {:data-sort "from" :onclick "sortTable(6,'from')" :title "Sort by author"} "Author"]
221+
[:th {:data-sort "subject" :onclick "sortTable(7,'subject')" :title "Sort by last activity"} "Subject"]
222+
[:th {:data-sort "date" :onclick "sortTable(8,'date')" :title "Sort by date"} "Date"]]
223223
tpl-body (str
224224
(h/html
225225
[:main.container

0 commit comments

Comments
 (0)