Attachment 146352 Details for Bug 32683 – Bug 32683: Convert header search tabs to Bootstrap

[patch] Bug 32683: Convert header search tabs to Bootstrap

Bug-32683-Convert-header-search-tabs-to-Bootstrap.patch (text/plain), 135.67 KB, created by Owen Leonard on 2023-02-07 18:06:37 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2023-02-07 18:06:37 UTC

Size: 135.67 KB

patch

obsolete

>From 2fa7ea7332d7045adfbefc35e12c0227eed01588 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 19 Jan 2023 19:04:53 +0000
>Subject: [PATCH] Bug 32683: Convert header search tabs to Bootstrap
>
>This patch updates all search header include files so that they have
>Bootstrap tab markup instead of jQueryUI. jQueryUI-related JavaScript is
>updated to work with Bootstrap.
>
>To test, apply the patch and rebuild the staff interface CSS. Clear your
>browser cache if necessary.
>
>Test that keyboard shortcuts work correctly: Alt-U for circulation,
>Alt-R for returns, Alt-W for renewals, and Alt-Q for search. Each
>shortcut should either activate the correct search tab (if present on
>the page) or redirect you to that page.
>
>Cursor focus should be automatically placed in expanded header search
>form, whether it be on page load or when switching tabs.
>
>Test search header forms with additional search options work correctly:
>Clicking the "settings" icon should expand the panel with additional
>fields.
>
>Test at least one page which uses each include file:
>
>- acquisitions-search.inc
>  - Acquisitions and related pages
>- adv-search.inc
>  - Advanced catalog search
>- authorities-search.inc
>  - Authorities and related pages
>  - Check that the right tab is preselected after each kind of search,
>e.g. a search by "Main heading" should return a search results page
>where the "Main heading" tab is preselected.
>- budgets-admin-search.inc
>  - Administration -> Budgets
>- cat-search.inc
>  - Catalog search results, bibliographic details, etc.
>- cataloging-search.inc
>  - Cataloging home page and cataloging search results
>- checkin-search.inc
>  - Circulation -> Check in
>- circ-search.inc
>  - Circulation -> Check out
>- cities-admin-search.inc
>  - Administration -> Cities and towns
>- contracts-admin-search.inc
>  - Acquisitions -> Vendor -> Contracts
>- currencies-admin-search.inc
>  - Administration -> Currencies
>- desks-admin-search.inc
>  - Administration -> Desks (must have UseCirculationDesks enabled)
>- erm-search.inc
>  - ERM (must have ERMModule enabled)
>- home-search.inc
>  - Staff interface home page
>- letters-search.inc
>  - Tools -> Notices
>- patron-search-header.inc
>  - Patron details, patron accounting, etc.
>- patrons-admin-search.inc
>  - Administratoin -> Patron categories
>- prefs-admin-search.inc
>  - Administration home page and system preferences
>- serials-search.inc
>  - Serials and related pages
>- suggestions-add-search.inc
>  - Not used
>- z3950-admin-search.inc
>  - Administration -> Z39.50 servers
>
>Signed-off-by: David Nind <david@davidnind.com>
>---
> .../intranet-tmpl/prog/css/src/_header.scss   |  77 +++--
> .../prog/css/src/staff-global.scss            |  80 -----
> .../prog/en/includes/acquisitions-search.inc  |  97 +++---
> .../prog/en/includes/adv-search.inc           |  43 ++-
> .../prog/en/includes/authorities-search.inc   | 280 +++++++++---------
> .../prog/en/includes/authorities_js.inc       |   8 +-
> .../prog/en/includes/budgets-admin-search.inc |  87 +++---
> .../prog/en/includes/cat-search.inc           |  46 ++-
> .../prog/en/includes/cataloging-search.inc    |  71 +++--
> .../prog/en/includes/catalogue-search-box.inc |  16 +-
> .../prog/en/includes/checkin-search-box.inc   |  16 +-
> .../prog/en/includes/checkin-search.inc       |  42 ++-
> .../prog/en/includes/circ-search.inc          |  45 ++-
> .../prog/en/includes/cities-admin-search.inc  |  58 ++--
> .../en/includes/contracts-admin-search.inc    |  59 ++--
> .../en/includes/currencies-admin-search.inc   |  59 ++--
> .../prog/en/includes/desks-admin-search.inc   |  58 ++--
> .../prog/en/includes/erm-search.inc           |  90 +++---
> .../prog/en/includes/home-search.inc          |  57 ++--
> .../prog/en/includes/letters-search.inc       |  59 ++--
> .../prog/en/includes/member-search-box.inc    |  32 +-
> .../prog/en/includes/merge-record.inc         |   1 +
> .../prog/en/includes/patron-search-box.inc    |  18 +-
> .../prog/en/includes/patron-search-header.inc |  50 +++-
> .../prog/en/includes/patrons-admin-search.inc |  58 ++--
> .../prog/en/includes/prefs-admin-search.inc   |  62 ++--
> .../prog/en/includes/renew-search-box.inc     |  16 +-
> .../prog/en/includes/search_indexes.inc       |  74 ++---
> .../prog/en/includes/serials-search.inc       |  87 +++---
> .../en/includes/suggestions-add-search.inc    |  64 ++--
> .../prog/en/includes/z3950-admin-search.inc   |  59 ++--
> .../prog/en/modules/circ/offline.tt           |   2 +-
> .../intranet-tmpl/prog/js/staff-global.js     |  55 +++-
> 33 files changed, 1130 insertions(+), 796 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
>index a11a5a64a9..feb24eeb72 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
>@@ -54,19 +54,7 @@ a.navbar-toggle {
>     display: flex;
>     padding: 0 .8em;
> 
>-    .residentsearch {
>-        padding: 0;
>-        border: 0;
>-        background-color: transparent;
>-        display: none;
>-        flex-basis: 50%;
>-
>-        &:first-of-type {
>-            display: block;
>-        }
>-    }
>-
>-    > ul {
>+    ul {
>         padding: 0;
>         margin: 0;
>         border-radius: 0 16px 16px 0;
>@@ -87,6 +75,7 @@ a.navbar-toggle {
>             padding-bottom: 0;
>             list-style-type: none;
>             margin: 0;
>+            white-space: nowrap;
> 
>             a {
>                 color: #FFF;
>@@ -96,11 +85,6 @@ a.navbar-toggle {
>             }
>         }
>     }
>-    .ui-state-hover, .ui-state-active {
>-        a {
>-            border-bottom: 2px solid #FFFFFF;
>-        }
>-    }
> 
>     form {
>         display: flex;
>@@ -148,6 +132,14 @@ a.navbar-toggle {
>                 border-left: 1px solid #e0e0e0;
>             }
>         }
>+
>+        input + input {
>+            padding-right: .5em;
>+        }
>+    }
>+
>+    .form-control {
>+        font-size: 1em;
>     }
> 
>     .form-extra-content {
>@@ -184,8 +176,9 @@ a.navbar-toggle {
>     }
> 
>     .form-extra-content-toggle {
>-        opacity: .5;
>         background-color: transparent;
>+        opacity: .5;
>+        padding-right: 1em;
> 
>         &:hover {
>             opacity: 1;
>@@ -219,6 +212,52 @@ a.navbar-toggle {
>             box-shadow: unset;
>         }
>     }
>+
>+    .tab-content {
>+        background-color: transparent;
>+        padding: 0;
>+
>+        &:first-of-type {
>+            flex-basis: 50%;
>+        }
>+    }
>+
>+    .nav-tabs {
>+        > li {
>+
>+            > a {
>+                background-color: $background-color-primary;
>+                border: 2px solid $background-color-primary;
>+                border-radius: 0;
>+                color: #FFF;
>+                font-weight: normal;
>+                line-height: 1.3;
>+                margin: 0 .25em;
>+                padding: 0 .25em;
>+
>+                &:hover, &:focus, &:active {
>+                    background-color: $background-color-primary;
>+                    border: 2px solid $background-color-primary;
>+                    border-bottom-color: $background-color-secondary;
>+                    border-bottom: 0;
>+                    padding: 0 .25em;
>+                    text-decoration: none;
>+                }
>+            }
>+
>+            &.active {
>+                a {
>+                    cursor: default;
>+                    padding: 0 .25em;
>+                    border-bottom: 2px solid #FFF;
>+
>+                    &:hover,
>+                    &:focus {
>+                    }
>+                }
>+            }
>+        }
>+    }
> }
> 
> #logged-in-menu {
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>index baf0ff7b73..39ffdf3911 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -725,12 +725,6 @@ ul {
>             list-style-type: none;
>         }
>     }
>-
>-    &.ui-tabs-nav {
>-        li {
>-            list-style: none;
>-        }
>-    }
> }
> 
> ol {
>@@ -2657,80 +2651,6 @@ td.bundle {
>     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
> }
> 
>-// jQuery UI standard tabs
>-.ui-menu {
>-    li {
>-        list-style: none;
>-    }
>-}
>-
>-.ui-tabs-nav {
>-    .ui-tabs-active a,
>-    a:hover,
>-    a:focus,
>-    a:active,
>-    span.a {
>-        background: none repeat scroll 0 0 transparent;
>-        outline: 0 none;
>-    }
>-
>-    &.ui-widget-header {
>-        background: none;
>-        border: 0;
>-        padding: .2em .9em 0 .9em;
>-    }
>-}
>-
>-.ui-tabs {
>-    .ui-tabs-panel {
>-        background: #FFF none;
>-        border-radius: 4px;
>-        border: 2px solid $background-color-primary;
>-
>-        fieldset {
>-            box-shadow: none;
>-        }
>-    }
>-    .ui-tabs-nav {
>-        li {
>-            background: $background-color-secondary;
>-            border: 0;
>-            margin-right: .4em;
>-            border-radius: 4px 4px 0 0;
>-
>-            a {
>-                color: #111;
>-            }
>-
>-            &.ui-tabs-active, &.ui-state-hover {
>-                background-color: $background-color-primary;
>-
>-                a {
>-                    color: #fff;
>-                }
>-            }
>-        }
>-    }
>-
>-    &.ui-widget-content {
>-        background: transparent none;
>-        border: 0;
>-    }
>-
>-
>-    .ui-state-hover {
>-        a {
>-            color: $green-text-color;
>-
>-            &:link,
>-            &:visited {
>-                color: $green-text-color;
>-            }
>-        }
>-    }
>-
>-}
>-
> .ui-widget {
>     font-family: inherit;
> 
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
>index 4264cb9256..825fa6444b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
>@@ -1,53 +1,56 @@
>-
>-
>-<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>
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>-
>-    <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 %]" />
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-                <input type="hidden" id="do_search" name="do_search" value="do" />
>-            </span>
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="supplier_search" role="tabpanel" class="tab-pane active">
>+            <form name="findsupplier" action="/cgi-bin/koha/acqui/booksellers.pl" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Vendor search</label>
>+                </div>
> 
>-            <div class="form-extra-content">
>-                <div>
>-                    <label for="basket" class="control-label">Basket</label>
>-                    <input type="text" class="form-control" placeholder="Basket" name="basket" id="basket" />
>+                <div class="form-content">
>+                    <input type="text" name="supplier" id="supplier" class="head-searchbox form-control" placeholder="Search vendors" />
>                 </div>
>-                <div>
>-                    <label for="booksellerinvoicenumber" class="control-label">Invoice number</label>
>-                    <input type="text" class="form-control" placeholder="Invoice number" name="booksellerinvoicenumber" id="booksellerinvoicenumber" />
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
>+
>+        <div id="orders_search" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/acqui/histsearch.pl" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Orders search</label>
>                 </div>
>-                <div>
>-                    <a href="/cgi-bin/koha/acqui/histsearch.pl">Advanced search</a>
>+
>+                <div 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 %]" />
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                    <input type="hidden" id="do_search" name="do_search" value="do" />
>                 </div>
>-            </div>
>-        </form>
>-    </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
> 
>-    <ul>
>-        <li><a title="Vendor search" href="#supplier_search"><i class="fa fa-upload"></i> <span class="tab-title">Vendor search</span></a></li>
>-        <li><a title="Orders search" href="#orders_search"><i class="fa fa-download"></i> <span class="tab-title">Orders search</span></a></li>
>+                <div class="form-extra-content">
>+                    <div>
>+                        <label for="basket" class="control-label">Basket</label>
>+                        <input type="text" class="form-control" placeholder="Basket" name="basket" id="basket" />
>+                    </div>
>+                    <div>
>+                        <label for="booksellerinvoicenumber" class="control-label">Invoice number</label>
>+                        <input type="text" class="form-control" placeholder="Invoice number" name="booksellerinvoicenumber" id="booksellerinvoicenumber" />
>+                    </div>
>+                    <div>
>+                        <a href="/cgi-bin/koha/acqui/histsearch.pl">Advanced search</a>
>+                    </div>
>+                </div>
>+            </form>
>+        </div>
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Vendor search" href="#supplier_search" aria-controls="supplier_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Vendor search</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Orders search" href="#orders_search" aria-controls="orders_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Orders search</span></a>
>+        </li>
>     </ul>
>-</div>
>-
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/adv-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/adv-search.inc
>index 1312f5f16d..338b22b79b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/adv-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/adv-search.inc
>@@ -1,17 +1,34 @@
>-
>-<div id="header_search">
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'checkin-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'member-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' bs_tab_active= 1 %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_borrowers_edit_borrowers ) %]
>+            [% INCLUDE 'member-search-box.inc' %]
>+        [% END %]
> 
>-    <ul>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-        [% IF ( CAN_user_borrowers_edit_borrowers ) %]<li><a title="Search patrons" href="#patron_search" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patrons</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation" class="active">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" aria-expanded="true" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_borrowers_edit_borrowers ) %]
>+            <li role="presentation">
>+                <a title="Search patrons" href="#patron_search" aria-controls="patron_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patrons</span></a>
>+            </li>
>+        [% END %]
>     </ul>
> </div>
>-
>-
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
>index 67c2ea5f08..b03039519c 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
>@@ -1,4 +1,4 @@
>-
>+
> 
> [% BLOCK orderby %]
>     <div>
>@@ -7,19 +7,19 @@
> 
>             <select name="orderby" class="form-control">
>                 [% IF ( orderby == 'HeadingAsc' ) %]
>-                <option value="HeadingAsc" selected="selected">Heading A-Z</option>
>+                    <option value="HeadingAsc" selected="selected">Heading A-Z</option>
>                 [% ELSE %]
>-                <option value="HeadingAsc">Heading A-Z</option>
>+                    <option value="HeadingAsc">Heading A-Z</option>
>                 [% END %]
>                 [% IF ( orderby == 'HeadingDsc' ) %]
>-                <option value="HeadingDsc" selected="selected">Heading Z-A</option>
>+                    <option value="HeadingDsc" selected="selected">Heading Z-A</option>
>                 [% ELSE %]
>-                <option value="HeadingDsc">Heading Z-A</option>
>+                    <option value="HeadingDsc">Heading Z-A</option>
>                 [% END %]
>                 [% IF ( orderby == '' && op ) %]
>-                <option value="" selected="selected">None</option>
>+                    <option value="" selected="selected">None</option>
>                 [% ELSE %]
>-                <option value="">None</option>
>+                    <option value="">None</option>
>                 [% END %]
>             </select>
>         </label>
>@@ -33,19 +33,19 @@
> 
>             <select name="operator" class="form-control">
>                 [% IF ( operator == 'contains' ) %]
>-                <option value="contains" selected="selected">contains</option>
>+                    <option value="contains" selected="selected">contains</option>
>                 [% ELSE %]
>-                <option value="contains">contains</option>
>+                    <option value="contains">contains</option>
>                 [% END %]
>                 [% IF ( operator == 'start' ) %]
>-                <option value="start" selected="selected">starts with</option>
>+                    <option value="start" selected="selected">starts with</option>
>                 [% ELSE %]
>-                <option value="start">starts with</option>
>+                    <option value="start">starts with</option>
>                 [% END %]
>                 [% IF ( operator == 'exact' ) %]
>-                <option value="exact" selected="selected">is exactly</option>
>+                    <option value="exact" selected="selected">is exactly</option>
>                 [% ELSE %]
>-                <option value="exact">is exactly</option>
>+                    <option value="exact">is exactly</option>
>                 [% END %]
>             </select>
>         </label>
>@@ -56,133 +56,143 @@
>     <div>
>         <label>
>             Authority type
>-
>             <select name="authtypecode" class="form-control">
>-            [% IF (marcflavour == 'UNIMARC' ) %]<option value="">All authority types</option>[% END %]
>-            [% FOREACH authority_type IN authority_types %]
>-                [% IF authority_type.authtypecode == authtypecode %]
>-                <option value="[% authority_type.authtypecode | html %]" selected="selected">[% authority_type.authtypetext | html %]</option>
>-                [% ELSE %]
>-                <option value="[% authority_type.authtypecode | html %]">[% authority_type.authtypetext | html %]</option>
>+                [% IF (marcflavour == 'UNIMARC' ) %]<option value="">All authority types</option>[% END %]
>+                [% FOREACH authority_type IN authority_types %]
>+                    [% IF authority_type.authtypecode == authtypecode %]
>+                        <option value="[% authority_type.authtypecode | html %]" selected="selected">[% authority_type.authtypetext | html %]</option>
>+                    [% ELSE %]
>+                        <option value="[% authority_type.authtypecode | html %]">[% authority_type.authtypetext | html %]</option>
>+                    [% END %]
>                 [% END %]
>-            [% END %]
>             </select>
>         </label>
>     </div>
> [% END %]
> 
>-<div id="header_search">
>-    <div id="mainmain_heading" class="residentsearch">
>-        <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>-            <input type="hidden" name="op" value="do_search" />
>-            <input type="hidden" name="type" value="intranet" />
>-            <input type="hidden" name="marclist" value="mainmainentry" />
>-            <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">
>-                <input id="value_mainentry" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading ($a only)" />
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>-
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-
>-            <span class="form-extra-content">
>-                [% INCLUDE authtype %]
>-                [% INCLUDE operator %]
>-                [% INCLUDE orderby %]
>-            </span>
>-        </form>
>-    </div>
>-
>-    <div id="main_heading" class="residentsearch">
>-        <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>-            <input type="hidden" name="marclist" value="mainentry" />
>-            <input type="hidden" name="and_or" value="and" />
>-            <input type="hidden" name="excluding" value="" />
>-            <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">
>-                <input id="value_mainheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading" />
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>-
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-
>-            <span class="form-extra-content">
>-                [% INCLUDE authtype %]
>-                [% INCLUDE operator %]
>-                [% INCLUDE orderby %]
>-            </span>
>-        </form>
>-    </div>
>-
>-    <div id="matchheading_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>-            <input type="hidden" name="op" value="do_search" />
>-            <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">
>-                <input id="value_matchheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any heading" />
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>-
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-
>-            <span class="form-extra-content">
>-                [% INCLUDE authtype %]
>-                [% INCLUDE operator %]
>-                [% INCLUDE orderby %]
>-            </span>
>-        </form>
>-    </div>
>-
>-    <div id="entire_record" class="residentsearch">
>-        <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>-            <input type="hidden" name="op" value="do_search" />
>-            <input type="hidden" name="type" value="intranet" />
>-            <input type="hidden" name="marclist" value="all" />
>-            <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">
>-                <input id="value_anywhere" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any authority field" />
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>-
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-
>-            <span class="form-extra-content">
>-                [% INCLUDE authtype %]
>-                [% INCLUDE operator %]
>-                [% INCLUDE orderby %]
>-            </span>
>-        </form>
>-    </div>
>-
>-    <ul>
>-        <li><a title="Search main heading ($a only)" href="#mainmain_heading" class="keep_text"><i style="font-weight:bold">$a</i> <span class="tab-title">Main heading ($a only)</span></a></li>
>-        <li><a title="Search main heading" href="#main_heading" class="keep_text"><i class="fa fa-header"></i> <span class="tab-title">Main heading</span></a></li>
>-        <li><a title="Search all headings" href="#matchheading_search" class="keep_text"><i class="fa fa-align-center"></i> <span class="tab-title">All headings</span></a></li>
>-        <li><a title="Search entire record" href="#entire_record" class="keep_text"><i class="fa fa-folder-open-o"></i> <span class="tab-title">Entire record</span></a></li>
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="mainmain_heading" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>+                <input type="hidden" name="op" value="do_search" />
>+                <input type="hidden" name="type" value="intranet" />
>+                <input type="hidden" name="marclist" value="mainmainentry" />
>+                <input type="hidden" name="and_or" value="and" />
>+                <input type="hidden" name="excluding" value="" />
>+
>+                <div class="form-title">
>+                    <label class="control-label">Search main heading ($a only)</label>
>+                </div>
>+
>+                <div class="form-content">
>+                    <input id="value_mainentry" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading ($a only)" />
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                </div>
>+
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+
>+                <span class="form-extra-content">
>+                    [% INCLUDE authtype %]
>+                    [% INCLUDE operator %]
>+                    [% INCLUDE orderby %]
>+                </span>
>+            </form>
>+        </div>
>+
>+        <div id="main_heading" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>+                <input type="hidden" name="marclist" value="mainentry" />
>+                <input type="hidden" name="and_or" value="and" />
>+                <input type="hidden" name="excluding" value="" />
>+                <input type="hidden" name="op" value="do_search" />
>+                <input type="hidden" name="type" value="intranet" />
>+
>+                <div class="form-title">
>+                    <label class="control-label">Search main heading</label>
>+                </div>
>+
>+                <div class="form-content">
>+                    <input id="value_mainheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading" />
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                </div>
>+
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+
>+                <span class="form-extra-content">
>+                    [% INCLUDE authtype %]
>+                    [% INCLUDE operator %]
>+                    [% INCLUDE orderby %]
>+                </span>
>+            </form>
>+        </div>
>+
>+        <div id="matchheading_search" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>+                <input type="hidden" name="op" value="do_search" />
>+                <input type="hidden" name="type" value="intranet" />
>+                <input type="hidden" name="marclist" value="match" />
>+
>+                <div class="form-title">
>+                    <label class="control-label">Search all headings</label>
>+                </div>
>+
>+                <div class="form-content">
>+                    <input id="value_matchheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any heading" />
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                </div>
>+
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+
>+                <span class="form-extra-content">
>+                    [% INCLUDE authtype %]
>+                    [% INCLUDE operator %]
>+                    [% INCLUDE orderby %]
>+                </span>
>+            </form>
>+        </div>
>+
>+        <div id="entire_record" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/authorities/authorities-home.pl" method="get">
>+                <input type="hidden" name="op" value="do_search" />
>+                <input type="hidden" name="type" value="intranet" />
>+                <input type="hidden" name="marclist" value="all" />
>+                <input type="hidden" name="and_or" value="and" />
>+                <input type="hidden" name="excluding" value="" />
>+
>+                <div class="form-title">
>+                    <label class="control-label">Search entire record</label>
>+                </div>
>+
>+                <div class="form-content">
>+                    <input id="value_anywhere" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any authority field" />
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                </div>
>+
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+
>+                <span class="form-extra-content">
>+                    [% INCLUDE authtype %]
>+                    [% INCLUDE operator %]
>+                    [% INCLUDE orderby %]
>+                </span>
>+            </form>
>+        </div>
>+
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search main heading ($a only)" href="#mainmain_heading" aria-controls="mainmain_heading" role="tab"  aria-expanded="true" data-toggle="tab" class="keep_text"><i style="font-weight:bold">$a</i> <span class="tab-title">Main heading ($a only)</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Search main heading" href="#main_heading" aria-controls="main_heading" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-header"></i> <span class="tab-title">Main heading</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Search all headings" href="#matchheading_search" aria-controls="matchheading_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-align-center"></i> <span class="tab-title">All headings</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Search entire record" href="#entire_record" aria-controls="entire_record" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-folder-open-o"></i> <span class="tab-title">Entire record</span></a>
>+        </li>
>+        <li role="presentation">
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities_js.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities_js.inc
>index 4c82cd05a1..67d0eb6395 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities_js.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities_js.inc
>@@ -79,13 +79,13 @@ $(document).ready(function () {
>     var searchType = '[% marclist | html %]';
>     if (searchType) {
>         if ('mainmainentry' == searchType) {
>-            $("#header_search").tabs( "option", "active", 0 );
>+            $("#header_search a[href='#mainmain_heading']").tab("show");
>         } else if ('mainentry' == searchType) {
>-            $("#header_search").tabs( "option", "active", 1 );
>+            $("#header_search a[href='#main_heading']").tab("show");
>         } else if ('match' == searchType) {
>-            $("#header_search").tabs( "option", "active", 2 );
>+            $("#header_search a[href='#matchheading_search']").tab("show");
>         } else if ('all' == searchType) {
>-            $("#header_search").tabs( "option", "active", 3 );
>+            $("#header_search a[href='#entire_record']").tab("show");
>         }
>     }
> 
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
>index 3542711de1..2b6bd0a431 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
>@@ -1,49 +1,64 @@
> [% USE Koha %]
> [% USE Branches %]
>-<div id="header_search">
>+
> 
>-    <div id="budgets_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/admin/aqbudgets.pl" method="post">
>-            <input type="hidden" name="budget_period_id" value="[% budget_period_id | html %]" />
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="budgets_search" role="tabpanel" class="tab-pane active">
>+            <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>
>+                <div class="form-title">
>+                    <label class="control-label">Search funds</label>
>+                </div>
> 
>-            <span class="form-content">
>-                <input class="query form-control" type="text" name="filter_budgetname" id="filter_budgetname" value="[% filter_budgetname | html %]" placeholder="Search funds" />
>+                <div class="form-content">
>+                    <input class="query form-control" type="text" name="filter_budgetname" id="filter_budgetname" value="[% filter_budgetname | html %]" placeholder="Search funds" />
> 
>-                <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>+                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>+                </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
> 
>-            <div class="form-extra-content">
>-                <label for="filter_budgetbranch">Library</label>
>+                <div class="form-extra-content">
>+                    <label for="filter_budgetbranch">Library</label>
> 
>-                <select name="filter_budgetbranch" id="filter_budgetbranch" class="form-control">
>-                    <option value="">All libraries</option>
>-                    [% FOREACH branchloo IN Branches.all( selected => selected_branchcode ) %]
>-                        [% IF branchloo.selected %]
>-                            <option value="[% branchloo.branchcode | html %]" selected="selected">[% branchloo.branchname | html %]</option>
>-                        [% ELSE %]
>-                            <option value="[% branchloo.branchcode | html %]" >[% branchloo.branchname | html %]</option>
>+                    <select name="filter_budgetbranch" id="filter_budgetbranch" class="form-control">
>+                        <option value="">All libraries</option>
>+                        [% FOREACH branchloo IN Branches.all( selected => selected_branchcode ) %]
>+                            [% IF branchloo.selected %]
>+                                <option value="[% branchloo.branchcode | html %]" selected="selected">[% branchloo.branchname | html %]</option>
>+                            [% ELSE %]
>+                                <option value="[% branchloo.branchcode | html %]" >[% branchloo.branchname | html %]</option>
>+                            [% END %]
>                         [% END %]
>-                    [% END %]
>-                </select>
>-            </div>
>-        </form>
>-    </div>
>+                    </select>
>+                </div>
>+            </form>
>+        </div>
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search funds" href="#budgets_search" class="keep_text"><i class="fa fa-credit-card"></i> <span class="tab-title">Search funds</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search funds" href="#budgets_search" aria-controls="budgets_search" aria-expanded="true" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-credit-card"></i> <span class="tab-title">Search funds</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc
>index b2b45cde19..513cf06b3e 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-search.inc
>@@ -1,16 +1,34 @@
>-<div id="header_search">
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
> 
>-[% INCLUDE 'patron-search-box.inc' %]
>-[% INCLUDE 'checkin-search-box.inc' %]
>-[% INCLUDE 'renew-search-box.inc' %]
>-[% INCLUDE 'catalogue-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' bs_tab_active= 1 %]
>+        [% END %]
> 
>-<ul>
>-    [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-    [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a></li>[% END %]
>-    [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-    [% IF ( CAN_user_catalogue ) %]<li class="ui-tabs-active"><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>-</ul>
>-
>-</div>
>-
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation" class="active">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>+    </ul>
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cataloging-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cataloging-search.inc
>index 1199c79fe1..2c9ecb9fac 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/cataloging-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cataloging-search.inc
>@@ -1,35 +1,54 @@
> [% USE Koha %]
> [% PROCESS 'html_helpers.inc' %]
> [% PROCESS 'patronfields.inc' %]
>-
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
> 
>-<div id="header_search">
>+        <div id="addbooks_search" role="tabpanel" class="tab-pane active">
>+            <form name="search" action="addbooks.pl">
>+                <div class="form-title">
>+                    <label class="control-label">Cataloging search</label>
>+                </div>
> 
>-    <div id="addbooks_search" class="residentsearch">
>-        <form name="search" action="addbooks.pl">
>-            <span class="form-title">
>-                <label class="control-label">Cataloging search</label>
>-            </span>
>+                <div 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" />
>+                </div>
> 
>-            <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>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'checkin-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Cataloging search" href="#addbooks_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Cataloging search</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-        <li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation" class="active">
>+                <a title="Cataloging search" href="#addbooks_search" aria-controls="addbooks_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Cataloging search</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
>index ac15548243..066e52f078 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
>@@ -1,13 +1,18 @@
> [% USE Koha %]
> [% USE Branches %]
> [% IF ( CAN_user_catalogue ) %]
>-    <div id="catalog_search" class="residentsearch">
>+    
>+    [% IF( bs_tab_active ) %]
>+        <div id="catalog_search" role="tabpanel" class="tab-pane active">
>+    [% ELSE %]
>+        <div id="catalog_search" role="tabpanel" class="tab-pane">
>+    [% END %]
>         <form action="/cgi-bin/koha/catalogue/search.pl"  method="get" id="cat-search-block">
>-            <span class="form-title">
>+            <div class="form-title">
>                 <label class="control-label">Search catalog</label>
>-            </span>
>+            </div>
> 
>-            <span class="form-content">
>+            <div class="form-content">
>                 [% IF ( Koha.Preference('RetainCatalogSearchTerms') ) %]
>                     <input type="text" name="q" id="search-form" size="20" value="[% ms_value | html %]" title="Enter the terms you wish to search for." class="query form-text head-searchbox form-control" placeholder="Enter search keywords" />
>                 [% ELSE %]
>@@ -17,7 +22,7 @@
>                 [% IF Koha.Preference('IntranetCatalogSearchPulldown') || Koha.Preference('IntranetAddMastheadLibraryPulldown') %]
>                     <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>                 [% END %]
>-            </span>
>+            </div>
>             <button type="submit"><i class="fa fa-arrow-right"></i></button>
> 
>             <div class="form-extra-content">
>@@ -40,4 +45,5 @@
>             </div>
>         </form>
>     </div>
>+    
> [% END %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search-box.inc
>index f0973c11d5..ea1ba961bb 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search-box.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search-box.inc
>@@ -1,14 +1,20 @@
> [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>-    <div id="checkin_search" class="residentsearch">
>+    
>+    [% IF( bs_tab_active ) %]
>+        <div id="checkin_search" role="tabpanel" class="tab-pane active">
>+    [% ELSE %]
>+        <div id="checkin_search" role="tabpanel" class="tab-pane">
>+    [% END %]
>         <form method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off">
>-            <span class="form-title">
>+            <div class="form-title">
>                 <label class="control-label">Check in</label>
>-            </span>
>+            </div>
> 
>-            <span class="form-content">
>+            <div 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>
>             <button type="submit"><i class="fa fa-arrow-right"></i></button>
>         </form>
>     </div>
>+    
> [% END %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search.inc
>index 97541c6d30..7227d7dcb8 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/checkin-search.inc
>@@ -1,17 +1,29 @@
> [% USE Koha %]
>-
>-
>-<div id="header_search">
>-
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+
>+<div id="header_search" role="tabpanel" class="tab-pane active">
>+    <div class="tab-content">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' bs_tab_active= 1 %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation" class="active">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc
>index 0e770aa46d..b2120c2d09 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc
>@@ -1,18 +1,35 @@
> [% USE Koha %]
>-
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
> 
>-<div id="header_search">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' bs_tab_active= 1 %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'checkin-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search"><i class="fa fa-fw fa-search" class="keep_text"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation" class="active">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
>index 51620c6fbf..dd0d582718 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
>@@ -1,27 +1,43 @@
> [% USE Koha %]
>-<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>
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="city_search" role="tabpanel" class="tab-pane active">
>+            <form action="[% script_name | html %]" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search cities</label>
>+                </div>
> 
>-            <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 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" />
>+                </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search cities" href="#city_search" class="keep_text"><i class="fa fa-building-o"></i> <span class="tab-title">Search cities</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search cities" href="#city_search" aria-controls="city_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-building-o"></i> <span class="tab-title">Search cities</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/contracts-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/contracts-admin-search.inc
>index 42cab98c86..ba68c9e241 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/contracts-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/contracts-admin-search.inc
>@@ -1,28 +1,43 @@
> [% USE Koha %]
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="contract_description_search" role="tabpanel" class="tab-pane active">
>+            <form action="[% script_name | html %]" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search contracts</label>
>+                </div>
> 
>-<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>
>+                <div 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"/>
>+                </div>
> 
>-            <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>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search contracts" href="#contract_description_search" class="keep_text"><i class="fa fa-pencil-square-o"></i> <span class="tab-title">Search contracts</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search contracts" href="#contract_description_search" aria-controls="contract_description_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-pencil-square-o"></i> <span class="tab-title">Search contracts</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/currencies-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/currencies-admin-search.inc
>index 16adca3705..fb5a54732f 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/currencies-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/currencies-admin-search.inc
>@@ -1,28 +1,43 @@
> [% USE Koha %]
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="currency_search" role="tabpanel" class="tab-pane active">
>+            <form action="[% script_name | html %]" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search currencies</label>
>+                </div>
> 
>-<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>
>+                <div class="form-content">
>+                    <input class="head-searchbox form-control" type="text" name="description" id="description" value="[% searchfield | html %]" placeholder="Currencies search" />
>+                </div>
> 
>-            <span class="form-content">
>-                <input class="head-searchbox form-control" type="text" name="description" id="description" value="[% searchfield | html %]" placeholder="Currencies search" />
>-            </span>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search currencies" href="#currency_search" class="keep_text"><i class="fa fa-dollar"></i> <span class="tab-title">Search currencies</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search currencies" href="#currency_search" aria-controls="currency_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-dollar"></i> <span class="tab-title">Search currencies</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/desks-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/desks-admin-search.inc
>index f25526cade..6c988586d5 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/desks-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/desks-admin-search.inc
>@@ -1,27 +1,43 @@
> [% USE Koha %]
>-<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>
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="desk_search" role="tabpanel" class="tab-pane active">
>+            <form action="[% script_name|html %]" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search desks</label>
>+                </div>
> 
>-            <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 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" />
>+                </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search desks" href="#desk_search" class="keep_text"><i class="fa fa-desktop"></i> <span class="tab-title">Search desks</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search desks" href="#desk_search" aria-controls="desk_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-desktop"></i> <span class="tab-title">Search desks</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/erm-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/erm-search.inc
>index 7309c43bbe..471add266d 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/erm-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/erm-search.inc
>@@ -1,46 +1,54 @@
> [% USE Koha %]
>-
>-<div id="header_search">
>-    <div id="agreement_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/erm/agreements" method="get">
>-            <span class="form-title">
>-                <label class="control-label">Agreement search</label>
>-            </span>
>-            <span class="form-content">
>-                <input type="text" name="q" id="agreement_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>-            </span>
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="agreement_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/erm/agreements" method="get">
>+                <div class="form-title">
>+                    <label class="control-label">Agreement search</label>
>+                </div>
>+                <div class="form-content">
>+                    <input type="text" name="q" id="agreement_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>+                </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    <div id="package_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/erm/eholdings/local/packages" method="get">
>-            <span class="form-title">
>-                <label class="control-label">Package search</label>
>-            </span>
>-            <span class="form-content">
>-                <input type="text" name="package_name" id="package_name_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>-            </span>
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        <div id="package_search" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/erm/eholdings/local/packages" method="get">
>+                <div class="form-title">
>+                    <label class="control-label">Package search</label>
>+                </div>
>+                <div class="form-content">
>+                    <input type="text" name="package_name" id="package_name_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>+                </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    <div id="title_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/erm/eholdings/local/titles" method="get">
>-            <span class="form-title">
>-                <label class="control-label">Title search</label>
>-            </span>
>-            <span class="form-content">
>-                <input type="text" name="publication_title" id="title_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>-            </span>
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        <div id="title_search" role="tabpanel" class="tab-pane">
>+            <form action="/cgi-bin/koha/erm/eholdings/local/titles" method="get">
>+                <div class="form-title">
>+                    <label class="control-label">Title search</label>
>+                </div>
>+                <div class="form-content">
>+                    <input type="text" name="publication_title" id="title_filter" class="head-searchbox form-control" placeholder="Enter search keywords" size="40" />
>+                </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
>+    </div>
> 
>-    <ul>
>-        <li><a title="Search agreements" href="#agreement_search" class="keep_text"><i class="fa fa-check-circle-o"></i> <span class="tab-title">Search agreements</span></a></li>
>-        <li><a title="Search packages" href="#package_search" class="keep_text"><i class="fa fa-archive"></i> <span class="tab-title">Search packages</span></a></li>
>-        <li><a title="Search titles" href="#title_search" class="keep_text"><i class="fa fa-sort-alpha-asc"></i> <span class="tab-title">Search titles</span></a></li>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search agreements" href="#agreement_search" aria-controls="agreement_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-check-circle-o"></i> <span class="tab-title">Search agreements</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Search packages" href="#package_search" aria-controls="package_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-archive"></i> <span class="tab-title">Search packages</span></a>
>+        </li>
>+        <li role="presentation">
>+            <a title="Search titles" href="#title_search" aria-controls="title_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-sort-alpha-asc"></i> <span class="tab-title">Search titles</span></a>
>+        </li>
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/home-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/home-search.inc
>index b49ea45843..2430d1da77 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/home-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/home-search.inc
>@@ -1,19 +1,40 @@
>-
>-
>-<div id="header_search">
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'checkin-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'member-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a></li>[% END %]
>-        [% IF ( CAN_user_borrowers_edit_borrowers ) %]<li><a title="Search patrons" href="#patron_search" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patrons</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' bs_tab_active= 1 %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_borrowers_edit_borrowers ) %]
>+            [% INCLUDE 'member-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation" class="active">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title">Check in</span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title">Renew</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_borrowers_edit_borrowers ) %]
>+            <li role="presentation">
>+                <a title="Search patrons" href="#patron_search" aria-controls="patron_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patrons</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/letters-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/letters-search.inc
>index 5ec0553659..ebfec765b7 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/letters-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/letters-search.inc
>@@ -1,28 +1,43 @@
> [% USE Koha %]
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="notices_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/tools/letter.pl" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search notices</label>
>+                </div>
> 
>-<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>
>+                <div class="form-content">
>+                    <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="Search existing notices"/>
>+                </div>
> 
>-            <span class="form-content">
>-                <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="Search existing notices"/>
>-            </span>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search notices" href="#notices_search" class="keep_text"><i class="fa fa-commenting-o"></i> <span class="tab-title">Search notices</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search notices" href="#notices_search" aria-controls="notices_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-commenting-o"></i> <span class="tab-title">Search notices</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
>index 5d791a9093..50f5d8e894 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
>@@ -1,17 +1,22 @@
>+
> [% USE Branches %]
> [% USE Categories %]
> [% USE Koha %]
> [% PROCESS 'patronfields.inc' %]
> [% IF CAN_user_borrowers_edit_borrowers %]
>-    <div id="patron_search" class="residentsearch">
>+    [% IF( bs_tab_active ) %]
>+        <div id="patron_search" role="tabpanel" class="tab-pane active">
>+    [% ELSE %]
>+        <div id="patron_search" role="tabpanel" class="tab-pane">
>+    [% END %]
>         <form method="post" action="/cgi-bin/koha/members/member.pl">
>             <input type="hidden" name="quicksearch" value="1" />
> 
>-            <span class="form-title">
>+            <div class="form-title">
>                 <label class="control-label">Search patrons</label>
>-            </span>
>+            </div>
> 
>-            <span class="form-content">
>+            <div 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 %]"/>
>                 [% ELSE %]
>@@ -19,7 +24,7 @@
>                 [% END %]
> 
>                 <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
>-            </span>
>+            </div>
> 
>             <button type="submit"><i class="fa fa-arrow-right"></i></button>
> 
>@@ -45,13 +50,13 @@
>                 <div>
>                     <label for="searchtype" class="control-label">Search type</label>
>                     <select name="searchtype" id="searchtype" class="form-control">
>-                    [% IF searchtype == 'start_with' %]
>-                        <option value='start_with'>Starts with</option>
>-                        <option value='contain'>Contains</option>
>-                    [% ELSE %]
>-                        <option value='start_with'>Starts with</option>
>-                        <option value='contain'>Contains</option>
>-                    [% END %]
>+                        [% IF searchtype == 'start_with' %]
>+                            <option value='start_with'>Starts with</option>
>+                            <option value='contain'>Contains</option>
>+                        [% ELSE %]
>+                            <option value='start_with'>Starts with</option>
>+                            <option value='contain'>Contains</option>
>+                        [% END %]
>                     </select>
>                 </div>
> 
>@@ -60,7 +65,7 @@
>                     <label for="branchcode" class="control-label">Library</label>
>                     <select name="branchcode_filter" id="branchcode" class="form-control">
>                         [% IF branches.size != 1 %]
>-                        <option value="">Any</option>
>+                            <option value="">Any</option>
>                         [% END %]
>                         [% PROCESS options_for_libraries libraries => branches %]
>                     </select>
>@@ -84,3 +89,4 @@
>         </form>
>     </div>
> [% END %]
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
>index 260d328fd1..c7da8bf74b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
>@@ -48,6 +48,7 @@
>     <div id="tabs" class="toptabs">
>         <h2>Source records</h2>
>         <ul class="nav nav-tabs" role="tablist">
>+    <div class="tab-content">
>             [% FOREACH record IN sourcerecords %]
>                 <li role="presentation">
>                     <a href="#tabrecord[% record.recordid | uri %]" aria-controls="tabrecord[% record.recordid | uri %]" role="tab" data-toggle="tab">
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-box.inc
>index f9c0b6b3f4..8211872696 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-box.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-box.inc
>@@ -1,20 +1,26 @@
> [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>-    <div id="circ_search" class="residentsearch">
>+    
>+    [% IF( bs_tab_active ) %]
>+        <div id="circ_search" role="tabpanel" class="tab-pane active">
>+    [% ELSE %]
>+        <div id="circ_search" role="tabpanel" class="tab-pane">
>+    [% END %]
>         <form action="/cgi-bin/koha/circ/circulation.pl" id="patronsearch" method="post">
>-            <span class="form-title">
>-                <label class="control-label">Check out</label>
>-            </span>
>+            <div class="form-title">
>+                <label class="control-label" for="findborrower">Check out</label>
>+            </div>
> 
>-            <span class="form-content">
>+            <div 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"/>
> 
>                 [% IF ( stickyduedate ) %]
>                     <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />
>                     <input type="hidden" name="stickyduedate" value="[% stickyduedate | html %]" />
>                 [% END %]
>-            </span>
>+            </div>
> 
>             <button type="submit"><i class="fa fa-arrow-right"></i></button>
>         </form>
>     </div>
>+    
> [% END %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-header.inc
>index 1fc3262562..e87135df8a 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-header.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search-header.inc
>@@ -1,15 +1,39 @@
>-<div id="header_search">
>-    [% INCLUDE 'member-search-box.inc' %]
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'checkin-search-box.inc' %]
>-    [% INCLUDE 'renew-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        [% INCLUDE 'member-search-box.inc' bs_tab_active= 1 %]
> 
>-    <ul>
>-        <li><a title="Search patrons" href="#patron_search" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title"><span class="tab-title">Search patrons</span></span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title"><span class="tab-title">Check out</span></span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check in" href="#checkin_search" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title"><span class="tab-title">Check in</span></span></a></li>[% END %]
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Renew" href="#renew_search" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title"><span class="tab-title">Renew</span></span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title"><span class="tab-title">Search catalog</span></span></a></li>[% END %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+            [% INCLUDE 'checkin-search-box.inc' %]
>+            [% INCLUDE 'renew-search-box.inc' %]
>+        [% END %]
>+
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search patrons" href="#patron_search" aria-controls="patron_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patrons</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title"><span class="tab-title">Check out</span></span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Check in" href="#checkin_search" aria-controls="checkin_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-download"></i> <span class="tab-title"><span class="tab-title">Check in</span></span></a>
>+            </li>
>+            <li role="presentation">
>+                <a title="Renew" href="#renew_search" aria-controls="renew_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-retweet"></i> <span class="tab-title"><span class="tab-title">Renew</span></span></a>
>+            </li>
>+        [% END %]
>+
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title"><span class="tab-title">Search catalog</span></span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
>index 6733864b89..fb894e6d60 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
>@@ -1,28 +1,44 @@
> [% USE Koha %]
>-<div id="header_search">
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="patron_category_search" role="tabpanel" class="tab-pane active">
>+            <form action="[% script_name | html %]" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search patron categories</label>
>+                </div>
> 
>-    <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>
>+                <div class="form-content">
>+                    <input class="head-searchbox form-control" type="text" name="description" value="[% searchfield | html %]" placeholder="Search by patron category name" />
>+                </div>
> 
>-            <span class="form-content">
>-                <input class="head-searchbox form-control" type="text" name="description" value="[% searchfield | html %]" placeholder="Search by patron category name" />
>-            </span>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search patron categories" href="#patron_category_search" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patron categories</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div> 
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search patron categories" href="#patron_category_search" aria-controls="patron_category_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-id-card-o"></i> <span class="tab-title">Search patron categories</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div> 
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
>index 6a0672b420..c269579c55 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
>@@ -1,29 +1,45 @@
>-<div id="header_search">
>-    <div id="syspref_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/admin/preferences.pl">
>-            <input type="hidden" name="tab" value="[% last_tab | html %]" />
>-            <input type="hidden" name="op" value="search" />
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="syspref_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/admin/preferences.pl">
>+                <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>
>+                <div class="form-title">
>+                    <label class="control-label">Search system preferences</label>
>+                </div>
> 
>-            <span class="form-content">
>-                <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="System preference search">
>-            </span>
>+                <div class="form-content">
>+                    <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="System preference search">
>+                </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search system preferences" href="#syspref_search" class="keep_text"><i class="fa fa-fw fa-cogs"></i> <span class="tab-title">Search system preferences</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+        <a title="Search system preferences" href="#syspref_search" aria-controls="syspref_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-cogs"></i> <span class="tab-title">Search system preferences</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/renew-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/renew-search-box.inc
>index 4db4a8843e..dd8d9b8c61 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/renew-search-box.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/renew-search-box.inc
>@@ -1,14 +1,20 @@
> [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>-    <div id="renew_search" class="residentsearch">
>+    
>+    [% IF( bs_tab_active ) %]
>+        <div id="renew_search" role="tabpanel" class="tab-pane active">
>+    [% ELSE %]
>+        <div id="renew_search" role="tabpanel" class="tab-pane">
>+    [% END %]
>         <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off">
>-            <span class="form-title">
>+            <div class="form-title">
>                 <label class="control-label">Renew</label>
>-            </span>
>+            </div>
> 
>-            <span class="form-content">
>+            <div 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>
>+            </div>
>             <button type="submit"><i class="fa fa-arrow-right"></i></button>
>         </form>
>     </div>
>+    
> [% END %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/search_indexes.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/search_indexes.inc
>index d8df1d34b2..6b3eee37f0 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/search_indexes.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/search_indexes.inc
>@@ -4,167 +4,167 @@
> [% ELSE %]
>     <select class="advsearch" name="idx" id="idx">
> [% END %]
>-    [% IF ms_kw %]
>+[% IF ms_kw %]
>         <option selected="selected" value="kw">Keyword</option>
>     [% ELSE %]
>         <option value="kw">Keyword</option>
>     [% END %]
>-    [% IF ms_kwcommaphr %]
>+[% IF ms_kwcommaphr %]
>         <option selected="selected" value="kw,phr">&nbsp;&nbsp;&nbsp;&nbsp; Keyword as phrase</option>
>     [% ELSE %]
>         <option value="kw,phr">&nbsp;&nbsp;&nbsp;&nbsp; Keyword as phrase</option>
>     [% END %]
>-    [% IF ms_au %]
>+[% IF ms_au %]
>         <option selected="selected" value="au">Author</option>
>     [% ELSE %]
>         <option value="au">Author</option>
>     [% END %]
>-    [% IF ms_aucommaphr %]
>+[% IF ms_aucommaphr %]
>         <option selected="selected" value="au,phr">&nbsp;&nbsp;&nbsp;&nbsp; Author as phrase</option>
>     [% ELSE %]
>         <option value="au,phr">&nbsp;&nbsp;&nbsp;&nbsp; Author as phrase</option>
>     [% END %]
>-    [% IF ms_cpn %]
>+[% IF ms_cpn %]
>         <option selected="selected" value="cpn">&nbsp;&nbsp;&nbsp;&nbsp; Corporate name</option>
>     [% ELSE %]
>         <option value="cpn">&nbsp;&nbsp;&nbsp;&nbsp; Corporate name</option>
>     [% END %]
>-    [% IF ms_cfn %]
>+[% IF ms_cfn %]
>         <option selected="selected" value="cfn">&nbsp;&nbsp;&nbsp;&nbsp; Conference name</option>
>     [% ELSE %]
>         <option value="cfn">&nbsp;&nbsp;&nbsp;&nbsp; Conference name</option>
>     [% END %]
>-    [% IF ms_cpncommaphr %]
>+[% IF ms_cpncommaphr %]
>         <option selected="selected" value="cpn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Corporate name as phrase</option>
>     [% ELSE %]
>         <option value="cpn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Corporate name as phrase</option>
>     [% END %]
>-    [% IF ms_cfncommaphr %]
>+[% IF ms_cfncommaphr %]
>         <option selected="selected" value="cfn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Conference name as phrase</option>
>     [% ELSE %]
>         <option value="cfn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Conference name as phrase</option>
>     [% END %]
>-    [% IF ms_pn %]
>+[% IF ms_pn %]
>         <option selected="selected" value="pn">&nbsp;&nbsp;&nbsp;&nbsp; Personal name</option>
>     [% ELSE %]
>         <option value="pn">&nbsp;&nbsp;&nbsp;&nbsp; Personal name</option>
>     [% END %]
>-    [% IF ms_pncommaphr %]
>+[% IF ms_pncommaphr %]
>         <option selected="selected" value="pn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Personal name as phrase</option>
>     [% ELSE %]
>         <option value="pn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Personal name as phrase</option>
>     [% END %]
>-    [% IF ms_ti %]
>+[% IF ms_ti %]
>         <option selected="selected" value="ti">Title</option>
>     [% ELSE %]
>         <option value="ti">Title</option>
>     [% END %]
>-    [% IF ms_ticommaphr %]
>+[% IF ms_ticommaphr %]
>         <option selected="selected" value="ti,phr">&nbsp;&nbsp;&nbsp;&nbsp; Title as phrase</option>
>     [% ELSE %]
>         <option value="ti,phr">&nbsp;&nbsp;&nbsp;&nbsp; Title as phrase</option>
>     [% END %]
>-    [% IF ms_se %]
>+[% IF ms_se %]
>         <option selected="seleced" value="se">&nbsp;&nbsp;&nbsp;&nbsp; Series title</option>
>     [% ELSE %]
>         <option value="se">&nbsp;&nbsp;&nbsp;&nbsp; Series title</option>
>     [% END %]
>-    [% IF ms_su %]
>+[% IF ms_su %]
>         <option selected="selected" value="su">Subject</option>
>     [% ELSE %]
>         <option value="su">Subject</option>
>     [% END %]
>-    [% IF ms_sucommaphr %]
>+[% IF ms_sucommaphr %]
>         <option selected="selected" value="su,phr">&nbsp;&nbsp;&nbsp;&nbsp; Subject as phrase</option>
>     [% ELSE %]
>         <option value="su,phr">&nbsp;&nbsp;&nbsp;&nbsp; Subject as phrase</option>
>     [% END %]
>-    [% IF ( expanded_options ) %]
>-        [% IF ms_sudashbr %]
>+[% IF ( expanded_options ) %]
>+[% IF ms_sudashbr %]
>             <option selected="selected" value="su-br">&nbsp;&nbsp;&nbsp;&nbsp; Subject and broader terms</option>
>         [% ELSE %]
>             <option value="su-br">&nbsp;&nbsp;&nbsp;&nbsp; Subject and broader terms</option>
>         [% END %]
>-        [% IF ms_sudashna %]
>+[% IF ms_sudashna %]
>             <option selected="selected" value="su-na">&nbsp;&nbsp;&nbsp;&nbsp; Subject and narrower terms</option>
>         [% ELSE %]
>             <option value="su-na">&nbsp;&nbsp;&nbsp;&nbsp; Subject and narrower terms</option>
>         [% END %]
>-        [% IF ms_sudashrl %]
>+[% IF ms_sudashrl %]
>             <option selected="selected" value="su-rl">&nbsp;&nbsp;&nbsp;&nbsp; Subject and related terms</option>
>         [% ELSE %]
>             <option value="su-rl">&nbsp;&nbsp;&nbsp;&nbsp; Subject and related terms</option>
>         [% END %]
>     [% END %]
>-    [% IF ms_bc %]
>+[% IF ms_bc %]
>         <option selected="selected" value="bc">Barcode</option>
>     [% ELSE %]
>         <option value="bc">Barcode</option>
>     [% END %]
>-    [% IF ms_location %]
>+[% IF ms_location %]
>         <option selected="selected" value="location" title="Enter location code value for search">Shelving location (code)</option>
>     [% ELSE %]
>         <option value="location" title="Enter location code value for search">Shelving location (code)</option>
>     [% END %]
>-    [% IF ( Koha.Preference('IntranetNumbersPreferPhrase') ) %]
>-        [% IF ms_identcommaphr %]
>+[% IF ( Koha.Preference('IntranetNumbersPreferPhrase') ) %]
>+[% IF ms_identcommaphr %]
>             <option selected="selected" value="ident,phr">Standard number</option>
>         [% ELSE %]
>             <option value="ident,phr">Standard number</option>
>         [% END %]
>     [% ELSE %]
>-        [% IF ms_ident %]
>+[% IF ms_ident %]
>             <option selected="selected" value="ident">Standard number</option>
>         [% ELSE %]
>             <option value="ident">Standard number</option>
>         [% END %]
>     [% END %]
>-    [% IF ms_nb %]
>+[% IF ms_nb %]
>         <option selected="selected" value="nb">&nbsp;&nbsp;&nbsp;&nbsp; ISBN</option>
>     [% ELSE %]
>         <option value="nb">&nbsp;&nbsp;&nbsp;&nbsp; ISBN</option>
>     [% END %]
>-    [% IF ms_ns %]
>+[% IF ms_ns %]
>         <option selected="selected" value="ns">&nbsp;&nbsp;&nbsp;&nbsp; ISSN</option>
>     [% ELSE %]
>         <option value="ns">&nbsp;&nbsp;&nbsp;&nbsp; ISSN</option>
>     [% END %]
>-    [% IF ( Koha.Preference('IntranetNumbersPreferPhrase') ) %]
>-        [% IF ms_callnumcommaphr %]
>+[% IF ( Koha.Preference('IntranetNumbersPreferPhrase') ) %]
>+[% IF ms_callnumcommaphr %]
>             <option selected="selected" value="callnum,phr">&nbsp;&nbsp;&nbsp;&nbsp; Call number</option>
>         [% ELSE %]
>             <option value="callnum,phr">&nbsp;&nbsp;&nbsp;&nbsp; Call number</option>
>         [% END %]
>     [% ELSE %]
>-        [% IF ms_callnum %]
>+[% IF ms_callnum %]
>             <option selected="selected" value="callnum">&nbsp;&nbsp;&nbsp;&nbsp; Call number</option>
>         [% ELSE %]
>             <option value="callnum">&nbsp;&nbsp;&nbsp;&nbsp; Call number</option>
>         [% END %]
>     [% END %]
>-    [% IF ms_lncommartrn %]
>+[% IF ms_lncommartrn %]
>         <option selected="selected" value="ln,rtrn">Language</option>
>     [% ELSE %]
>         <option value="ln,rtrn">Language</option>
>     [% END %]
>-    [% IF ms_nt %]
>+[% IF ms_nt %]
>         <option selected="selected" value="nt">Notes/Comments</option>
>     [% ELSE %]
>         <option value="nt">Notes/Comments</option>
>     [% END %]
>-    [% IF (marcflavour != 'UNIMARC' ) %]
>-        [% IF ms_curriculum %]
>+[% IF (marcflavour != 'UNIMARC' ) %]
>+[% IF ms_curriculum %]
>             <option selected="selected" value="curriculum">Curriculum</option>
>         [% ELSE %]
>             <option value="curriculum">Curriculum</option>
>         [% END %]
>     [% END %]
>-    [% IF ms_pb %]
>+[% IF ms_pb %]
>         <option selected="selected" value="pb">Publisher</option>
>     [% ELSE %]
>         <option value="pb">Publisher</option>
>     [% END %]
>-    [% IF ms_pl %]
>+[% IF ms_pl %]
>         <option selected="selected" value="pl">Publisher location</option>
>     [% ELSE %]
>         <option value="pl">Publisher location</option>
>@@ -176,12 +176,12 @@
>     [%# http://www.loc.gov/marc/bibliographic/bd008a.html %]
>     [%# This search is also for date ranges due to the %]
>     [%# special Zebra r=r CCL mapping for 'yr' %]
>-    [% IF ms_yrcommastdashyear %]
>+[% IF ms_yrcommastdashyear %]
>         <option selected="selected" value="yr,st-year">Publication date (yyyy-yyyy)</option>
>     [% ELSE %]
>         <option value="yr,st-year">Publication date (yyyy-yyyy)</option>
>     [% END %]
>-    [% IF ms_acqdatecommastdashdatedashnormalized %]
>+[% IF ms_acqdatecommastdashdatedashnormalized %]
>         <option selected="selected" value="acqdate,st-date-normalized">Acquisition date (yyyy-mm-dd)</option>
>     [% ELSE %]
>         <option value="acqdate,st-date-normalized">Acquisition date (yyyy-mm-dd)</option>
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
>index 5e60974c15..9ca5e58719 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
>@@ -1,39 +1,54 @@
> [% USE Koha %]
>-
>-
>-<div id="header_search">
>-    <div id="subscription_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/serials/serials-search.pl" method="get">
>-            [% IF ( routing ) %]
>-            <input type="hidden" name="routing" value="[% routing | html %]" />
>-            [% 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 %]" />
>-
>-                [% IF (UNIMARC) %]
>-                    <input type="text" class="form-control" placeholder="EAN" size="11" name="EAN_filter" id="EAN_filter" value="[% EAN_filter | html %]" />
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="subscription_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/serials/serials-search.pl" method="get">
>+                [% IF ( routing ) %]
>+                    <input type="hidden" name="routing" value="[% routing | html %]" />
>                 [% END %]
>-
>-                <input type="text" class="form-control" placeholder="Title" size="11" name="title_filter" id="title_filter" value="[% title_filter | html %]" />
>-            </span>
>-
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>-
>-    [% INCLUDE 'patron-search-box.inc' %]
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search subscriptions" href="#subscription_search" class="keep_text"><i class="fa fa-book"></i> <span class="tab-title">Search subscriptions</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+                <input type="hidden" name="searched" value="1" />
>+
>+                <div class="form-title">
>+                    <label class="control-label">Search subscriptions</label>
>+                </div>
>+
>+                <div class="form-content">
>+                    <input type="text" class="form-control" placeholder="ISSN" size="11" name="ISSN_filter" id="ISSN_filter" value="[% ISSN_filter | html %]" />
>+
>+                    [% IF (UNIMARC) %]
>+                        <input type="text" class="form-control" placeholder="EAN" size="11" name="EAN_filter" id="EAN_filter" value="[% EAN_filter | html %]" />
>+                    [% END %]
>+
>+                    <input type="text" class="form-control" placeholder="Title" size="11" name="title_filter" id="title_filter" value="[% title_filter | html %]" />
>+                </div>
>+
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
>+
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search subscriptions" href="#subscription_search" aria-controls="subscription_search" aria-expanded="true" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-book"></i> <span class="tab-title">Search subscriptions</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/suggestions-add-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/suggestions-add-search.inc
>index d6ff5d1411..010e1bcd15 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/suggestions-add-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/suggestions-add-search.inc
>@@ -1,32 +1,48 @@
>-[% USE Koha %]
>-<div id="header_search">
> 
>-    <div id="suggestions_search" class="residentsearch">
>-        <form action="/cgi-bin/koha/acqui/newordersuggestion.pl" method="get">
>-            <input type="hidden" name="booksellerid" value="[% booksellerid | html %]" />
>+[% USE Koha %]
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
> 
>-            <span class="form-title">
>-                <label class="control-label">Search suggestions</label>
>-            </span>
>+        <div id="suggestions_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/acqui/newordersuggestion.pl" method="get">
>+                <input type="hidden" name="booksellerid" value="[% booksellerid | 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 %]" />
>-                <input type="text" class="head-searchbox form-control" placeholder="Publisher" id="searchpublishercode" name="publishercode" size="10" value="[% publishercode | html %]" />
>-            </span>
>+                <div class="form-title">
>+                    <label class="control-label">Search suggestions</label>
>+                </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+                <div 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 %]" />
>+                    <input type="text" class="head-searchbox form-control" placeholder="Publisher" id="searchpublishercode" name="publishercode" size="10" value="[% publishercode | html %]" />
>+                </div>
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
> 
>-    <ul>
>-        <li><a title="Search suggestions" href="#suggestions_search" class="keep_text"><i class="fa fa-comment-o"></i> <span class="tab-title">Search suggestions</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search suggestions" href="#suggestions_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-comment-o"></i> <span class="tab-title">Search suggestions</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
>index ed7a88e138..952fdab79f 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
>@@ -1,28 +1,43 @@
> [% USE Koha %]
>-<div id="header_search">
>+
>+<div id="header_search" role="tablist">
>+    <div class="tab-content">
>+        <div id="z3950_search" role="tabpanel" class="tab-pane active">
>+            <form action="/cgi-bin/koha/admin/z3950servers.pl" method="post">
>+                <div class="form-title">
>+                    <label class="control-label">Search Z39.50/SRU servers</label>
>+                </div>
> 
>-    <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>
>+                <div class="form-content">
>+                    <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="[% searchfield | html %]" placeholder="Z39.50/SRU server search" />
>+                </div>
> 
>-            <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>
>+                <button type="submit"><i class="fa fa-arrow-right"></i></button>
>+            </form>
>+        </div>
> 
>-            <button type="submit"><i class="fa fa-arrow-right"></i></button>
>-        </form>
>-    </div>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            [% INCLUDE 'patron-search-box.inc' %]
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            [% INCLUDE 'catalogue-search-box.inc' %]
>+        [% END %]
> 
>-    [% INCLUDE 'patron-search-box.inc' %]
>-
>-    [% INCLUDE 'catalogue-search-box.inc' %]
>-
>-    <ul>
>-        <li><a title="Search Z39.50/SRU servers" href="#z3950_search" class="keep_text"><i class="fa fa-search"></i> <span class="tab-title">Search Z39.50/SRU servers</span></a></li>
>-        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><li><a title="Check out" href="#circ_search" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a></li>[% END %]
>-        [% IF ( CAN_user_catalogue ) %]<li><a title="Search catalog" href="#catalog_search" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a></li>[% END %]
>+    </div>
>+    <ul class="nav nav-tabs" role="tablist">
>+        <li role="presentation" class="active">
>+            <a title="Search Z39.50/SRU servers" href="#z3950_search" aria-controls="z3950_search" role="tab" aria-expanded="true" data-toggle="tab" class="keep_text"><i class="fa fa-search"></i> <span class="tab-title">Search Z39.50/SRU servers</span></a>
>+        </li>
>+        [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
>+            <li role="presentation">
>+                <a title="Check out" href="#circ_search" aria-controls="circ_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-upload"></i> <span class="tab-title">Check out</span></a>
>+            </li>
>+        [% END %]
>+        [% IF ( CAN_user_catalogue ) %]
>+            <li role="presentation">
>+                <a title="Search catalog" href="#catalog_search" aria-controls="catalog_search" role="tab" data-toggle="tab" class="keep_text"><i class="fa fa-fw fa-search"></i> <span class="tab-title">Search catalog</span></a>
>+            </li>
>+        [% END %]
>     </ul>
>-</div>
>-
>+</div>
>+
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
>index 04dacd41d7..55c98ca511 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
>@@ -719,7 +719,7 @@
>                 $('.offline-returns').hide();
>                 $('.offline-circulation').hide();
>                 $('.offline-circulation-instructions').show();
>-                $('#header_search').tabs("option", "active", 0);
>+                $('#header_search').selectTabByID("#circ_search");
>                 setTimeout(function() { $('#circ_search input[name="findborrower"]').trigger('focus'), 1 });
>             });
> 
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>index c452e0226f..3b60c4b938 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>@@ -45,32 +45,57 @@ $.fn.tabIndex = function () {
>     return $(this).parent().children('div').index(this);
> };
> $.fn.selectTabByID = function (tabID) {
>-    $(this).tabs("option", "active", $( tabID ).tabIndex());
>+    $("a[href='" + tabID + "']", $(this) ).tab("show");
> };
> 
> $(document).ready(function() {
>+
>     //check for a hash before setting focus
>     let hash = window.location.hash;
>     if ( ! hash ) {
>-        $('#header_search').tabs({
>-            create: function( e, ui ){
>-                ui.panel.find("input:text:first").focus();
>-            },
>-            activate: function ( e, ui ) {
>-                ui.newPanel.find("input:text:first").focus();
>-            }
>-        });
>+        $(".tab-pane.active input:text:first").focus();
>     }
>+    $("#header_search a[data-toggle='tab']").on("shown.bs.tab", function (e) {
>+        $( e.target.hash ).find("input:text:first").focus();
>+    });
>+
>     $(".close").click(function(){ window.close(); });
> 
>     $("#checkin_search form").preventDoubleFormSubmit();
> 
>-    if($("#header_search #checkin_search").length > 0){ shortcut.add('Alt+r',function (){ $("#header_search").selectTabByID("#checkin_search"); $("#ret_barcode").focus(); }); } else { shortcut.add('Alt+r',function (){ location.href="/cgi-bin/koha/circ/returns.pl"; }); }
>-    if($("#header_search #circ_search").length > 0){ shortcut.add('Alt+u',function (){ $("#header_search").selectTabByID("#circ_search"); $("#findborrower").focus(); }); } else { shortcut.add('Alt+u',function(){ location.href="/cgi-bin/koha/circ/circulation.pl"; }); }
>-    if($("#header_search #catalog_search").length > 0){ shortcut.add('Alt+q',function (){ $("#header_search").selectTabByID("#catalog_search"); $("#search-form").focus(); }); } else { shortcut.add('Alt+q',function(){ location.href="/cgi-bin/koha/catalogue/search.pl"; }); }
>-    if($("#header_search #renew_search").length > 0){ shortcut.add('Alt+w',function (){ $("#header_search").selectTabByID("#renew_search"); $("#ren_barcode").focus(); }); } else { shortcut.add('Alt+w',function(){ location.href="/cgi-bin/koha/circ/renew.pl"; }); }
>-
>-    $("#header_search > ul > li").show();
>+    if($("#header_search #checkin_search").length > 0){
>+        shortcut.add('Alt+r',function (){
>+            $("#header_search").selectTabByID("#checkin_search");
>+            $("#ret_barcode").focus();
>+        });
>+    } else {
>+        shortcut.add('Alt+r',function (){
>+            location.href="/cgi-bin/koha/circ/returns.pl"; });
>+    }
>+    if($("#header_search #circ_search").length > 0){
>+        shortcut.add('Alt+u',function (){
>+            $("#header_search").selectTabByID("#circ_search");
>+            $("#findborrower").focus();
>+        });
>+    } else {
>+        shortcut.add('Alt+u',function(){ location.href="/cgi-bin/koha/circ/circulation.pl"; });
>+    }
>+    if($("#header_search #catalog_search").length > 0){
>+        shortcut.add('Alt+q',function (){
>+            $("#header_search").selectTabByID("#catalog_search");
>+            $("#search-form").focus();
>+        });
>+    } else {
>+        shortcut.add('Alt+q',function(){ location.href="/cgi-bin/koha/catalogue/search.pl"; });
>+    }
>+    if($("#header_search #renew_search").length > 0){
>+        shortcut.add('Alt+w',function (){
>+            $("#header_search").selectTabByID("#renew_search");
>+            $("#ren_barcode").focus();
>+        });
>+    } else {
>+        shortcut.add('Alt+w',function(){ location.href="/cgi-bin/koha/circ/renew.pl"; });
>+    }
> 
>     $('#header_search .form-extra-content-toggle').on('click', function () {
>         const extraContent = $(this).closest('form').find('.form-extra-content');
>-- 
>2.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 32683: 145510 | 145567 | 145570 | 145666 | 146352 | 147691 | 147751