今回も備忘録として、簡単にまとめます。
Craft CMS の一覧ページは、セクションごとに表示項目を指定できます。このとき、ウィンドウ幅よりもテーブルの幅が広くなると、各項目がブロックとして扱われる collapsed 表示に切り替わります。
このままでも問題はないのですが、タイトルなどを列ごとに一覧できる方が便利な状況だったため、CSS で調整する方法を考えてみました。
管理画面にカスタム CSS を読み込む
Craft CMS の管理画面に独自スタイルを追加する場合、Control Panel CSS プラグインを利用します。
lindseydiloreto/craft-cpcss: Control Panel CSS plugin for Craft CMS
https://github.com/lindseydiloreto/craft-cpcss
cpcss
を craft/plugins
配下へアップロード後に設定 > プラグイン
でインストールしたら、プラグインの設定画面で CSS ファイルのパスを指定するか Additional CSS
欄に直接スタイル定義を記述しましょう。
スタイル定義を用意する
テーブル表示に関するスタイル定義は、主に table.collapsed
で上書きされる箇所を元に戻すための記述となります。ここではメディアクエリで、(ざっくりではありますが)スマートフォンを除く場合に、テーブル表示になるよう調整しています。
@media(min-width:768px) {
/* 内包するテーブル幅が大きいため、横スクロールできるように */
.tableview { overflow-x: auto; }
/* collapsed 表示を無効化 */
table.collapsed tbody { display: table-row-group; }
table.collapsed tbody tr { display: table-row; }
table.collapsed thead + tbody tr:first-child th,
table.collapsed thead + tbody tr:first-child td { border-top: 1px dotted #e3e5e8; }
table.collapsed tbody th,
table.collapsed tbody td { display: table-cell; padding: 7px 0 !important; border-bottom: 1px dotted #e3e5e8; }
table.collapsed thead { display: table-header-group; }
table.collapsed tbody td:empty { display: table-cell; }
table.collapsed tbody [data-title]:before,
table.collapsed tbody tr:after { display: none; }
/* td のセル幅を調整(共通) */
body.ltr table.collapsed tbody th:not(.checkbox-cell),
body.ltr table.collapsed tbody td:not(.checkbox-cell) {
min-width: 80px;
text-align: center;
}
/* td のセル幅を調整(個別指定) */
body.ltr table.collapsed tbody td[data-title="タイトル"],
body.ltr table.collapsed tbody td[data-title="本文"] {
min-width: 240px;
text-align: left;
}
}
tbody に含まれる td は data-title="フィールド名"
というデータ属性が付いているため、サンプルのように任意のセル幅の調整が可能です。
やってみて
てっきり DOM 構造が切り替わると思っていたのですが、比較的簡単に調整できるものですね。
今回は暫定対応のつもりだったため、落ち着いたらこの辺りの設定に関する Feature Request を出してみたい・・・のですが、どうなることやら。