wikiDBリストページの表示カスタマイズ

wikiDBのデータリストページ（/{wiki_id}/db/{wikidb_id}）の表示は2021/06/17にリストテンプレートを利用する表示になりました。
ただ、この変更により編集リンクがなくなったりと前の表示にしたいというご意見が見られましたので、リストテンプレート編集とCSSカスタマイズを使用して表示を変える方法をご紹介します。ご参考までにどうぞ。

以下、wikiDBSandboxの表示を例に説明していきます。

表示Before after

Before

 

After

 

手順

1. リストテンプレートの編集

編集およびデータページリンクの作成は置き換えタグで行います。

編集リンク	@edit_link[リンク文字列]@
データページリンク	@page_link[リンク文字列]@

編集リンクを作成したい場合は、@edit_link[リンク文字列]@を、データページリンクを作成したい倍は、@page_link[リンク文字列]@をテンプレート編集画面で記述してください。
リンク文字列の部分は自由に変更してください。例では編集に変更しています。
データページリンクなどをカード名などデータに紐付けたい場合は、@page_link[@col[識別ID]@]@ とすることでリンクを作成できます。

※テンプレートが見たままモードの場合の注意点

テーブル要素がuk-overflow-containerをもつdivタグで囲まれている可能性があります。
divタグは残して、classだけ削除してください。
これをソースモードなどで削除しないと、以下の手順をとっても表示が前の状態になりませんのでご注意ください。

2. カスタマイズCSSの記述

おおまかに分けて以下3種類の変更をかけていきます。

1. テーブル自体への変更
2. 見出しへの変更
3. セル幅の指定

2-1. テーブル自体への変更

今の表示ですとテーブルの上下の余白の有無、セル幅の指定などがうまく通らないことがあるのでこれらに対処します。

#db_data_list table.uk-table { margin: 0px; table-layout:fixed; }

2-2. 見出しへの変更

上の変更までだと表が並んでいる状態ですので、一番上の見出し以外を消して、テーブル枠が並んで太く見えるのを解消しようと思います。

テンプレートがwikiモードの場合

#db_data_list table.uk-table:not(:first-child) { margin-top: -1px; }
#db_data_list table.uk-table:not(:first-child) tr:first-child{ visibility: collapse; }

テンプレートが見たままモードの場合

#db_data_list div.uk-margin-bottom div:not(:first-child) { margin-top: -1px; }
#db_data_list div.uk-margin-bottom div:not(:first-child) tr:first-child{ visibility: collapse; }

2-3. セル幅の指定

最後に各列に対する幅を指定する必要があります。
テーブルのセル幅は基本的に1行目に依存するので、見出し行に対して幅を指定していきます。
このとき、2-1の工程でtable-layoutをfixedに指定している都合、すべてのセルに対して幅を指定しないと表示が崩れます。
指定方法は一つ一つでもかまいませんし、一括した指定でもかまいません。
例では一つ一つに対して指定しています。項目数が10個と編集用セルをあわせて11個のセルがあるので、11の幅を指定しています。
※幅指定の際の目安として、半角文字2文字、全角文字1文字が13pxです。
※4桁数字なら30px、日本語10文字なら140pxあれば折り返されずに表示されます。（数字は余裕をもたせてあります）

#db_data_list table.uk-table tr th:nth-of-type(1) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(2) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(3) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(4) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(5) { width: 100px; }
#db_data_list table.uk-table tr th:nth-of-type(6) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(7) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(8) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(9) { width: 200px; }
#db_data_list table.uk-table tr th:nth-of-type(10) { width: 50px; }
#db_data_list table.uk-table tr th:nth-of-type(11) { width: 50px; }

全幅共通でいいから一括して指定したい場合は以下のような形です。

#db_data_list table.uk-table tr th { width: 80px; }

複数のDBを作成した場合の幅指定について

データを囲むdiv要素にdata-wikidb_id属性が付与されています。
これをCSSで追加指定することで、DB毎にデータ一覧の表示を変更することが出来ます。
ID指定に加えて、属性内容による指定を以下のように追加してください。

#db_data_list[data-wikidb_id=wikiDB識別ID]

 

CSSまとめ

例で記述したCSSをまとめると以下になります。例で指定しているCSSカスタマイズは以下のみです。
ここであげたCSSはあくまでも一例に過ぎません。ユーザ様各自ご自由にカスタマイズしてください。

#db_data_list table.uk-table { margin: 0px; table-layout:fixed; }
#db_data_list table.uk-table:not(:first-child) { margin-top: -1px; }
#db_data_list table.uk-table:not(:first-child) tr:first-child{ visibility: collapse; }

#db_data_list table.uk-table tr th:nth-of-type(1) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(2) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(3) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(4) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(5) { width: 100px; }
#db_data_list table.uk-table tr th:nth-of-type(6) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(7) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(8) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(9) { width: 200px; }
#db_data_list table.uk-table tr th:nth-of-type(10) { width: 50px; }
#db_data_list table.uk-table tr th:nth-of-type(11) { width: 50px; }