ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 12 years ago

Closed 12 years ago

#1948 closed project (fixed)

17. commentList(コメントリスト)をXHTML+CSS化

Reported by: ebihara Owned by: nobody
Priority: blocker Milestone:
Component: pne-xhtmlcss Version:
Keywords: Cc:

Description (last modified by ogawa)

「commentList(コメントリスト)」をXHTML+CSS化する。

wiki:pne-xhtmlcss/parts/17

リビジョン
r5266, r5267, r5269, r5305, r5361, r5362, r5364

Attachments (2)

#1948.GIF (8.2 KB) - added by nakasone 12 years ago.
#1948_2.GIF (5.3 KB) - added by nakasone 12 years ago.

Download all attachments as: .zip

Change History (41)

comment:1 Changed 12 years ago by ebihara

Description: modified (diff)

comment:2 Changed 12 years ago by ebihara

Priority: minorblocker

comment:3 Changed 12 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

マークアップ改善用HTMLを用意します。

comment:4 Changed 12 years ago by ebihara

Keywords: マークアップ added; パーツ removed
Owner: changed from ebihara to nobody
Status: assignednew

r5216 でマークアップ用HTMLを追加しました。よろしくお願いします。

comment:5 Changed 12 years ago by takai

Owner: changed from nobody to takai
Status: newassigned

comment:6 Changed 12 years ago by takai

  • 左にサイドバーがあるページ(LayoutB)として組みました
    • IE6のバグに対応した関係で、ダブルフロート及びwidth指定をしています
    • 他のパーツを同様にマークアップする場合、そのパーツの幅などをCSSで個別に指定する必要がありそうです

comment:7 Changed 12 years ago by ebihara

Summary: コメント・書き込み一覧(commentsList)をXHTML+CSS化23. コメント・書き込み一覧(commentsList)をXHTML+CSS化

comment:8 Changed 12 years ago by takai

  • HTMLを記述ミスを修正 r5269

comment:9 Changed 12 years ago by takai

Keywords: パーツ added; マークアップ removed
Owner: changed from takai to nobody
Status: assignednew

comment:10 Changed 12 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

comment:11 Changed 12 years ago by ebihara

Owner: changed from ebihara to nobody
Status: assignednew

comment:12 Changed 12 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

パーツリストに対応リビジョンを載せます。

comment:13 Changed 12 years ago by takai

  • 02/20/08 20:04:02 の r5269 に対応する不要な終了タグを削除

comment:14 Changed 12 years ago by ebihara

Keywords: テンプレート added; パーツ removed

r5318 でパーツリストにマークアップの対応リビジョンを追加しました。 テンプレート改善作業よろしくお願いします。

comment:15 Changed 12 years ago by ebihara

Owner: changed from ebihara to nobody
Status: assignednew

手放し忘れていました。どなたかお願いします。

comment:16 Changed 12 years ago by ogawa

Description: modified (diff)
Summary: 23. コメント・書き込み一覧(commentsList)をXHTML+CSS化17. commentList(コメントリスト)をXHTML+CSS化

comment:17 Changed 12 years ago by ogawa

Description: modified (diff)

comment:18 Changed 12 years ago by takai

Keywords: マークアップ added; テンプレート removed
Owner: changed from nobody to takai
Status: newassigned

comment:19 Changed 12 years ago by takai

  • ダブルフロート型から、フロートマージン型に変更しました。
  • 記事の内容に画像が含まれる場合に対してもマークアップを施しました。

comment:20 Changed 12 years ago by takai

Keywords: パーツ added; マークアップ removed
Owner: changed from takai to nobody
Status: assignednew

comment:21 Changed 12 years ago by takai

  • HTMLを修正 r5364
    • 他のパーツ名が誤っていたので修正しました

comment:22 Changed 12 years ago by ogawa

Description: modified (diff)
Keywords: テンプレート added; パーツ removed

wiki:pne-xhtmlcss/parts/17 更新しました。テンプレート班に回します。

comment:23 Changed 12 years ago by takai

comment:24 Changed 12 years ago by nakasone

wiki:pne-xhtmlcss/parts/17 更新しました。テンプレート班に回します。

comment:25 Changed 12 years ago by nakasone

Owner: changed from nobody to nakasone
Status: newassigned

テンプレートの書き換えをやります。

comment:26 Changed 12 years ago by nakasone

fh_diary.tplの書き換えを行ったところ、チェックボックスの改行を含むとレイアウトが崩れてしまうのですが、どう対処すればいいでしょうか。

