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

Opened 12 years ago

Closed 12 years ago

#1910 closed project (fixed)

18. searchResultList(検索結果リスト)のXHTML+CSS化

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

Description (last modified by ogawa)

「searchResultList(検索結果リスト)」をXHTML+CSS化する。

wiki:pne-xhtmlcss/parts/18

リビジョン
r5223, r5224, r5267, r5354, r5355, r5363

Attachments (3)

h_diary_list_all_(02).png (9.0 KB) - added by ebihara 12 years ago.
○○一覧系ページの解説用画像
#1910.GIF (10.4 KB) - added by nakasone 12 years ago.
#1910_2.GIF (9.0 KB) - added by nakasone 12 years ago.

Download all attachments as: .zip

Change History (47)

Changed 12 years ago by ebihara

Attachment: h_diary_list_all_(02).png added

○○一覧系ページの解説用画像

comment:1 Changed 12 years ago by ebihara

r5179 で、マークアップ作業用のHTMLを追加しました。

comment:2 Changed 12 years ago by ebihara

Description: modified (diff)

comment:3 Changed 12 years ago by ebihara

Type: enhancementproject

comment:4 Changed 12 years ago by ebihara

Keywords: マークアップ added

comment:5 Changed 12 years ago by ebihara

Description: modified (diff)
Summary: ○○一覧系ページのXHTML+CSS化検索結果一覧系(searchResultList)のXHTML+CSS化

comment:6 Changed 12 years ago by ebihara

Description: modified (diff)

comment:7 Changed 12 years ago by ebihara

Priority: criticalblocker

comment:8 Changed 12 years ago by takai

Owner: changed from nobody to takai
Status: newassigned
  • 最新日記一覧のHTMLを書き換えました
    • パーツの見出しは、h3要素にしました
    • tableの1重で、『詳細を見る』はポジションで配置しています
    • 仕様上、displayプロパティ値がtable系の要素をポジションの基準にできないのでdivを重ねています
  • 二重線のパーツに関する共通記述をある程度書きました

comment:9 Changed 12 years ago by takai

  • ベースレイアウトに併せて少し修正しました
  • HTML r5264
  • CSS r5267
  • 縦中央揃えでなくても良いパーツですが、とりあえずtable要素で組んだままにしておきます。

comment:10 Changed 12 years ago by ebihara

Summary: 検索結果一覧系(searchResultList)のXHTML+CSS化3. 検索結果一覧系(searchResultList)のXHTML+CSS化

comment:11 Changed 12 years ago by takai

Keywords: パーツ added; マークアップ removed
Owner: changed from takai 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 ebihara

Owner: changed from ebihara to nobody
Status: assignednew

テンプレートのマーキングの関係で手放します

comment:14 Changed 12 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

comment:15 Changed 12 years ago by ebihara

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

r5317 でパーツリストにマークアップの対応リビジョンを追加しました。

テンプレート改善作業よろしくお願いします。

comment:16 Changed 12 years ago by ogawa

Owner: changed from nobody to ogawa
Status: newassigned

やってみます。

comment:17 Changed 12 years ago by ogawa

例えば、m=pc&a=page_h_com_find_all で、マークアップ班が h3 でマークアップしている部分に

コミュニティ一覧  ***  1 件 が該当しました。

のような文字列が入るのですが、

<h3>コミュニティ一覧  ***  1 件 が該当しました。</h3>

でよいものでしょうか。

ちなみに元のマークアップだと、

<td style="padding: 2px 0px; width: 600px;" class="bg_06"><span class="c_00"><span class="b_b">コミュニティ一覧</span>&nbsp;&nbsp;***&nbsp;
    1
件&nbsp;が該当しました。</span></td>

comment:18 Changed 12 years ago by ogawa

Description: modified (diff)
Summary: 3. 検索結果一覧系(searchResultList)のXHTML+CSS化18. searchResultList(検索結果リスト)のXHTML+CSS化

パーツ名を変更しました。

comment:19 Changed 12 years ago by ogawa

Description: modified (diff)

comment:20 in reply to:  17 Changed 12 years ago by ogawa

Keywords: マークアップ 質問 added; テンプレート removed
Owner: changed from ogawa to takai
Status: assignednew

上記の質問 に加えてもうひとつ質問を、

<div class="partsInfo top"> 
<p class="number">1件~20件を表示</p> 
<p class="moreInfo"><a href="./?m=pc&amp;a=page_h_diary_list_all&amp;keyword=&amp;page =1&amp;direc=1">次を表示</a></p> 
</div> 

の部分で、「前を表示」があった場合はどうマークアップすればよいでしょうか。

表示上は次のようになります。

前を表示 21件~40件を表示 次を表示

comment:21 Changed 12 years ago by takai

