Template‐ノート:Columns-list

ページのコンテンツが他言語でサポートされていません。

改修提案(2021年12月)[編集]

1: margin-top関連[編集]

ミネルバ以外の外装(デスクトップ版のみ)で本テンプレート(および{{Div col}}{{Div col end}} + 箇条書き)を使用すると、<ul>...</ul><ol>...</ol>要素のmargin-topが1つ目の<li>...</li>にのみ反映されることによりレイアウトが崩れる問題があります。具体的には、

  • ほげ
  • ふが
  • ぴよ
  • foo
  • bar
  • baz

という表示が期待される場合、

  • ほげ
  • ふが
  • ぴよ
  • foo
  • bar
  • baz

と表示されたり、

  • ほげ
  • ふが
  • ぴよ
  • foo
  • bar
 

という表示が期待される場合、

  • ほげ
  • ふが
  • ぴよ
  • foo
  • bar

と表示されてしまう場合があります。確認に用いた以下のいずれの環境でもこの問題は発生しました(いずれも特記ないかぎり最新版)。

この問題を解消するためにテンプレートスタイルを当てるようにしたいと考えております。

なお、{{Div col}}...{{div col end}}でも同様の問題が発生しますが、箇条書き以外を囲んでいる場合の対応が困難であるため、今回は本テンプレートのみの改修とし、{{Div col}}側ではドキュメンテーションにこの問題についての註記と本テンプレートへの誘導を行うに留めたいと考えております。

[追記ここから]<li>...</li>の途中でカラムがブレーク(切り替わる)してしまう現象については、Chromeではこの変更で解消しますが、IEおよびFirefoxでは解消しないようです。column-widthないしcolumn-count<div>...</div>から<ul>...</ul>および<ol>...</ol>に変更すれば解消されますが、

{{columns-list|2|
* 1
* 2

* 3
}}

のような途中の改行により<ul>...</ul>ないし<ol>...</ol>が分割された場合、上記以上に可読性を損ねるレイアウト崩れが発生するため、今回は適用を見送ることにします。--2021年12月27日 (月) 00:55 (UTC)

2: 引数の追加等とlua化[編集]

上記に併せ、以下の変更も実施したいと考えております。

  1. 第1引数への列幅の指定を可能にする。
  2. |style=の追加
  3. |plainlist=の追加。
  4. |colwidth=のエイリアスとして|col-width=および|colmun-width=を追加。
    • 2つ目はCSSに慣れている方へのわかりやすさ、1つ目は誤記防止を意図しています。
  5. 列数指定解消作業用カテゴリーの追加

後方互換性も確保すると条件分岐等が複雑になるため、Luaモジュール化します。

コード、テスト[編集]

表示テストは、Windows10 + Chrome + レガシー・ベクターを中心に、他のいくつかの環境(「利用者:JuthaDDA/閲覧環境」を参照)でも行っております。

コメント[編集]

提案 以上2点の変更の実施を提案します。1週間ほど異論が出なければ変更を実施します。--Jutha DDA会話2021年12月25日 (土) 13:20 (UTC)[返信]

コメント 追加検証をもとに「#1: margin-top関連」を加筆しました。--Jutha DDA会話2021年12月27日 (月) 00:55 (UTC)[返信]
コメント#1: margin-top関連」のうち勘違いのあった箇所(今回の変更提案には直接関係しません)に打ち消し線を引きました。<li>...</li>内のカラム・ブレーク問題については、「Template‐ノート:Reflist#段組み表示改善用CSS_&_JS案」にて関連する提案を行っているのでご参照ください。--Jutha DDA会話2021年12月30日 (木) 13:46 (UTC)[返信]
コメント テストの過程で、2-2の後方互換用コード周りでバグが見つかったため一昨日から昨日にかけてモジュール案を修正しました。もう少しテストを行って問題がないようなら、明日・明後日辺りに本テンプレート及びドキュメンテーションの変更を行う予定です。また追跡カテゴリーは作成済みです。--Jutha DDA会話2022年1月4日 (火) 13:19 (UTC)[返信]
チェック 複数のブラウザで追加テストを行った結果問題は見当たらなかったため、変更を実施しました。--Jutha DDA会話2022年1月4日 (火) 20:13 (UTC)[返信]

引数追加提案[編集]

{{div col}}から本テンプレートへの書き換えを容易にするために、

  1. |small= - font-size: 90%;
  2. |rules= - column-rule
  3. |gap= - column-gap
  4. |content= - 第2引数のエイリアス

の追加を提案します。

styles.cssには以下のコードを追加します。

.columns-list__wrapper--small-font {
    font-size: 90%;
}

以上です。--Jutha DDA会話2022年1月8日 (土) 23:43 (UTC)[返信]

報告 引数の追加を実施しました。--Jutha DDA会話2022年1月16日 (日) 12:44 (UTC)[返信]