対象のテンプレートのソースは以下です。(r5626

({* #1948 *})({if $type == "h"})
({* #1948 *})<br />
({* #1948 *})<input type="checkbox" name="target_c_diary_comment_id[]" value="({$item.c_diary_comment_id})" />
({* #1948 *})({/if})

元のマークアップは以下です。

({* #1948 *})<div style="padding:4px 3px;">
({* #1948 *})
({* #1948 *})({$item.r_datetime|date_format:"%Y年%m月%d日<br>%H:%M"})<br>
({* #1948 *})
({* #1948 *})({if $type == "h"})
({* #1948 *})
({* #1948 *})<input type="checkbox" name="target_c_diary_comment_id[]" value="({$item.c_diary_comment_id})" class="no_bg">
({* #1948 *})
({* #1948 *})({/if})
({* #1948 *})
({* #1948 *})</div>

Changed 12 years ago by nakasone

Attachment: #1948.GIF added

Changed 12 years ago by nakasone

Attachment: #1948_2.GIF added

comment:27 Changed 12 years ago by nakasone

c_event_list.tplにおいて、http://trac.openpne.jp/attachment/ticket/1948/%231948_2.GIFのようなレイアウトとなっているのはどのように書き換えたら良いでしょうか

出力されたHTMLは以下です。

<table border="0" cellspacing="0" cellpadding="0" style="width:634px;">
<tr>
<td style="width:634px;height:1px;" class="bg_01" colspan="5"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td style="width:1px;" class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td style="width:330px;" class="bg_02" align="left">
<div class="padding_s">
最近書き込みがあったイベントから順に表示しています。<br>
<a href="./?m=pc&amp;a=page_c_topic_list&amp;target_c_commu_id=235">トピック一覧はこちら</a>
</div>
</td>
<td style="width:302px;" class="bg_02" align="right" valign="middle">
<div style="padding:4px 3px;">

&nbsp;&nbsp;1件~1件を表示&nbsp;&nbsp;

</div>
</td>
<td style="width:1px;" class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
</table>}}}

comment:28 Changed 12 years ago by takai

  • イベント一覧のページャに対するマークアップを示しました。
  • HTML r5637
  • CSS r5638
<div class="pagerRelativeMulti">
<p>最近書き込みがあったイベントから順に表示しています。</p>
<p><a href="./">トピック一覧はこちら</a></p>
<div class="pager">
<p class="number">1件~1件を表示</p>
</div>
</div>
  • idで識別したいのですが、パーツグループを元に局所的なマークアップをしているのでclassを振っています。
  • 「最近書き込みが~」という文章が長くなることを想定していません。

comment:29 Changed 12 years ago by takai

  • http://trac.openpne.jp/ticket/1948#comment:26
  • dd要素に対する border-left として表現していました。
  • これは日付部分(dt要素)が本文部分(dd要素)より高くならない前提なので、日付部分が高くなると線が足りなくなります。
  • 3月10日の時点でdl要素の背景で枠線のように見せるという対応をしましたが、不適だったかもしれません。
  • IE6はバグにより、dt要素とdd要素の間に隙間ができています。
  • dd要素の上線とこの境界線を繋ぐにはdd要素に左線を指定することで可能です。
  • このグループに属しているパーツでも、本来の日付部分(dt要素)の幅が異なっているために高さが逆転する可能性があります。
  • dt要素の幅を個別に指定するか最大値を取るようにして、折り返しによって日付部分が高くならないようにした方がよいかもしれません。
  • ちなみに、IE6でdt要素とdd要素の間に隙間ができないようなレンダリングも可能ですが・・・
    • 現在、フロートマージン型の段組にしており、hasLayoutプロパティ値に関連してバグが生じています。
    • ダブルフロート型にすれば隙間に関するバグは解消できますが、他の配置に関する指定が厄介になります。
  • これについては保留しておきます。

comment:30 Changed 12 years ago by nakasone

Keywords: パーツ added; テンプレート removed
Owner: changed from nakasone to nobody
Status: assignednew

r5618,r5625,r5626,r5662,r5663,r5664,r5665

で対応しました。

comment:31 Changed 12 years ago by ebihara

Keywords: 確認中 added

comment:32 Changed 12 years ago by takai

  • 枠線に関してコメントです。
  • 3月10日に対応した方法にしています。
  • IE6で隙間が生じてしまう問題には、その分だけ表示位置をシフトする力技(環境によってずれる可能性がある)を施しています。
  • 別の対応としては、日付部分が本文部分より高くならないことを保障するか、テーブルで組んでしまう方法が考えられます。

comment:33 Changed 12 years ago by takai

  • 枠線の表現に関して、日付部分が本文部分より高くならないようにする方針で修正しました。
    • 日付部分の行数に依存しているので、文字サイズを大きくするなどして日付部分の行数が増えると線が欠けます。

comment:34 Changed 12 years ago by ogawa

Keywords: テンプレート 再修正 added; パーツ 確認中 removed

wiki:pne-xhtmlcss/parts/17 を更新しました。

comment:35 Changed 12 years ago by ogawa

Owner: changed from nobody to ogawa
Status: newassigned

comment:36 Changed 12 years ago by ogawa

fh_diary.tpl メモ

  • 画像付きコメントのスタイル
  • t_form_block が if をまたいで使えない

comment:37 Changed 12 years ago by ogawa

Keywords: パーツ テンプレート確認中 added; テンプレート 再修正 removed
Owner: changed from ogawa to nobody
Status: assignednew

r5889, r5890 にてテンプレート更新完了。

comment:38 Changed 12 years ago by nakasone

r6189

fh_delete_comment.tplのテンプレートを書き換えました。

comment:39 Changed 12 years ago by ogawa

Keywords: パーツ テンプレート確認中 removed
Resolution: fixed
Status: newclosed
Note: See TracTickets for help on using tickets.