Status: newassigned

comment:22 Changed 12 years ago by takai

  • 上記の質問の問題に対応する形で書き直しました。
    • 見出し部分を<div class="partsHeading">にし、h3要素を含む形にしました。
      • <div class="partsHeading"><h3>見出し</h3><p> * 1件が該当</p></div>
      • このように記述でき、さらに右寄せのテキストがあるような場合にも対応できます。
    • 「前を表示」も<p class="moreInfo">でマークアップします。
      • <div class="partsInfo">内のp要素それぞれに左マージンを与えています。

comment:23 Changed 12 years ago by takai

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

comment:24 Changed 12 years ago by takai

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

comment:25 Changed 12 years ago by ogawa

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

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

comment:26 Changed 12 years ago by takai

comment:27 Changed 12 years ago by nakasone

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

comment:28 Changed 12 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

やります。

comment:29 Changed 12 years ago by ebihara

進捗状況:

  • 対応済
    • h_com_topic_find_all.tpl
  • 未対応
    • h_com_find_all.tpl
    • c_com_topic_find.tpl
    • h_diary_list_all.tpl
    • h_search_result.tpl
    • h_confirm_list.tpl
    • h_bookmark_list.tpl

comment:30 Changed 12 years ago by nakasone

Owner: changed from ebihara to nakasone
Status: assignednew

海老原さんから引き継いでテンプレートの書き換えをやります。

Changed 12 years ago by nakasone

Attachment: #1910.GIF added

comment:31 Changed 12 years ago by nakasone

h_bookmark_list.tplにおいて、http://trac.openpne.jp/attachment/ticket/1910/%231910.GIFのように、ボタンの位置がずれてしまうのはどのように対処したら良いでしょうか

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

<div class="block">
<div class="ditem"><div class="item"><table>
<tr class="item1"><td class="photo" rowspan="4"><a href="./?m=pc&amp;a=page_f_home&amp;target_c_member_id=2"><img src="./img.php?filename=skin_default_no_image_1204701544.gif&amp;w=76&amp;h=76&amp;m=pc" alt="" /></a></td>
<th>名前</th><td>jaune</td></tr>
<tr class="item2"><th>自己紹介</th><td></td></tr>
<tr class="item4"><th>最終ログイン</th><td>3日以上

<span class="moreInfo">
<p class ="button"><a href="./?m=pc&amp;a=page_f_home&amp;target_c_member_id=2"><img src="./skin/default/img/button_shosai.gif" alt="詳細を見る" /></a>&nbsp;
<a href="./?m=pc&amp;a=do_f_bookmark_delete&amp;target_c_member_id=2&amp;sessid=b00b9c6bc8a60dc89f80cc2e0df2dc85"><img src="./skin/default/img/button_sakujo.gif" alt="削除する" /></a></p></span></td></tr>
</table>
</div>
</div>

comment:32 Changed 12 years ago by takai

  • ボタン画像の差異(1個だったり2個だったり)に対応するマークアップ及びスタイルを書き換えました。
  • HTML r5668
  • CSS r5669

comment:33 Changed 12 years ago by nakasone

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

r5667,r5673,r5674,r5675,r5676,r5682,r5683,r5691

で対応しました。

comment:34 Changed 12 years ago by ogawa

Keywords: テンプレート確認中 added

wiki:pne-xhtmlcss/parts/18 を変更しました。テンプレート確認中。

comment:35 Changed 12 years ago by ogawa

r5824 でマージしました。h_confirm_list.tpl が怪しい感じ。

comment:36 Changed 12 years ago by nakasone

r6188

f_bookmark_add.tplをsearchResultList(検索結果リスト)として書き換えました。

Changed 12 years ago by nakasone

Attachment: #1910_2.GIF added

comment:37 Changed 12 years ago by nakasone

c_sub_admin_delete.tplの、以前とは別のタイプのボタンについて、横に並べて表示したいのですがどのように対処すれば良いでしょうか。

出力されたHTML(書き換え前)

<table border="0" cellspacing="0" cellpadding="0" style="width:650px;margin:0px auto;" class="border_07">
<tr>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
<td style="width:636px;" class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
<td style="width:7px;" class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
<td class="bg_01" align="center">
<!-- *ここから:副管理者から降格>内容* -->
<!-- ここから:小タイトル -->
<div class="border_01">
<table border="0" cellspacing="0" cellpadding="0" style="width:634px;">
<tr>
<td style="width:36px;" class="bg_06"><img src="./skin/default/img/content_header_1.gif" style="width:30px;height:20px;" class="dummy"></td>
<td style="width:468px;padding:2px 0px;" class="bg_06"><span class="b_b c_00">副管理者から降格</span></td>
<td style="width:140px;" align="right" class="bg_06">&nbsp;</td>
</tr>
</table>
</div>
<!-- ここまで:小タイトル -->
<!-- ここから:主内容 -->
<table border="0" cellspacing="0" cellpadding="0" style="width:636px;">
<tr>
<td style="width:636px;height:1px;" class="bg_01" colspan="3"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td style="width:1px;height:1px;" class="bg_01"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td style="width:634px;" class="bg_09">

