summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGuy Pyrzak <guy.pyrzak@gmail.com>2010-08-29 23:14:14 +0200
committerMax Kanat-Alexander <mkanat@bugzilla.org>2010-08-29 23:14:14 +0200
commit153d2be457ffff521dfccbb1e7c3d325c50412ca (patch)
treee5adc61f812cc8ba9eae5064fde6c4a0fafc000c
parentb9a06d3190e9878c968c5de9ab3550ff6033190e (diff)
downloadbugzilla-153d2be457ffff521dfccbb1e7c3d325c50412ca.tar.gz
bugzilla-153d2be457ffff521dfccbb1e7c3d325c50412ca.tar.xz
Bug 571636: Make the Advanced Search UI follow a grid design
r=mkanat, a=mkanat
-rw-r--r--skins/standard/search_form.css81
-rw-r--r--template/en/default/search/field.html.tmpl4
-rw-r--r--template/en/default/search/form.html.tmpl4
3 files changed, 75 insertions, 14 deletions
diff --git a/skins/standard/search_form.css b/skins/standard/search_form.css
index 9e123ab54..541a8ea73 100644
--- a/skins/standard/search_form.css
+++ b/skins/standard/search_form.css
@@ -18,9 +18,40 @@
* Guy Pyrzak <guy.pyrzak@gmail.com>
*/
+#summary_field {
+ padding: 1em;
+ margin: 1em;
+ border: 1px solid black;
+ background-color: #eee;
+ white-space: nowrap;
+}
+
#bug_id_container {
display: inline-block;
vertical-align: middle;
+ padding-bottom: 1ex;
+}
+
+#bug_id_container input {
+ width: 9em;
+}
+
+.container_date_from,
+.container_date_to {
+ width: 14em;
+ padding-bottom: 1ex;
+}
+.container_date_from input,
+.container_date_to input {
+ width: 8em;
+}
+
+#bug_id_container input {
+ width: 9em;
+}
+
+#bug_id_type{
+ width: inherit;
}
.search_field_grid {
@@ -45,13 +76,50 @@
}
.search_field_row {
+ white-space: nowrap;
+ margin-bottom: 0.5em;
+}
+
+.search_field_row .container_date_from, .search_field_row .container_date_to{
+ display: inline;
+}
+
+#summary_field.search_field_row {
display: block;
- padding: 0.5ex 0;
- vertical-align: top;
}
-.search_field_grid label {
+#summary_field.search_field_row input,
+#summary_field.search_field_row select,
+{
+ display: inline;
+ padding-bottom: 0;
+ vertical-align: middle;
+}
+
+.search_field_row .field_label, #field_label_short_desc {
+ width: 14em;
+ display: inline-block;
+ line-height: 2em;
+ margin-right: 0.8em;
+}
+
+#field_label_short_desc {
+ text-align: right;
+}
+
+#summary_field.search_field_row {
+ width: inherit;
+}
+
+#keyword_container {
+ padding-bottom: 0;
+}
+
+.search_field_grid .field_label,
+.search_field_grid .field_label
+ {
display: block;
+ padding-bottom: 1ex;
}
.search_field_grid select {
@@ -104,15 +172,8 @@ div.bz_section_title span {
margin-left: 1em;
}
-#summary_field {
- margin: 0;
- padding: 0;
-}
-
#summary_field label {
- margin-right: 2em;
font-weight: bold;
- display: inline;
}
.hide_people_filter #people_filter_section,
diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl
index d4a1a30b7..defc94cc3 100644
--- a/template/en/default/search/field.html.tmpl
+++ b/template/en/default/search/field.html.tmpl
@@ -87,7 +87,7 @@
onclick="showCalendar('[% field.name FILTER js %]')">
<span>Calendar</span>
</button>
- <div id="con_calendar_[% field.name FILTER html %]"></div>
+ <span id="con_calendar_[% field.name FILTER html %]"></span>
to <input name="[% field.name FILTER html %]to"
id="[% field.name FILTER html %]to" size="10" maxlength="10"
value="[% value.1 FILTER html %]"
@@ -99,7 +99,7 @@
</button>
<small>(YYYY-MM-DD or relative dates)</small>
- <div id="con_calendar_[% field.name FILTER html %]to"></div>
+ <span id="con_calendar_[% field.name FILTER html %]to"></span>
<script type="text/javascript">
createCalendar('[% field.name FILTER js %]');
createCalendar('[% field.name FILTER js %]to');
diff --git a/template/en/default/search/form.html.tmpl b/template/en/default/search/form.html.tmpl
index e40467970..e1f8a5f68 100644
--- a/template/en/default/search/form.html.tmpl
+++ b/template/en/default/search/form.html.tmpl
@@ -251,14 +251,14 @@ TUI_hide_default('information_query');
[% END %]
<div class="search_field_row">
- <label for="bug_id">[% terms.Bugs %] numbered</label>
+ <span class="field_label"><label for="bug_id">[% terms.Bugs %] numbered</label></span>
<div id="bug_id_container" >
<input type="text" name="bug_id" id="bug_id"
value="[% default.bug_id.0 FILTER html %]" size="20">
<div class="field_help">(comma-separated list)</div>
</div>
should be
- <select name="bug_id_type">
+ <select name="bug_id_type" id="bug_id_type">
<option value="anyexact"[% " selected" IF default.bug_id_type.0 == "anyexact" %]>only included in</option>
<option value="nowords"[% " selected" IF default.bug_id_type.0 == "nowords" %]>excluded from</option>
</select> the results