Craft CMS の一覧(elementIndex)で、表示項目が多い場合もテーブル表示にしてみる

今回も備忘録として、簡単にまとめます。

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

cpcsscraft/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 を出してみたい・・・のですが、どうなることやら。