Bug 30952: Header search - move tabs to the right (and other tweaks)

Make the search bar take the whole page width, with inputs at the center
taking all the available space
Add a separator between inputs when there are more than one

Issue #24

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/intranet-tmpl/prog/css/src/_header.scss

@@ -51,6 +51,7 @@
         border: 0;
         background-color: transparent;
         display: none;
+        flex-grow: 1;
 
         &:first-of-type {
             display: block;
@@ -60,7 +61,6 @@
     > ul {
         padding: 0 .8em 0 0;
         margin: 0;
-        order: -1;
         border-radius: 0 16px 16px 0;
         display: flex;
         justify-content: space-around;
@@ -99,6 +99,24 @@
         position: relative;
     }
 
+    .form-title {
+        padding: 0 16px 0 0;
+        background-color: #418940;
+        border-radius: 0 16px 16px 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        z-index: 2;
+        white-space: nowrap;
+        flex-basis: 15%;
+
+        label {
+            color: white;
+            font-weight: bold;
+            margin: 0;
+        }
+    }
+
     .form-content {
         background-color: white;
         margin-left: -16px;
@@ -107,24 +125,24 @@
         white-space: nowrap;
         z-index: 1;
         display: flex;
+        flex-grow: 1;
 
-        input[type="text"] {
-            border: 0;
-            box-shadow: unset;
-            background-color: transparent;
-        }
-
+        input[type="text"],
         select {
-            margin: 0;
             background-color: transparent;
             border: 0;
+            border-radius: 0;
             box-shadow: unset;
-            max-width: 15em;
+            margin: 0;
+
+            &:not(:first-child) {
+                border-left: 1px solid #e0e0e0;
+            }
         }
     }
 
     .form-extra-content {
-        left: -16px;
+        left: 284px;
         right: 60px;
         position: absolute;
         top: 31px;
@@ -133,7 +151,7 @@
         padding: 1em;
         border-radius: 0 0 8px 8px;
         border: 1px solid #418940;
-        border-top: 0;
+        border-top: 1px solid #e0e0e0;
         box-shadow: 0 2px 2px 1px #00000030;
         z-index: 1;
         display: none;

koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc

@@ -3,6 +3,10 @@
 <div id="header_search">
     <div id="supplier_search" class="residentsearch">
         <form name="findsupplier" action="/cgi-bin/koha/acqui/booksellers.pl" method="post">
+            <span class="form-title">
+                <label class="control-label">Vendor search</label>
+            </span>
+
             <span class="form-content">
                 <input type="text" name="supplier" id="supplier" class="head-searchbox form-control" placeholder="Search vendors" />
             </span>
@@ -12,6 +16,10 @@
 
     <div id="orders_search" class="residentsearch">
         <form action="/cgi-bin/koha/acqui/histsearch.pl" method="post">
+            <span class="form-title">
+                <label class="control-label">Orders search</label>
+            </span>
+
             <span class="form-content">
                 <input type="text" id="title" class="form-control" placeholder="Title" name="title" size="13" value="[% title | html %]" />
                 <input type="text" id="searchsupplier" class="form-control" placeholder="Vendor" name="name" size="13" value="[% name | html %]" />
@@ -26,7 +34,7 @@
                     <input type="text" class="form-control" placeholder="Basket" name="basket" id="basket" />
                 </div>
                 <div>
-                    <label for="booksellerinvoicenumber" class="control-label">Basket</label>
+                    <label for="booksellerinvoicenumber" class="control-label">Invoice number</label>
                     <input type="text" class="form-control" placeholder="Invoice number" name="booksellerinvoicenumber" id="booksellerinvoicenumber" />
                 </div>
             </div>

koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc

@@ -74,6 +74,10 @@
             <input type="hidden" name="and_or" value="and" />
             <input type="hidden" name="excluding" value="" />
 
+            <span class="form-title">
+                <label class="control-label">Search main heading ($a only)</label>
+            </span>
+
             <span class="form-content">
                 [% INCLUDE authtype %]
                 <input id="value_mainentry" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading ($a only)" />
@@ -97,6 +101,10 @@
             <input type="hidden" name="op" value="do_search" />
             <input type="hidden" name="type" value="intranet" />
 
+            <span class="form-title">
+                <label class="control-label">Search main heading</label>
+            </span>
+
             <span class="form-content">
                 [% INCLUDE authtype %]
                 <input id="value_mainheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading" />
@@ -118,6 +126,10 @@
             <input type="hidden" name="type" value="intranet" />
             <input type="hidden" name="marclist" value="match" />
 
+            <span class="form-title">
+                <label class="control-label">Search all headings</label>
+            </span>
+
             <span class="form-content">
                 [% INCLUDE authtype %]
                 <input id="value_matchheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any heading" />
@@ -141,6 +153,10 @@
             <input type="hidden" name="and_or" value="and" />
             <input type="hidden" name="excluding" value="" />
 
+            <span class="form-title">
+                <label class="control-label">Search entire record</label>
+            </span>
+
             <span class="form-content">
                 [% INCLUDE authtype %]
                 <input id="value_anywhere" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any authority field" />

koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc

@@ -6,6 +6,10 @@
         <form action="/cgi-bin/koha/admin/aqbudgets.pl" method="post">
             <input type="hidden" name="budget_period_id" value="[% budget_period_id | html %]" />
 
+            <span class="form-title">
+                <label class="control-label">Search funds</label>
+            </span>
+
             <span class="form-content">
                 <select name="filter_budgetbranch" id="filter_budgetbranch" class="form-control">
                     <option value="">All libraries</option>

koha-tmpl/intranet-tmpl/prog/en/includes/cataloging-search.inc

@@ -7,6 +7,9 @@
 
     <div id="addbooks_search" class="residentsearch">
         <form name="search" action="addbooks.pl">
+            <span class="form-title">
+                <label class="control-label">Cataloging search</label>
+            </span>
 
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="q" id="cat_search" placeholder="Search the catalog and the reservoir" size="40" />

koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc

@@ -2,6 +2,10 @@
 [% IF ( CAN_user_catalogue ) %]
     <div id="catalog_search" class="residentsearch">
         <form action="/cgi-bin/koha/catalogue/search.pl"  method="get" id="cat-search-block">
+            <span class="form-title">
+                <label class="control-label">Search catalog</label>
+            </span>
+
             <span class="form-content">
                 [% IF ( Koha.Preference('IntranetCatalogSearchPulldown') ) %]
                     [% INCLUDE 'search_indexes.inc' $header_pulldown = 1 %]

koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search-box.inc

@@ -1,6 +1,10 @@
 [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
     <div id="checkin_search" class="residentsearch">
         <form method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off">
+            <span class="form-title">
+                <label class="control-label">Check in</label>
+            </span>
+
             <span class="form-content">
                 <input name="barcode" id="ret_barcode" class="head-searchbox form-control" accesskey="r" type="text" placeholder="Scan a barcode to check in" size="40"/>
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc

@@ -2,6 +2,10 @@
 <div id="header_search">
     <div id="city_search" class="residentsearch">
         <form action="[% script_name | html %]" method="post">
+            <span class="form-title">
+                <label class="control-label">Search cities</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="city_name_filter" id="city_name_filter" value="[% city_name_filter | html %]" placeholder="City search" />
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/contracts-admin-search.inc

@@ -3,6 +3,10 @@
 <div id="header_search">
     <div id="contract_description_search" class="residentsearch">
         <form action="[% script_name | html %]" method="post">
+            <span class="form-title">
+                <label class="control-label">Search contracts</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="[% searchfield | html %]" placeholder="Search by contract name or/and description:" size="40"/>
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/currencies-admin-search.inc

@@ -3,6 +3,10 @@
 <div id="header_search">
     <div id="currency_search" class="residentsearch">
         <form action="[% script_name | html %]" method="post">
+            <span class="form-title">
+                <label class="control-label">Search currencies</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="description" id="description" value="[% searchfield | html %]" placeholder="Currencies search" />
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/desks-admin-search.inc

@@ -2,6 +2,10 @@
 <div id="header_search">
     <div id="desk_search" class="residentsearch">
         <form action="[% script_name|html %]" method="post">
+            <span class="form-title">
+                <label class="control-label">Search desks</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="desk_name" placeholder="Search desks" id="desk_name" value="[% searchfield|html %]" size="40" />
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/letters-search.inc

@@ -3,6 +3,10 @@
 <div id="header_search">
     <div id="notices_search" class="residentsearch">
         <form action="/cgi-bin/koha/tools/letter.pl" method="post">
+            <span class="form-title">
+                <label class="control-label">Search notices</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="Search existing notices"/>
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc

@@ -1,4 +1,5 @@
 [% USE Branches %]
+[% USE Categories %]
 [% USE Koha %]
 [% PROCESS 'patronfields.inc' %]
 [% IF CAN_user_borrowers_edit_borrowers %]
@@ -6,6 +7,10 @@
         <form method="post" action="/cgi-bin/koha/members/member.pl">
             <input type="hidden" name="quicksearch" value="1" />
 
+            <span class="form-title">
+                <label class="control-label">Search patrons</label>
+            </span>
+
             <span class="form-content">
                 [% IF ( Koha.Preference('RetainPatronsSearchTerms') ) %]
                     <input name="searchmember" id="searchmember" class="head-searchbox form-control" type="text" placeholder="Enter patron card number or partial name" size="25" value="[% searchmember | html %]"/>

koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-box.inc

@@ -1,6 +1,10 @@
 [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
     <div id="circ_search" class="residentsearch">
         <form action="/cgi-bin/koha/circ/circulation.pl" id="patronsearch" method="post">
+            <span class="form-title">
+                <label class="control-label">Check out</label>
+            </span>
+
             <span class="form-content">
                 <input autocomplete="off" id="findborrower" name="findborrower" class="head-searchbox form-control" type="text" placeholder="Enter patron card number or partial name" size="40"/>
 

koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc

@@ -3,6 +3,10 @@
 
     <div id="patron_category_search" class="residentsearch">
         <form action="[% script_name | html %]" method="post">
+            <span class="form-title">
+                <label class="control-label">Search patron categories</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="description" value="[% searchfield | html %]" placeholder="Search by patron category name" />
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc

@@ -4,6 +4,10 @@
             <input type="hidden" name="tab" value="[% last_tab | html %]" />
             <input type="hidden" name="op" value="search" />
 
+            <span class="form-title">
+                <label class="control-label">Search system preferences</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="System preference search">
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/renew-search-box.inc

@@ -1,6 +1,10 @@
 [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
     <div id="renew_search" class="residentsearch">
         <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off">
+            <span class="form-title">
+                <label class="control-label">Renew</label>
+            </span>
+
             <span class="form-content">
                 <input name="barcode" id="ren_barcode" class="head-searchbox form-control" accesskey="r" type="text" placeholder="Scan a barcode to renew" size="40"/>
             </span>

koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc

@@ -9,6 +9,10 @@
             [% END %]
             <input type="hidden" name="searched" value="1" />
 
+            <span class="form-title">
+                <label class="control-label">Search subscriptions</label>
+            </span>
+
             <span class="form-content">
                 <input type="text" class="form-control" placeholder="ISSN" size="11" name="ISSN_filter" id="ISSN_filter" value="[% ISSN_filter | html %]" />
 

koha-tmpl/intranet-tmpl/prog/en/includes/suggestions-add-search.inc

@@ -5,6 +5,10 @@
         <form action="/cgi-bin/koha/acqui/newordersuggestion.pl" method="get">
             <input type="hidden" name="booksellerid" value="[% booksellerid | html %]" />
 
+            <span class="form-title">
+                <label class="control-label">Search suggestions</label>
+            </span>
+
             <span class="form-content">
                 <input type="text" id="searchtitle" class="head-searchbox form-control" placeholder="Title" name="title" size="10" value="[% title | html %]" />
                 <input type="text" id="searchauthor" class="head-searchbox form-control" placeholder="Author"  name="author" size="10" value="[% author | html %]" />

koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc

@@ -3,6 +3,10 @@
 
     <div id="z3950_search" class="residentsearch">
         <form action="/cgi-bin/koha/admin/z3950servers.pl" method="post">
+            <span class="form-title">
+                <label class="control-label">Search Z39.50/SRU servers</label>
+            </span>
+
             <span class="form-content">
                 <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="[% searchfield | html %]" placeholder="Z39.50/SRU server search" />
             </span>