フォーラムのデザインを見やすくしたい。

[ppp]

フォーラムを「仕様検討用のディスカッション」として使っているのですが、
一般的ないわゆる掲示板とくらべて、平坦で見にくいです。

例えば
http://sourceforge.jp/forum/forum.php?thread_id=21248&forum_id=11
で実現されているように、青枠で囲うとか、段下げとかしたいのですが、
どうすればよいかさっぱりわかりません。(CSSを指定する？)

良い方法は無いでしょうか？
なにとぞよろしくお願いいたします。

Redmine 0.7.1 です。

[くるくる]

こんにちは。いつもお世話になっております。

Rubyのコーディングはよく判らないのですが...。
sourceforge.jpの掲示板だと、<UL>タグをくっつけて位置をずらしているようですね。

こちらのRedmine（ただし0.8.3）でチェックしたところ、掲示板のメッセージ一覧の表示は、以下で調整しているようです。

Redmine\app\views\messages\show.rhtml

ここを調整すれば良いんじゃないかと思います。

sourceforge.jpのようにお手軽に済ますなら、Replyを配列からとりだすところで、ULタグを書くだけでどうでしょうか。

-------------------------------------------------------------
<% unless @replies.empty? %>
<h3 class="icon22 icon22-comment"><%= l(:label_reply_plural) %></h3>
<% @replies.each do |message| %>
　<!-- ここにULタグをつけて強制的にインデント -->
<ul>
<a name="<%= "message-#{message.id}" %>"></a>
<div class="contextual">
.... 省略 .....
<% end %>
----------------------------------------
タグをきちんと閉じてるわけではないので、XHTML的には正しいお作法ではないかもしれません。また、表示はブラウザに依存してしまうかもしれませ
ん。
（IE8とFirefox3はそれっぽくなりましたが）


スタイルシートで調整してみるなら、こんな感じでどうでしょう？
とりあえずブロックレベルで調整してみました。
（同じくshow.rhtml の22行目あたりから）

---------------------------------------
<% unless @replies.empty? %>
<% i = 0%>
<h3 class="icon22 icon22-comment"><%= l(:label_reply_plural) %></h3>
<% @replies.each do |message| %>
<% i = i + 1 %>
<div style="position: relative; left:<%= "#{i * 20}pt" %>;">
<a name="<%= "message-#{message.id}" %>"></a>
<div class="contextual"> (<%= "#{i}" %>)
<%= link_to_remote_if_authorized image_tag('comment.png'), { :url
=> {:action => 'quote', :id => message} }, :title => l(:button_quote)
%>
<%= link_to(image_tag('edit.png'), {:action => 'edit', :id =>
message}, :title => l(:button_edit)) if message.editable_by?
(User.current) %>
<%= link_to(image_tag('delete.png'), {:action => 'destroy', :id =>
message}, :method => :post, :confirm => l(:text_are_you_sure), :title
=> l(:button_delete)) if message.destroyable_by?(User.current) %>
</div>
<div class="message reply">
<h4><%=h message.subject %> - <%= authoring message.created_on,
message.author %></h4>
<div class="wiki"><%= textilizable message, :content, :attachments
=> message.attachments %></div>
<%= link_to_attachments message, :author => false %>
</div>
</div>
<% end %>
<% end %>
----------------------------------------

ループのカウンタを作って、相対位置でReplyの番号順だけすこしづらしています。（コードは詳しくないので適当で済みません...）

On 6月9日, 午前9:58, ppp <ttake2...@gmail.com> wrote:
> フォーラムを「仕様検討用のディスカッション」として使っているのですが、
> 一般的ないわゆる掲示板とくらべて、平坦で見にくいです。
>

> 例えばhttp://sourceforge.jp/forum/forum.php?thread_id=21248&forum_id=11

[ppp]

くるくるさん、ありがとうございます。
すばらしい！！

参考にさせていただいて、色と段付けが(かなり強引ですが)できました。^^;
Redmine 0.7.1 ですが、0.8.xでもほぼ同じでしょう。

IE7,IE8,FireFox3.0 GoogleChrome、Safari3.0 で確認しました。
#ブラウザによって多少レイアウトが異なりますが、とりあえず満足です。

画像はこちら。
http://sites.google.com/site/redmine2009/cab/sample.jpg

変更ファイル app\views\messages\show.rhtml

10行目あたりから

<h2><%=h @topic.subject %></h2>
<div class="message">

+<table bgcolor=#DDDDDD >
+<td width="1500">

<p><span class="author"><%= authoring @topic.created_on, @topic.author
%></span></p>
<div class="wiki">
<%= textilizable(@topic.content, :attachments => @topic.attachments)
%>
</div>

<%= link_to_attachments @topic.attachments, :no_author => true %>
</div>
<br />

<% unless @replies.empty? %>

+<% i = 0%>
+<% j = 0%>

+<table bgcolor=#AAAAAA >
+<td width="1500">

<h3 class="icon22 icon22-comment"><%= l(:label_reply_plural) %></h3>
<% @replies.each do |message| %>

+<% j = j + 1 %>
+<% k = "#ECECFF"
+ if(j % 2 == 0 ) then k = "#DDDDDD"
+ end %>
+<% i = i + 1 %>
+<table bgcolor="<%=k%>" >
+<td width="1500">
+ <div style="position: relative; left:<%= "#{i * 20}pt" %>;">

<a name="<%= "message-#{message.id}" %>"></a>

- <div class="contextual">
+ <div class="contextual"> (<%= "#{i}" %>)
<%= link_to_if_authorized image_tag('edit.png'), {:action =>
'edit', :id => message}, :title => l(:button_edit) %>
<%= link_to_if_authorized image_tag('delete.png'), {:action =>

'destroy', :id => message}, :method => :post, :confirm => l

