Bug 571636: Make the Advanced Search UI follow a grid design

r=mkanat, a=mkanat

1 files changed, 71 insertions, 10 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,