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>
20 files changed:
border: 0;
background-color: transparent;
display: none;
border: 0;
background-color: transparent;
display: none;
&:first-of-type {
display: block;
&:first-of-type {
display: block;
> ul {
padding: 0 .8em 0 0;
margin: 0;
> ul {
padding: 0 .8em 0 0;
margin: 0;
border-radius: 0 16px 16px 0;
display: flex;
justify-content: space-around;
border-radius: 0 16px 16px 0;
display: flex;
justify-content: space-around;
+ .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;
.form-content {
background-color: white;
margin-left: -16px;
white-space: nowrap;
z-index: 1;
display: flex;
white-space: nowrap;
z-index: 1;
display: flex;
- input[type="text"] {
- border: 0;
- box-shadow: unset;
- background-color: transparent;
- }
-
background-color: transparent;
border: 0;
background-color: transparent;
border: 0;
+ margin: 0;
+
+ &:not(:first-child) {
+ border-left: 1px solid #e0e0e0;
+ }
}
}
.form-extra-content {
}
}
.form-extra-content {
right: 60px;
position: absolute;
top: 31px;
right: 60px;
position: absolute;
top: 31px;
padding: 1em;
border-radius: 0 0 8px 8px;
border: 1px solid #418940;
padding: 1em;
border-radius: 0 0 8px 8px;
border: 1px solid #418940;
+ border-top: 1px solid #e0e0e0;
box-shadow: 0 2px 2px 1px #00000030;
z-index: 1;
display: none;
box-shadow: 0 2px 2px 1px #00000030;
z-index: 1;
display: none;
<div id="header_search">
<div id="supplier_search" class="residentsearch">
<form name="findsupplier" action="/cgi-bin/koha/acqui/booksellers.pl" method="post">
<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>
<span class="form-content">
<input type="text" name="supplier" id="supplier" class="head-searchbox form-control" placeholder="Search vendors" />
</span>
<div id="orders_search" class="residentsearch">
<form action="/cgi-bin/koha/acqui/histsearch.pl" method="post">
<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 %]" />
<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 %]" />
<input type="text" class="form-control" placeholder="Basket" name="basket" id="basket" />
</div>
<div>
<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>
<input type="text" class="form-control" placeholder="Invoice number" name="booksellerinvoicenumber" id="booksellerinvoicenumber" />
</div>
</div>
<input type="hidden" name="and_or" value="and" />
<input type="hidden" name="excluding" value="" />
<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)" />
<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)" />
<input type="hidden" name="op" value="do_search" />
<input type="hidden" name="type" value="intranet" />
<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" />
<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" />
<input type="hidden" name="type" value="intranet" />
<input type="hidden" name="marclist" value="match" />
<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" />
<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" />
<input type="hidden" name="and_or" value="and" />
<input type="hidden" name="excluding" value="" />
<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" />
<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" />
<form action="/cgi-bin/koha/admin/aqbudgets.pl" method="post">
<input type="hidden" name="budget_period_id" value="[% budget_period_id | html %]" />
<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>
<span class="form-content">
<select name="filter_budgetbranch" id="filter_budgetbranch" class="form-control">
<option value="">All libraries</option>
<div id="addbooks_search" class="residentsearch">
<form name="search" action="addbooks.pl">
<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" />
<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" />
[% IF ( CAN_user_catalogue ) %]
<div id="catalog_search" class="residentsearch">
<form action="/cgi-bin/koha/catalogue/search.pl" method="get" id="cat-search-block">
[% 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 %]
<span class="form-content">
[% IF ( Koha.Preference('IntranetCatalogSearchPulldown') ) %]
[% INCLUDE 'search_indexes.inc' $header_pulldown = 1 %]
[% 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">
[% 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>
<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>
<div id="header_search">
<div id="city_search" class="residentsearch">
<form action="[% script_name | html %]" method="post">
<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>
<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>
<div id="header_search">
<div id="contract_description_search" class="residentsearch">
<form action="[% script_name | html %]" method="post">
<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>
<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>
<div id="header_search">
<div id="currency_search" class="residentsearch">
<form action="[% script_name | html %]" method="post">
<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>
<span class="form-content">
<input class="head-searchbox form-control" type="text" name="description" id="description" value="[% searchfield | html %]" placeholder="Currencies search" />
</span>
<div id="header_search">
<div id="desk_search" class="residentsearch">
<form action="[% script_name|html %]" method="post">
<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>
<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>
<div id="header_search">
<div id="notices_search" class="residentsearch">
<form action="/cgi-bin/koha/tools/letter.pl" method="post">
<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>
<span class="form-content">
<input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="Search existing notices"/>
</span>
[% USE Koha %]
[% PROCESS 'patronfields.inc' %]
[% IF CAN_user_borrowers_edit_borrowers %]
[% USE Koha %]
[% PROCESS 'patronfields.inc' %]
[% IF CAN_user_borrowers_edit_borrowers %]
<form method="post" action="/cgi-bin/koha/members/member.pl">
<input type="hidden" name="quicksearch" value="1" />
<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 %]"/>
<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 %]"/>
[% 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">
[% 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"/>
<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"/>
<div id="patron_category_search" class="residentsearch">
<form action="[% script_name | html %]" method="post">
<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>
<span class="form-content">
<input class="head-searchbox form-control" type="text" name="description" value="[% searchfield | html %]" placeholder="Search by patron category name" />
</span>
<input type="hidden" name="tab" value="[% last_tab | html %]" />
<input type="hidden" name="op" value="search" />
<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>
<span class="form-content">
<input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="System preference search">
</span>
[% 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">
[% 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>
<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>
[% END %]
<input type="hidden" name="searched" value="1" />
[% 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 %]" />
<span class="form-content">
<input type="text" class="form-control" placeholder="ISSN" size="11" name="ISSN_filter" id="ISSN_filter" value="[% ISSN_filter | html %]" />
<form action="/cgi-bin/koha/acqui/newordersuggestion.pl" method="get">
<input type="hidden" name="booksellerid" value="[% booksellerid | html %]" />
<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 %]" />
<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 %]" />
<div id="z3950_search" class="residentsearch">
<form action="/cgi-bin/koha/admin/z3950servers.pl" method="post">
<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>
<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>