Redmine3.2のレスポンシブデザインを無効化する

f:id:daichi703n:20160603030413j:plain

Redmine3.2から導入されたレスポンシブデザイン。ケータイで快適に閲覧できるようにされているが、欄が潰れたり使いづらい場面もある。
そこでいっそレスポンシブデザインを無効化して、ケータイでもPC画面を使い続けることにする。

CSSの変更

レスポンシブデザインの適用自体の変更方法は学習不足で分かっていない。暫定的にレスポンシブ用CSSの判定基準max-widthを小さくして、実質使われないようにする。

インストール・バージョンアップはこちらの手順で実施

安全・簡単に30分でRedmine3.1.1->3.2.2バージョンアップする - designetwork

CSSは redmine/public/stylesheets 以下に配置されている。

[root@CentOS-01 public]# vi stylesheets/responsive.css

/*
  redmine's body is set to min-width: 900px
  add first breakpoint here and start adding responsiveness
*/

/*@media all and (max-width: 899px)*/
@media all and (max-width: 99px)
{
  /*----------------------------------------*\
    A) BASIC MOBILE RESETS
  \*----------------------------------------*/
  <snip>

[root@CentOS-01 public]# service httpd restart

変更結果

このようにレスポンシブデザインが適用されなくなった。

Before

f:id:daichi703n:20160603030433j:plain

After

f:id:daichi703n:20160603030439j:plain

PCレイアウトCSS変更

ちなみに、似たような設定でこちらを変更すると、このように最小サイズまで縮んでしまいレイアウトが崩れる。そのため、こちらのmin-widthは変更不要。

[root@CentOS-01 public]# vi stylesheets/application.css

html {overflow-y:scroll;}
/*body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }*/
body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }

h1, h2, h3, h4 {font-family: "Trebuchet MS", Verdana, sans-serif;padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
<snip>

[root@CentOS-01 public]# service httpd restart

f:id:daichi703n:20160603030720j:plain