Improve the UI of the search page for small screens (mga#34432)HEADmaster

4 files changed, 45 insertions, 4 deletions

diff --git a/extensions/Mageia/web/style.css b/extensions/Mageia/web/style.css
index 65a0729a5..bff813ce5 100644
--- a/extensions/Mageia/web/style.css
+++ b/extensions/Mageia/web/style.css
@@ -144,8 +144,48 @@ ul#comment_tags_collapse_expand {
     display: inline;
 }
 
+#field_label_short_desc {
+    width: auto;
+}
+
+table.bz_simple_search_form {
+    width: 100%;
+}
+
+table.bz_simple_search_form th,
+.search_field_row .field_label {
+    width: 8em;
+}
+
+.bz_simple_search_form #content,
+.search_field_row .text_field,
+.search_field_row .keywords_field,
+#keywords_container {
+    width: 45%;
+    min-width: 20em;
+    max-width: 45em;
+}
+
+.bz_simple_search_form #content,
+.search_field_row .keywords_field {
+    width: 100%;
+}
+
 @media only screen and (max-width: 750px) {
 
+    #summary_field, .search_field_row {
+        white-space: wrap;
+    }
+
+    .search_field_row .field_label_sup {
+        white-space: nowrap;
+    }
+
+    .search_field_row .field_label, #field_label_short_desc {
+        display: block;
+        text-align: left;
+    }
+
     table.bz_buglist,
     .bz_buglist tbody,
     .bz_buglist tr,
diff --git a/template/en/default/bug/show-header.html.tmpl b/template/en/default/bug/show-header.html.tmpl
index 583708492..a9e87fb2a 100644
--- a/template/en/default/bug/show-header.html.tmpl
+++ b/template/en/default/bug/show-header.html.tmpl
@@ -17,7 +17,6 @@
 [% filtered_desc = bug.short_desc FILTER html %]
 [% filtered_timestamp = bug.delta_ts FILTER time %]
 
-[% subheader = filtered_desc %]
 [% title = "$bug.bug_id – " %]
 [% IF bug.alias.size %]
   [% title = title _ "($filtered_alias) " %]
diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl
index 5a95d67c1..23b202457 100644
--- a/template/en/default/search/field.html.tmpl
+++ b/template/en/default/search/field.html.tmpl
@@ -21,7 +21,8 @@
        selected = type_selected
     %]    
     <input name="[% field.name FILTER html %]" 
-           id="[% field.name FILTER html %]" size="40"
+           id="[% field.name FILTER html %]"
+           class="text_field"
            [% IF onchange %] onchange="[% onchange FILTER html %]"[% END %]
            value="[% value FILTER html %]" [% 'autofocus' IF focus %]>
   [% CASE constants.FIELD_TYPE_KEYWORDS %]
@@ -37,7 +38,8 @@
     %]
     <div id="[% field.name FILTER html %]_container">
        <input name="[% field.name FILTER html %]" 
-              id="[% field.name FILTER html %]" size="40"
+              id="[% field.name FILTER html %]"
+              class="keywords_field"
               [% IF onchange %] onchange="[% onchange FILTER html %]"[% END %]
               value="[% value FILTER html %]" [% 'autofocus' IF focus %]>
        <div id="[% field.name FILTER html %]_autocomplete"></div>
diff --git a/template/en/default/search/search-specific.html.tmpl b/template/en/default/search/search-specific.html.tmpl
index af61ce52f..9fb7523a3 100644
--- a/template/en/default/search/search-specific.html.tmpl
+++ b/template/en/default/search/search-specific.html.tmpl
@@ -73,7 +73,7 @@ for "crash secure SSL flash".
       <label for="content">Words:</label>
     </th>
     <td>
-      <input name="content" size="40" id="content" autofocus
+      <input name="content" id="content" autofocus
              value="[% default.content.0 FILTER html %]"
              [%- " required" UNLESS Param('search_allow_no_criteria') %]>
     </td>