Add sort criterion and order classes to table tag

Add a class "sort-col-1", "sort-col-2", or "sort-col-3" to the table tag
to indicate by which column the data is sorted, and a class "asc" or
"desc" to indicate whether it is sorted in ascending or descending
order. This is intended to be useful for applying a style to the sorted
column or its header.

Modify the default template to slightly darken the sorted column.
pull/142/head
Ryan Schmidt 2022-05-10 11:57:53 -05:00
parent c07bc573d1
commit 8f1e66edee
3 changed files with 65 additions and 2 deletions

View File

@ -853,6 +853,8 @@ make_content_buf(
len = r->uri.len + escape_html
+ ngx_sizeof_ssz(t_body2)
+ ngx_sizeof_ssz(t_list_begin)
+ ngx_sizeof_ssz(t_list_head)
+ ngx_sizeof_ssz("desc sort-col-1")
+ ngx_sizeof_ssz(t_list_colhead_name1)
+ ngx_sizeof_ssz(t_list_colhead_name2)
+ ngx_sizeof_ssz(t_list_colhead_size1)
@ -868,6 +870,8 @@ make_content_buf(
else
len = r->uri.len + escape_html
+ ngx_sizeof_ssz(t_list_begin)
+ ngx_sizeof_ssz(t_list_head)
+ ngx_sizeof_ssz("desc sort-col-1")
+ ngx_sizeof_ssz(t_list_colhead_name1)
+ ngx_sizeof_ssz(t_list_colhead_name2)
+ ngx_sizeof_ssz(t_list_colhead_size1)
@ -1053,6 +1057,27 @@ make_content_buf(
/* Open the <table> tag */
b->last = ngx_cpymem_ssz(b->last, t_list_begin);
switch (sort_criterion) {
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME_DESC:
b->last = ngx_cpymem_ssz(b->last, "desc sort-col-1");
break;
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME:
b->last = ngx_cpymem_ssz(b->last, "asc sort-col-1");
break;
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE_DESC:
b->last = ngx_cpymem_ssz(b->last, "desc sort-col-2");
break;
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE:
b->last = ngx_cpymem_ssz(b->last, "asc sort-col-2");
break;
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE_DESC:
b->last = ngx_cpymem_ssz(b->last, "desc sort-col-3");
break;
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE:
b->last = ngx_cpymem_ssz(b->last, "asc sort-col-3");
break;
}
b->last = ngx_cpymem_ssz(b->last, t_list_head);
/* Write the column headers */
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_name1);

View File

@ -41,6 +41,21 @@ static const u_char t_head1[] = ""
"text-overflow: '>';"
"overflow: hidden;"
"}"
".sort-col-1 th:nth-of-type(1),"
".sort-col-2 th:nth-of-type(2),"
".sort-col-3 th:nth-of-type(3) {"
"background:#ddd;"
"}"
".sort-col-1 td:nth-of-type(1),"
".sort-col-2 td:nth-of-type(2),"
".sort-col-3 td:nth-of-type(3) {"
"background:#eee;"
"}"
".sort-col-1 tr:nth-child(even) td:nth-of-type(1),"
".sort-col-2 tr:nth-child(even) td:nth-of-type(2),"
".sort-col-3 tr:nth-child(even) td:nth-of-type(3) {"
"background:#e4e4e4;"
"}"
"</style>"
"\n"
;
@ -62,7 +77,10 @@ static const u_char t_body2[] = ""
"\n"
;
static const u_char t_list_begin[] = ""
"<table id=\"list\">"
"<table id=\"list\" class=\""
;
static const u_char t_list_head[] = ""
"\">"
"<thead>"
"<tr>"
;
@ -113,6 +131,7 @@ static const u_char t_foot[] = ""
+ nfi_sizeof_ssz(t_body1) \
+ nfi_sizeof_ssz(t_body2) \
+ nfi_sizeof_ssz(t_list_begin) \
+ nfi_sizeof_ssz(t_list_head) \
+ nfi_sizeof_ssz(t_list_colhead_name1) \
+ nfi_sizeof_ssz(t_list_colhead_name2) \
+ nfi_sizeof_ssz(t_list_colhead_size1) \

View File

@ -40,6 +40,21 @@
text-overflow: '>';
overflow: hidden;
}
.sort-col-1 th:nth-of-type(1),
.sort-col-2 th:nth-of-type(2),
.sort-col-3 th:nth-of-type(3) {
background:#ddd;
}
.sort-col-1 td:nth-of-type(1),
.sort-col-2 td:nth-of-type(2),
.sort-col-3 td:nth-of-type(3) {
background:#eee;
}
.sort-col-1 tr:nth-child(even) td:nth-of-type(1),
.sort-col-2 tr:nth-child(even) td:nth-of-type(2),
.sort-col-3 tr:nth-child(even) td:nth-of-type(3) {
background:#e4e4e4;
}
</style>
<!-- var t_head2 -->
@ -60,7 +75,11 @@
</h1>
<!-- var t_list_begin -->
<table id="list">
<table id="list" class="
<!-- var NONE -->
asc sort-col-1
<!-- var t_list_head -->
">
<thead>
<tr>
<!-- var t_list_colhead_name1 -->