<div class="padding_w_m">

この人を副管理者から降格させます。よろしいですか。

</div>

</td>
<td style="width:1px;height:1px;" class="bg_01"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td style="height:1px;" class="bg_01" colspan="3"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td style="width:1px;height:1px;" class="bg_01"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_05" align="center">

<div style="padding:6px;">

<div class="border_01 bg_09" style="width:562px;margin:0px auto;">

<img src="./skin/dummy.gif" alt="dummy" class="v_spacer_m">

<table border="0" cellspacing="0" cellpadding="0" style="width:550px;margin:0px auto;">
<tr>
<td style="width:550px;height:1px;" class="bg_01" colspan="9"><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:110px;" class="bg_03" align="center" valign="middle" rowspan="5">

<div class="padding_s">

<a href="./?m=pc&amp;a=page_f_home&amp;target_c_member_id=1048">
<img src="./img.php?filename=skin_no_image.gif&amp;w=76&amp;h=76&amp;m=pc"></a>

</div>

</td>
<td style="width:1px;" class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td style="width:105px;" class="bg_05" align="left" valign="middle">

<div style="padding:6px;" class="c_01">

名&nbsp;&nbsp;前

</div>

</td>
<td style="width:1px;" class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td style="width:331px;" class="bg_02" align="left" valign="middle" colspan="3">

<div class="padding_s">

jaune

</div>

</td>
<td style="width:1px;" class="bg_01" align="center"><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 class="bg_01" align="center" colspan="7"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_05" align="left" valign="middle">

<div class="padding_s">

自己紹介

</div>

</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_02" align="left" valign="middle" colspan="3">

<div class="padding_s">

&nbsp;

</div>

</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_01" align="center" colspan="7"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_05" align="left" valign="middle">

<div class="padding_s">

最終ログイン

</div>

</td>
<td class="bg_01"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_02" align="left">

<div class="padding_s">

10分以内&nbsp;

</div>

</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
<td class="bg_03" align="center" valign="middle">

<div class="padding_s">

<table border="0" style="width:240px;">
<tr>

<form action="./" method="post">
<input type="hidden" name="m" value="pc">
<input type="hidden" name="a" value="do_c_sub_admin_delete">
<input type="hidden" name="sessid" value="22c4c82cc93550096d2c800dd523409c">
<input type="hidden" name="target_c_member_id" value="1048">
<input type="hidden" name="target_c_commu_id" value="240">
<td align="right"><input type=submit class="submit" name="yes_button" value=" 送 信 ">
</td>
</form>

<form action="./" method="get">
<input type="hidden" name="m" value="pc">
<input type="hidden" name="a" value="page_c_edit_member">
<input type="hidden" name="target_c_commu_id" value="240">
<td><input type="submit" class="submit" value="キャンセル">
</td>
</form>

</tr>
</table>

</div>

</div>

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

<img src="./skin/dummy.gif" alt="dummy" class="v_spacer_l">

</div>


</td>
<td style="height:1px;" class="bg_01"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
<tr>
<td style="height:1px;" class="bg_01" colspan="3"><img src="./skin/dummy.gif" alt="dot" class="dot"></td>
</tr>
</table>
<!-- ここまで:主内容 -->
<!-- 無し -->
<!-- *ここまで:副管理者から降格>>内容* -->
</td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
</tr>
<tr>
<td class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
<td class="bg_00"><img src="./skin/dummy.gif" alt="square" class="square"></td>
</tr>
</table>

comment:38 Changed 12 years ago by takai

  • マークアップ例を追加しました
  • HTML r6207
  • CSS r6208

comment:39 Changed 12 years ago by takai

  • 【副管理者から降板】だけでなく、このパーツ自体の下部のボタン部分の見栄えを少し変えて書き直します。

comment:40 Changed 12 years ago by takai

  • ボタン部分を書き直しました
    • ボタン左の枠線を background から border に変えました
  • 副管理者から降板の見栄え(ボタンの位置)を変えました

comment:41 Changed 12 years ago by nakasone

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

テンプレートの再修正をやります。

comment:42 Changed 12 years ago by nakasone

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

r6290,r6291,r6292,r6293,r6294

で対応しました。

comment:43 Changed 12 years ago by ogawa

Keywords: テンプレート確認中 added

comment:44 Changed 12 years ago by ogawa

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