Refactor searchbar into non-sentence form
authorDan Scott <dscott@laurentian.ca>
Wed, 18 Sep 2013 21:13:38 +0000 (17:13 -0400)
committerDan Wells <dbw2@calvin.edu>
Wed, 25 Sep 2013 22:42:08 +0000 (18:42 -0400)
A search bar that does not use a sentence is easier to translate and has
the additional advantage of breaking up into a simpler mobile display.

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Lebbeous Fogle-Weekley <lebbeous@esilibrary.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/parts/searchbar.tt2
Open-ILS/web/css/skin/default/opac/semiauto.css

index 0890030..184cdb7 100644 (file)
@@ -228,10 +228,6 @@ span.dash_divider {
     background: [% css_colors.background %];
 }
 
     background: [% css_colors.background %];
 }
 
-.search_box_wrapper {
-    padding: 10px 5px 5px 3px;
-}
-
 #search-wrapper #breadcrumb {
     margin-top:0px;
     font-size: [% css_fonts.size_smaller %];
 #search-wrapper #breadcrumb {
     margin-top:0px;
     font-size: [% css_fonts.size_smaller %];
@@ -1874,9 +1870,6 @@ a.preflib_change {
         width: 85%;
         padding-top: 5px;
     }
         width: 85%;
         padding-top: 5px;
     }
-    #qtype {
-        display: none;
-    }
     #main-content-home {
         padding: 0px;
         margin: 0px;
     #main-content-home {
         padding: 0px;
         margin: 0px;
@@ -1935,6 +1928,9 @@ a.preflib_change {
     .mobile_hide {
        display: none;
     } 
     .mobile_hide {
        display: none;
     } 
-    .searchbar { width: 200px; line-height: 1.5em; }
-    #browse-controls { width: 200px; line-height: 1.5em; }
+    .searchbar { line-height: 1.5em; }
+    #browse-controls { line-height: 1.5em; }
+    #search_query_label, #search_qtype_label, #search_locg_label {
+        display: block;
+    }
 }
 }
index 4688e23..b276a9d 100644 (file)
@@ -9,19 +9,11 @@
             id="home_adv_search_link">[% l('Advanced Search') %]</a></span>
         <span class="browse_the_catalog_lbl"><a href="[% mkurl(ctx.opac_root _ '/browse', {}, ['fi:has_browse_entry']) %]">[% l('Browse the Catalog') %]</a></span>
     </div>
             id="home_adv_search_link">[% l('Advanced Search') %]</a></span>
         <span class="browse_the_catalog_lbl"><a href="[% mkurl(ctx.opac_root _ '/browse', {}, ['fi:has_browse_entry']) %]">[% l('Browse the Catalog') %]</a></span>
     </div>
-    <div class="searchbar">[%- l('Search ');
-        IF search.basic_config.type == 'attr';
-            INCLUDE "opac/parts/coded_value_selector.tt2"
-                attr=search.basic_config.group none_ok=1 none_label=search.basic_config.none_label;
-        ELSIF search.basic_config.type == 'filter';
-            INCLUDE "opac/parts/filter_group_selector.tt2"
-                filter_group=search.basic_config.group none_ok=1 none_label=search.basic_config.none_label;
-        END;
-            l(' for ');
-        %]
+    <div class="searchbar">
         <span class='search_box_wrapper'>
             [%- # autosuggest breaks accessibility, as the aria-label
                 # attribute is removed when the Dijit is created. :(  %]
         <span class='search_box_wrapper'>
             [%- # autosuggest breaks accessibility, as the aria-label
                 # attribute is removed when the Dijit is created. :(  %]
+            <label id="search_box_label">[% l('Search: ') %]
             <input type="text" id="search_box" name="query" aria-label="[%
                     l('Enter search query:');
                 %]" value="[% is_advanced ? ctx.naive_query_scrub(ctx.processed_search_query) : CGI.param('query') | html %]"
             <input type="text" id="search_box" name="query" aria-label="[%
                     l('Enter search query:');
                 %]" value="[% is_advanced ? ctx.naive_query_scrub(ctx.processed_search_query) : CGI.param('query') | html %]"
                 [%- ELSE -%]
                     [% IF basic_search != "f" %] autofocus [% END %] x-webkit-speech
                 [%- END # autosuggest enabled %] />
                 [%- ELSE -%]
                     [% IF basic_search != "f" %] autofocus [% END %] x-webkit-speech
                 [%- END # autosuggest enabled %] />
+            </label>
         </span>
         </span>
+        <label id="search_qtype_label">
         [%- 
         [%- 
-            select_lib_label = l("Select search library");
+            l('Type: ');
             INCLUDE "opac/parts/qtype_selector.tt2" id="qtype";
             INCLUDE "opac/parts/qtype_selector.tt2" id="qtype";
-            l(' in ');
+        -%]
+        </label>
+        <label id="search_locg_label">
+        [%- 
+            l('Library: ');
+            select_lib_label = l("Select search library");
             INCLUDE build_org_selector arialabel=select_lib_label show_loc_groups=1
         -%]
             INCLUDE build_org_selector arialabel=select_lib_label show_loc_groups=1
         -%]
+        </label>
     <span>
         <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="opac-button"
             onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
     <span>
         <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="opac-button"
             onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
index dfe8a6f..0770599 100644 (file)
@@ -30,7 +30,6 @@
 .nowrap { white-space: nowrap; }
 .opac-auto-164 { white-space: nowrap; padding-left: 5px; }
 .full-width { width: 100%; }
 .nowrap { white-space: nowrap; }
 .opac-auto-164 { white-space: nowrap; padding-left: 5px; }
 .full-width { width: 100%; }
-#search_box { width: 162px; }
 .selector_actions_for_list { width: 175px; margin-right: 11px; }
 .selector_actions_for_list_inner_option { margin-left: 2em; } /* XXX ".opac-auto-179 optgroup option" doesn't work!? */
 #cn_browse_div > div { width: 90%; text-align: center; margin: 10px; }
 .selector_actions_for_list { width: 175px; margin-right: 11px; }
 .selector_actions_for_list_inner_option { margin-left: 2em; } /* XXX ".opac-auto-179 optgroup option" doesn't work!? */
 #cn_browse_div > div { width: 90%; text-align: center; margin: 10px; }