(:text_are_you_sure), :title => l(:button_delete) %>

</div>
<div class="message reply">
<h4><%=h message.subject %> - <%= authoring message.created_on,
message.author %></h4>
<div class="wiki"><%= textilizable message, :content, :attachments
=> message.attachments %></div>

<%= link_to_attachments message.attachments, :no_author => true %>

[くるくる]

pppさん、こんにちは。
お試しくださって、ありがとうございます。

On 6月11日, 午後7:35, ppp <ttake2...@gmail.com> wrote:
> くるくるさん、ありがとうございます。
> すばらしい！！
>
> 参考にさせていただいて、色と段付けが(かなり強引ですが)できました。^^;
> Redmine 0.7.1 ですが、0.8.xでもほぼ同じでしょう。
>
> IE7,IE8,FireFox3.0 GoogleChrome、Safari3.0 で確認しました。
> #ブラウザによって多少レイアウトが異なりますが、とりあえず満足です。
>
> 画像はこちら。http://sites.google.com/site/redmine2009/cab/sample.jpg

まだROR勉強中ですのが、オープンソースのコードを少しずつ読んでカスタマイズしていくのは、楽しいなあと思っています。
先ほど、もう少し一覧表示系のスタイルシートやrhtmlについて調べてみたところ、一覧表の行の色分け（偶数・奇数での色分け）は、<%=
cycle('odd', 'even') %>　という非常に便利な関数（？）でハンドリングしていることが判りました。

スタイルに関しては、あんまりHTML中に埋め込みたくはないので、app\views\messages\show.rhtml と、
application.cssをカスタマイズしてみました。

-----------------------------------------------------------
@@ -19,22 +19,26 @@
</div>
<br />

-<% unless @replies.empty? %>
-<h3 class="icon22 icon22-comment"><%= l(:label_reply_plural) %></h3>
-<% @replies.each do |message| %>
- <a name="<%= "message-#{message.id}" %>"></a>
- <div class="contextual">
- <%= link_to_remote_if_authorized image_tag('comment.png'), { :url
=> {:action => 'quote', :id => message} }, :title => l(:button_quote)
%>
- <%= link_to(image_tag('edit.png'), {:action => 'edit', :id =>

message}, :title => l(:button_edit)) if message.editable_by?
(User.current) %>

- <%= link_to(image_tag('delete.png'), {:action => 'destroy', :id

=> message}, :method => :post, :confirm => l

(:text_are_you_sure), :title => l(:button_delete)) if
message.destroyable_by?(User.current) %>
- </div>
- <div class="message reply">
- <h4><%=h message.subject %> - <%= authoring message.created_on,
message.author %></h4>
- <div class="wiki"><%= textilizable message, :content, :attachments
=> message.attachments %></div>
- <%= link_to_attachments message, :author => false %>
- </div>
-<% end %>
-<% end %>
+<% unless @replies.empty? %>

+<% i = 0%>

+<h3 class="icon22 icon22-comment"><%= l(:label_reply_plural) %></h3>
+<% @replies.each do |message| %>

+<% i = i + 1 %>

+ <div style="position: relative; left:<%= "#{i * 20}pt" %>;"

class="list <%= cycle('odd', 'even') %>">
+ <a name="<%= "message-#{message.id}" %>"></a>

+ <div class="contextual"> (<%= "#{i}" %>)

+ <%= link_to_remote_if_authorized image_tag('comment.png'), { :url
=> {:action => 'quote', :id => message} }, :title => l(:button_quote)
%>
+ <%= link_to(image_tag('edit.png'), {:action => 'edit', :id =>

message}, :title => l(:button_edit)) if message.editable_by?
(User.current) %>

+ <%= link_to(image_tag('delete.png'), {:action => 'destroy', :id

=> message}, :method => :post, :confirm => l

(:text_are_you_sure), :title => l(:button_delete)) if
message.destroyable_by?(User.current) %>
+ </div>
+ <div class="message reply">
+ <h4><%=h message.subject %> - <%= authoring message.created_on,
message.author %></h4>
+ <div class="wiki"><%= textilizable message, :content, :attachments
=> message.attachments %></div>
+ <%= link_to_attachments message, :author => false %>
+ </div>
+ </div>
+<% end %>
+<% end %>

<% if !@topic.locked? && authorize_for('messages', 'reply') %>
<p><%= toggle_link l(:button_reply), "reply", :focus =>
'message_content' %></p>

------------
#判りにくくて申し訳ありません。。。。。

あとは、application.css に、以下を追加しました。

/**** For Message Board ****/
.list { border: 1px solid #e4e4e4; padding:5px;}


これだと、色指定など全体のスタイルに合わせることが出来るかな、と思いました。
ちょっとのカスタマイズですが、Redmineのメインにも取り込んでもらえると、もしかしたら嬉しいでしょうか(^^)

[ppp]

くるくるさん、またまたありがとうございます。
すばらしいです。うれしい。

On 6月12日, 午前11:22, くるくる <akiko_p...@hotmail.co.jp> wrote:
> + <div style="position: relative; left:<%= "#{i * 20}pt" %>;"class="list <%= cycle('odd', 'even') %>">

ブロック要素の右端が階段状になっていたので、
left:<%= "#{i * 20}pt" %> ではなく
margin-left:<%= "#{i * 20}pt" %> にしてみました。ばっちりです。

画像はこちら http://sites.google.com/site/redmine2009/cab/sample2.jpg

> これだと、色指定など全体のスタイルに合わせることが出来るかな、と思いました。
> ちょっとのカスタマイズですが、Redmineのメインにも取り込んでもらえると、もしかしたら嬉しいでしょうか(^^)

はい、本体に取り込んでいただけると、とてもうれしいです。:-)