aboutsummaryrefslogtreecommitdiffstats
path: root/template
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2006-04-22 14:06:25 +0000
committerchrisaga <chrisaga@piwigo.org>2006-04-22 14:06:25 +0000
commit8596848e28d901f76778cda5846482e371154698 (patch)
tree326148cc13d952b3aa42bf10de624fe0a6cf03d0 /template
parent6d1dd2a0f5375c1639bbf02d2e01bb59ea7bb29c (diff)
- 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 git-svn-id: http://piwigo.org/svn/trunk@1255 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'template')
-rw-r--r--template/yoga/default-layout.css30
-rw-r--r--template/yoga/menubar.css3
-rw-r--r--template/yoga/search.tpl186
3 files changed, 112 insertions, 107 deletions
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index 413f28181..5825e9eda 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -125,11 +125,12 @@ FORM#cat_modify TABLE { width: auto; }
/**
* Filter forms are displayed label by label with the input (or select...)
- * below the label
+ * below the label. Use a SPAN to group objects in a single line.
*/
FIELDSET {
padding: 1em;
margin: 1em;
+ overflow: hidden; /* <- makes Opera happy */
}
FORM.filter FIELDSET LABEL {
@@ -139,17 +140,37 @@ FORM.filter FIELDSET LABEL {
margin-right: 10px;
padding: 0;
}
+FORM.filter FIELDSET UL LABEL {
+ display: inline;
+ float: none;
+}
+/* cannot use FIELDSET>LABEL because of IE<=6 */
FORM.filter FIELDSET LABEL INPUT,
FORM.filter FIELDSET LABEL SELECT,
+FORM.filter FIELDSET LABEL SPAN,
FORM.filter FIELDSET LABEL TEXTAREA {
display: block;
margin: 0.5em 0;
}
+FORM.filter FIELDSET * LABEL INPUT,
+FORM.filter FIELDSET LABEL * INPUT,
+FORM.filter FIELDSET * LABEL SELECT,
+FORM.filter FIELDSET LABEL * SELECT,
+FORM.filter FIELDSET * LABEL TEXTAREA,
+FORM.filter FIELDSET LABEL * TEXTAREA {
+ display: inline;
+ vertical-align: baseline;
+ margin: 0 0.5em 0 0;
+}
+
+/* following declaration is important to avoid strange FF behaviour */
+FORM.filter FIELDSET LABEL SPAN SELECT {
+ margin: 0;
+}
FORM.filter FIELDSET P,
-FORM.filter FIELDSET INPUT,
-FORM.filter FIELDSET TEXTAREA {
+{
clear: left;
display: block;
}
@@ -239,7 +260,8 @@ UL.actions A {
}
UL.tagSelection {
- width: 500px;
+ width: 40em;
+ margin: 1em 0 1em 0;
padding: 0;
}
diff --git a/template/yoga/menubar.css b/template/yoga/menubar.css
index c965d0753..43eb8dbf3 100644
--- a/template/yoga/menubar.css
+++ b/template/yoga/menubar.css
@@ -75,6 +75,7 @@ FORM#quickconnect FIELDSET {
FORM#quickconnect P {
float: left;
+ clear: left;
}
FORM#quickconnect P INPUT {
@@ -103,4 +104,4 @@ FORM#quickconnect LABEL {
#menubar #menuTagCloud LI
{
display: inline;
-} \ No newline at end of file
+}
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index b6534a38e..a871b07f6 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -1,4 +1,4 @@
-<!-- $Id:$ -->
+<!-- $Id$ -->
<div id="content">
<div class="titrePage">
@@ -9,8 +9,7 @@
<h2>{lang:Search}</h2>
</div>
-<!-- TO DO -->
-<form method="post" name="post" action="{S_SEARCH_ACTION}">
+<form class="filter" method="post" name="search" action="{S_SEARCH_ACTION}">
<!-- BEGIN errors -->
<div class="errors">
<ul>
@@ -20,109 +19,92 @@
</ul>
</div>
<!-- END errors -->
-<table width="100%" cellpadding="2">
- <tr>
- <td width="50%" colspan="2"><b>{lang:search_keywords} : </b>
- <td colspan="2" valign="top">
- <input type="text" style="width: 300px" name="search_allwords" size="30" />
- <br />
- <input type="radio" name="mode" value="AND" checked="checked" /> {lang:search_mode_and}<br />
- <input type="radio" name="mode" value="OR" /> {lang:search_mode_or}
- </td>
- </tr>
- <tr>
- <td colspan="2"><b>{lang:search_author} :</b>
- <td colspan="2" valign="middle">
- <input type="text" style="width: 300px" name="search_author" size="30" />
- </td>
- </tr>
+<fieldset>
+ <legend>{lang:Filter}</legend>
+ <label>{lang:search_keywords}<input type="text" style="width: 300px" name="search_allwords" size="30" /></label>
+ <label>
+ <span><input type="radio" name="mode" value="AND" checked="checked" /> {lang:search_mode_and}</span>
+ <span><input type="radio" name="mode" value="OR" /> {lang:search_mode_or}</span>
+ </label>
+ <label>{lang:search_author}<input type="text" style="width: 300px" name="search_author" size="30" /></label>
+</fieldset>
+<fieldset>
+ <legend>{lang:Search tags}</legend>
+ {TAG_SELECTION}
+ <label><span><input type="radio" name="tag_mode" value="AND" checked="checked" /> {lang:All tags}</span></label>
+ <label><span><input type="radio" name="tag_mode" value="OR" /> {lang:Any tag}</span></label>
+</fieldset>
- <tr>
- <td colspan="2"><b>{lang:Search tags} :</b></td>
- <td colspan="2" valign="middle">
- {TAG_SELECTION}
- <br /><label><input type="radio" name="tag_mode" value="AND" checked="checked" /> {lang:All tags}</label>
- <br /><label><input type="radio" name="tag_mode" value="OR" /> {lang:Any tag}</label>
- </td>
- </tr>
+<fieldset>
+ <legend>{lang:search_date}</legend>
+ <label>{lang:search_date_type}
+ <span>
+ <input type="radio" name="date_type" value="date_creation" checked="checked" />{lang:Creation date}
+ </span>
+ <span>
+ <input type="radio" name="date_type" value="date_available" />{lang:Post date}
+ </span>
+ </label>
+ <label>{lang:search_date_from}
+ <span>
+ <select name="start_day">
+ <!-- BEGIN start_day -->
+ <option {start_day.SELECTED} value="{start_day.VALUE}">{start_day.OPTION}</option>
+ <!-- END start_day -->
+ </select>
+ <select name="start_month">
+ <!-- BEGIN start_month -->
+ <option {start_month.SELECTED} value="{start_month.VALUE}">{start_month.OPTION}</option>
+ <!-- END start_month -->
+ </select>
+ <input name="start_year" type="text" size="4" maxlength="4">
+ </span>
+ <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>
+ </label>
+ <label>{lang:search_date_to}
+ <span>
+ <select name="end_day">
+ <!-- BEGIN end_day -->
+ <option {end_day.SELECTED} value="{end_day.VALUE}">{end_day.OPTION}</option>
+ <!-- END end_day -->
+ </select>
+ <select name="end_month">
+ <!-- BEGIN end_month -->
+ <option {end_month.SELECTED} value="{end_month.VALUE}">{end_month.OPTION}</option>
+ <!-- END end_month -->
+ </select>
+ <input name="end_year" type="text" size="4" maxlength="4">
+ </span>
+ <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>
+ </label>
+</fieldset>
- <tr>
- <td colspan="2"><b>{lang:search_date} :</b>
- <td colspan="2" valign="middle">
- <table>
- <tr>
- <td>{lang:search_date_from} :</td>
- <td>
- <select name="start_day">
- <!-- BEGIN start_day -->
- <option {start_day.SELECTED} value="{start_day.VALUE}">{start_day.OPTION}</option>
- <!-- END start_day -->
- </select>
- <select name="start_month">
- <!-- BEGIN start_month -->
- <option {start_month.SELECTED} value="{start_month.VALUE}">{start_month.OPTION}</option>
- <!-- END start_month -->
- </select>
- <input name="start_year" type="text" size="4" maxlength="4">&nbsp;
- <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>
- </td>
- </tr>
- <tr>
- <td>{lang:search_date_to} :</td>
- <td>
- <select name="end_day">
- <!-- BEGIN end_day -->
- <option {end_day.SELECTED} value="{end_day.VALUE}">{end_day.OPTION}</option>
- <!-- END end_day -->
- </select>
- <select name="end_month">
- <!-- BEGIN end_month -->
- <option {end_month.SELECTED} value="{end_month.VALUE}">{end_month.OPTION}</option>
- <!-- END end_month -->
- </select>
- <input name="end_year" type="text" size="4" maxlength="4">&nbsp;
- <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>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr class="admin">
- <th colspan="4">{lang:search_options}</th>
- </tr>
- <tr>
- <td width="25%" ><b>{lang:search_categories} : </b>
- <td width="25%" nowrap="nowrap">
- <select style="width:200px" name="cat[]" multiple="multiple" size="8">
+<fieldset>
+ <legend>{lang:search_options}</legend>
+ <label>{lang:search_categories}
+ <select style="width:200px" name="cat[]" multiple="multiple" size="8">
<!-- BEGIN category_option -->
- <option value="{category_option.VALUE}">{category_option.OPTION}</option>
+ <option value="{category_option.VALUE}">{category_option.OPTION}</option>
<!-- END category_option -->
- </select>
- </td>
- <td width="25%" nowrap="nowrap"><b>{lang:search_subcats_included} : </b></td>
- <td width="25%" nowrap="nowrap">
- <input type="radio" name="subcats-included" value="1" checked="checked" />{lang:yes}&nbsp;&nbsp;
- <input type="radio" name="subcats-included" value="0" />{lang:no}
- </td>
- </tr>
- <tr>
- <td width="25%" nowrap="nowrap"><b>{lang:search_date_type} : </b></td>
- <td width="25%" nowrap="nowrap">
- <input type="radio" name="date_type" value="date_creation" checked="checked" />{lang:Creation date}<br />
- <input type="radio" name="date_type" value="date_available" />{lang:Post date}
- </td>
- <td><b>{lang:search_sort} : </b></td>
- <td nowrap="nowrap">
- <input type="radio" name="sd" value="AND" />{lang:search_ascending}<br />
- <input type="radio" name="sd" value="d" checked="checked" />{lang:search_descending}
- </td>
- </tr>
-<tr>
-<td align="center" valign="bottom" colspan="4" height="38">
-<input type="submit" name="submit" value="{lang:submit}" class="bouton" />&nbsp;&nbsp;
-<input type="reset" value="{lang:reset}" class="bouton" />
-</td>
-</table>
+ </select>
+ </label>
+ <label>{lang:search_subcats_included}
+ <span>
+ <input type="radio" name="subcats-included" value="1" checked="checked" />{lang:yes}
+ </span>
+ <span>
+ <input type="radio" name="subcats-included" value="0" />{lang:no}
+ </span>
+ </label>
+ <label>{lang:search_sort}
+ <span><input type="radio" name="sd" value="AND" />{lang:search_ascending}</span>
+ <span><input type="radio" name="sd" value="d" checked="checked" />{lang:search_descending}</span>
+ </label>
+</fieldset>
+<p>
+ <input type="submit" name="submit" value="{lang:submit}" class="bouton" />
+ <input type="reset" value="{lang:reset}" class="bouton" />
+</p>
</form>
<script type="text/javascript"><!--