Changeset 1255


Ignore:
Timestamp:
Apr 22, 2006, 4:06:25 PM (18 years ago)
Author:
chrisaga
Message:
  • rewrite : search.tpl with FORM.filter and FILESETs instead of TABLEs. Now valid HTML 4.01 strict
  • improve : FORM.filter for search.tpl needs
  • fix : FORM.filter bug with Opera
  • fix : FORM#quickconnect
Location:
trunk/template/yoga
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/template/yoga/default-layout.css

    r1253 r1255  
    126126/**
    127127 * Filter forms are displayed label by label with the input (or select...)
    128  * below the label
     128 * below the label. Use a SPAN to group objects in a single line.
    129129 */
    130130FIELDSET {
    131131  padding: 1em;
    132132  margin: 1em;
     133  overflow: hidden; /* <- makes Opera happy */
    133134}
    134135
    … …  
    140141  padding: 0;
    141142}
    142 
     143FORM.filter FIELDSET UL LABEL {
     144  display: inline;
     145  float: none;
     146}
     147
     148/* cannot use FIELDSET>LABEL because of IE<=6 */
    143149FORM.filter FIELDSET LABEL INPUT,
    144150FORM.filter FIELDSET LABEL SELECT,
     151FORM.filter FIELDSET LABEL SPAN,
    145152FORM.filter FIELDSET LABEL TEXTAREA {
    146153  display: block;
    147154  margin: 0.5em 0;
    148155}
     156FORM.filter FIELDSET * LABEL INPUT,
     157FORM.filter FIELDSET LABEL * INPUT,
     158FORM.filter FIELDSET * LABEL SELECT,
     159FORM.filter FIELDSET LABEL * SELECT,
     160FORM.filter FIELDSET * LABEL TEXTAREA,
     161FORM.filter FIELDSET LABEL * TEXTAREA {
     162  display: inline;
     163  vertical-align: baseline;
     164  margin: 0 0.5em 0 0;
     165}
     166
     167/* following declaration is important to avoid strange FF behaviour */
     168FORM.filter FIELDSET LABEL SPAN SELECT {
     169  margin: 0;
     170}
    149171
    150172FORM.filter FIELDSET P,
    151 FORM.filter FIELDSET INPUT,
    152 FORM.filter FIELDSET TEXTAREA {
     173{
    153174  clear: left;
    154175  display: block;
    … …  
    240261
    241262UL.tagSelection {
    242   width: 500px;
     263  width: 40em;
     264  margin: 1em 0 1em 0;
    243265  padding: 0;
    244266}

  • trunk/template/yoga/menubar.css

    r1119 r1255  
    7676FORM#quickconnect P {
    7777  float: left;
     78  clear: left;
    7879}
    7980

  • trunk/template/yoga/search.tpl

    r1253 r1255  
    1 <!-- $Id:$ -->
     1<!-- $Id$ -->
    22<div id="content">
    33
    … …  
    1010  </div>
    1111
    12 <!-- TO DO -->
    13 <form method="post" name="post" action="{S_SEARCH_ACTION}">
     12<form class="filter" method="post" name="search" action="{S_SEARCH_ACTION}">
    1413<!-- BEGIN errors -->
    1514<div class="errors">
    … …  
    2120</div>
    2221<!-- END errors -->
    23 <table width="100%" cellpadding="2">
    24   <tr>
    25     <td width="50%" colspan="2"><b>{lang:search_keywords} : </b>
    26     <td colspan="2" valign="top">
    27           <input type="text" style="width: 300px" name="search_allwords" size="30" />
    28           <br />
    29           <input type="radio" name="mode" value="AND" checked="checked" /> {lang:search_mode_and}<br />
    30           <input type="radio" name="mode" value="OR" /> {lang:search_mode_or}
    31         </td>
    32   </tr>
    33   <tr>
    34     <td colspan="2"><b>{lang:search_author} :</b>
    35     <td colspan="2" valign="middle">
    36           <input type="text" style="width: 300px" name="search_author" size="30" />
    37         </td>
    38   </tr>
     22<fieldset>
     23  <legend>{lang:Filter}</legend>
     24  <label>{lang:search_keywords}<input type="text" style="width: 300px" name="search_allwords" size="30" /></label>
     25  <label>
     26    <span><input type="radio" name="mode" value="AND" checked="checked" /> {lang:search_mode_and}</span>
     27    <span><input type="radio" name="mode" value="OR" /> {lang:search_mode_or}</span>
     28  </label>
     29  <label>{lang:search_author}<input type="text" style="width: 300px" name="search_author" size="30" /></label>
     30</fieldset>
     31<fieldset>
     32  <legend>{lang:Search tags}</legend>
     33  {TAG_SELECTION}
     34  <label><span><input type="radio" name="tag_mode" value="AND" checked="checked" /> {lang:All tags}</span></label>
     35  <label><span><input type="radio" name="tag_mode" value="OR" /> {lang:Any tag}</span></label>
     36</fieldset>
    3937
    40   <tr>
    41     <td colspan="2"><b>{lang:Search tags} :</b></td>
    42     <td colspan="2" valign="middle">
    43       {TAG_SELECTION}
    44       <br /><label><input type="radio" name="tag_mode" value="AND" checked="checked" /> {lang:All tags}</label>
    45       <br /><label><input type="radio" name="tag_mode" value="OR" /> {lang:Any tag}</label>
    46     </td>
    47   </tr>
     38<fieldset>
     39  <legend>{lang:search_date}</legend>
     40  <label>{lang:search_date_type}
     41    <span>
     42      <input type="radio" name="date_type" value="date_creation" checked="checked" />{lang:Creation date}
     43    </span>
     44    <span>
     45      <input type="radio" name="date_type" value="date_available" />{lang:Post date}
     46    </span>
     47  </label>
     48  <label>{lang:search_date_from}
     49    <span>
     50      <select name="start_day">
     51        <!-- BEGIN start_day -->
     52        <option {start_day.SELECTED} value="{start_day.VALUE}">{start_day.OPTION}</option>
     53        <!-- END start_day -->
     54      </select>
     55      <select name="start_month">
     56        <!-- BEGIN start_month -->
     57        <option {start_month.SELECTED} value="{start_month.VALUE}">{start_month.OPTION}</option>
     58        <!-- END start_month -->
     59      </select>
     60      <input name="start_year" type="text" size="4" maxlength="4">
     61    </span>
     62    <a href="#" onClick="document.search.start_day.value={TODAY_DAY};document.search.start_month.value={TODAY_MONTH};document.search.start_year.value={TODAY_YEAR};">{lang:today}</a>
     63  </label>
     64  <label>{lang:search_date_to}
     65    <span>
     66      <select name="end_day">
     67        <!-- BEGIN end_day -->
     68        <option {end_day.SELECTED} value="{end_day.VALUE}">{end_day.OPTION}</option>
     69        <!-- END end_day -->
     70      </select>
     71      <select name="end_month">
     72        <!-- BEGIN end_month -->
     73        <option {end_month.SELECTED} value="{end_month.VALUE}">{end_month.OPTION}</option>
     74        <!-- END end_month -->
     75      </select>
     76      <input name="end_year" type="text" size="4" maxlength="4">
     77    </span>
     78    <a href="#" onClick="document.search.end_day.value={TODAY_DAY};document.search.end_month.value={TODAY_MONTH};document.search.end_year.value={TODAY_YEAR};">{lang:today}</a>
     79  </label>
     80</fieldset>
    4881
    49   <tr>
    50     <td colspan="2"><b>{lang:search_date} :</b>
    51     <td colspan="2" valign="middle">
    52       <table>
    53         <tr>
    54           <td>{lang:search_date_from} :</td>
    55           <td>
    56             <select name="start_day">
    57               <!-- BEGIN start_day -->
    58               <option {start_day.SELECTED} value="{start_day.VALUE}">{start_day.OPTION}</option>
    59               <!-- END start_day -->
    60             </select>
    61             <select name="start_month">
    62               <!-- BEGIN start_month -->
    63               <option {start_month.SELECTED} value="{start_month.VALUE}">{start_month.OPTION}</option>
    64               <!-- END start_month -->
    65             </select>
    66             <input name="start_year" type="text" size="4" maxlength="4">&nbsp;
    67             <a href="#" onClick="document.post.start_day.value={TODAY_DAY};document.post.start_month.value={TODAY_MONTH};document.post.start_year.value={TODAY_YEAR};">{lang:today}</a>
    68           </td>
    69         </tr>
    70         <tr>
    71           <td>{lang:search_date_to} :</td>
    72           <td>
    73             <select name="end_day">
    74               <!-- BEGIN end_day -->
    75               <option {end_day.SELECTED} value="{end_day.VALUE}">{end_day.OPTION}</option>
    76               <!-- END end_day -->
    77             </select>
    78             <select name="end_month">
    79               <!-- BEGIN end_month -->
    80               <option {end_month.SELECTED} value="{end_month.VALUE}">{end_month.OPTION}</option>
    81               <!-- END end_month -->
    82             </select>
    83             <input name="end_year" type="text" size="4" maxlength="4">&nbsp;
    84             <a href="#" onClick="document.post.end_day.value={TODAY_DAY};document.post.end_month.value={TODAY_MONTH};document.post.end_year.value={TODAY_YEAR};">{lang:today}</a>
    85           </td>
    86         </tr>
    87       </table>
    88     </td>
    89   </tr>
    90   <tr class="admin">
    91     <th colspan="4">{lang:search_options}</th>
    92   </tr>
    93   <tr>
    94     <td width="25%" ><b>{lang:search_categories} : </b>
    95     <td width="25%" nowrap="nowrap">
    96           <select style="width:200px" name="cat[]" multiple="multiple" size="8">
     82<fieldset>
     83  <legend>{lang:search_options}</legend>
     84  <label>{lang:search_categories}
     85    <select style="width:200px" name="cat[]" multiple="multiple" size="8">
    9786      <!-- BEGIN category_option -->
    98         <option value="{category_option.VALUE}">{category_option.OPTION}</option>
     87      <option value="{category_option.VALUE}">{category_option.OPTION}</option>
    9988      <!-- END category_option -->
    100       </select>
    101         </td>
    102     <td width="25%" nowrap="nowrap"><b>{lang:search_subcats_included} : </b></td>
    103     <td width="25%" nowrap="nowrap">
    104           <input type="radio" name="subcats-included" value="1" checked="checked" />{lang:yes}&nbsp;&nbsp;
    105           <input type="radio" name="subcats-included" value="0" />{lang:no}
    106         </td>
    107    </tr>
    108    <tr>
    109     <td width="25%" nowrap="nowrap"><b>{lang:search_date_type} : </b></td>
    110     <td width="25%" nowrap="nowrap">
    111           <input type="radio" name="date_type" value="date_creation" checked="checked" />{lang:Creation date}<br />
    112           <input type="radio" name="date_type" value="date_available" />{lang:Post date}
    113         </td>
    114         <td><b>{lang:search_sort} : </b></td>
    115     <td nowrap="nowrap">
    116           <input type="radio" name="sd" value="AND" />{lang:search_ascending}<br />
    117           <input type="radio" name="sd" value="d" checked="checked" />{lang:search_descending}
    118         </td>
    119   </tr>
    120 <tr>
    121 <td align="center" valign="bottom" colspan="4" height="38">
    122 <input type="submit" name="submit" value="{lang:submit}" class="bouton" />&nbsp;&nbsp;
    123 <input type="reset" value="{lang:reset}" class="bouton" />
    124 </td>
    125 </table>
     89    </select>
     90  </label>
     91  <label>{lang:search_subcats_included}
     92    <span>
     93    <input type="radio" name="subcats-included" value="1" checked="checked" />{lang:yes}
     94    </span>
     95    <span>
     96    <input type="radio" name="subcats-included" value="0" />{lang:no}
     97    </span>
     98  </label>
     99  <label>{lang:search_sort}
     100    <span><input type="radio" name="sd" value="AND" />{lang:search_ascending}</span>
     101    <span><input type="radio" name="sd" value="d" checked="checked" />{lang:search_descending}</span>
     102  </label>
     103</fieldset>
     104<p>
     105  <input type="submit" name="submit" value="{lang:submit}" class="bouton" />
     106  <input type="reset" value="{lang:reset}" class="bouton" />
     107</p>
    126108</form>
    127109
Note: See TracChangeset for help on using the changeset viewer.