Redmine テーマ minimalflat2 v1.3.5 をリリースした。

• Release v1.3.5

Redmine v3.4.3 対応

以下の問題が報告されたので

• Increase width of select values in issues page - Issue #118

Redmine v3.4.2 と v3.4.3 の application.css を比較して変更点を反映してから修正しようとした。結果、CSS の差分はこの問題に対するものだけであることが判明。

• Defect #26568: Multiple Selection List Filter View - items are cut off from view - Redmine

よって Redmine v3.4.3 対応ついでに、チケット一覧のバージョン条件リストに名前の長いものがあっても省略されず表示するようになった。

マイページ画面の table が見切れる問題の修正

だいぶ前に報告されて放置してた

When "my project" is displayed in 1 column mode, the table protrudes - Issue #117

を修正。マイページ画面を表示しながら Web ブラウザーの幅を狭めて 1 カラムにすると <table> が見切れる。標準テーマでは起きないとのことなので調べたら、

• 標準テーマは body に font-size: 12px を指定している
• そのため「たまたま」表示幅を狭めても table のコンテンツが収まる
• minimalflat2 は特別な箇所をのぞき font-size は指定しない設計方針
• そのため Web ブラウザーの文字サイズによっては <table> コンテンツがはみ出る = 見切れる

ということがわかった。短絡的に修正するなら標準テーマ同様に body へ font-size: 12px を指定すれば済む。しかし現在の設計方針はユーザーの文字サイズを維持するためのものであり、ひとつの問題のため変えたくはない。マイページの <table> 限定で直すことも可能だが、ここだけ文字サイズが小さくなるのも収まりが悪い。

というわけで修正を断ろうとしたのだが、マイページをよく観察すると「ウォッチしているチケット」などの table は表示幅が狭くなったときに横スクロールバーを提供している。HTML の構造としては

<div class="autoscroll">
  <table class="list issues odd-even sort-by-updated-on sort-desc">
  </table>
</div>

こんな感じ。<table> の親となる <div class="autoscroll"> が

.autoscroll {
  overflow-x: auto;
  padding: 1px;
  margin-bottom: 1.2em;
  position: relative;
}

となっているおかげでスクロール可能になっていた。ならば「作業時間」などの <table> もこれを指定すれば？と思うだろう。しかしわざわざ <div class="autoscroll"> が用意されていることから分かるように <table> へ指定してもダメだ。可変幅にしたければスクロールは外周の <div> が担当しなければならない。

というわけで theme.js 側に以下の関数を定義して実行するようにした。

// The table can be scrolled when "My Page" is displayed in one column
function setupMyPageAutoScroll () {
  $('#my-page table').each(function () {
    var parent = $(this).parent()
    if (parent.hasClass('autoscroll')) {
      return
    }

    $(this).wrap($('<div class="autoscroll"></div>'))
  })
}

<div class="autoscroll"> で囲われていない <table> 限定で囲いなおしている。これで無事、他のものも横スクロール可能となった。

設計的に一部の <table> だけスクロール可能になってるのは統一感がなくておかしいため、将来の Redmine では同様の修正が入るかもしれない。その場合でも処理的に誤動作することはないはず。