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

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, 

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');

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