View | Details | Raw Unified | Return to bug 33668
Collapse All | Expand All

(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss (-4 / +26 lines)
Lines 658-668 th { Link Here
658
        margin: 0;
658
        margin: 0;
659
    }
659
    }
660
660
661
    .clear-search {
661
    .quick-search-wrapper {
662
        position: relative;
663
    }
664
665
    .quick-search-wrapper input:placeholder-shown + .clear-search {
666
        opacity: 0;
667
        pointer-events: none;
668
    }
669
670
    .quick-search-wrapper .clear-search {
671
        position: absolute;
672
        border: none;
673
        display: block;
674
        width: 1em;
675
        height: 1em;
676
        line-height: 1.06em;
677
        font-size: 1.2em;
678
        border-radius: 50%;
679
        top: 0;
680
        bottom: 0;
681
        right: 5px;
682
        margin: auto;
683
        background: #ddd;
684
        padding: 0;
685
        outline: none;
662
        cursor: pointer;
686
        cursor: pointer;
663
        color: #548300;
687
        transition: 0.1s;
664
        font-size: 2rem;
665
        display: inline-flex;
666
    }
688
    }
667
}
689
}
668
690
(-)a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc (-21 / +20 lines)
Lines 290-312 Link Here
290
                                    <!-- /.col-sm-auto -->
290
                                    <!-- /.col-sm-auto -->
291
291
292
                                    <div class="col order-4 order-sm-3">
292
                                    <div class="col order-4 order-sm-3">
293
                                        [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %]
293
                                        <div class="quick-search-wrapper">
294
                                            <label for="translControl1" class="visually-hidden">Search the catalog in [% Branches.GetName( mylibraryfirst ) | html %]</label>
294
                                            [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %]
295
                                            <input
295
                                                <label for="translControl1" class="visually-hidden">Search the catalog in [% Branches.GetName( mylibraryfirst ) | html %]</label>
296
                                                type="text"
296
                                                <input
297
                                                class="transl1 form-control form-control-filtered"
297
                                                    type="text"
298
                                                id="translControl1"
298
                                                    class="transl1 form-control form-control-filtered"
299
                                                name="q"
299
                                                    id="translControl1"
300
                                                value="[% ms_value | html %]"
300
                                                    name="q"
301
                                                data-bs-toggle="tooltip"
301
                                                    value="[% ms_value | html %]"
302
                                                data-bs-placement="top"
302
                                                    data-bs-toggle="tooltip"
303
                                                title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only"
303
                                                    data-bs-placement="top"
304
                                                placeholder="Search the catalog"
304
                                                    title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only"
305
                                            /><span id="translControl"></span>
305
                                                    placeholder="Search the catalog"
306
                                        [% ELSE %]
306
                                                /><span id="translControl"></span>
307
                                            <label for="translControl1" class="visually-hidden">Search the catalog</label>
307
                                            [% ELSE %]
308
                                            <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" placeholder="Search the catalog" /><span id="translControl"></span>
308
                                                <label for="translControl1" class="visually-hidden">Search the catalog</label>
309
                                        [% END # /ms_value %]
309
                                                <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" placeholder="Search the catalog" /><span id="translControl"></span>
310
                                            [% END # /ms_value %]
311
                                            <button class="clear-search" type="reset" title="Clear search" aria-label="Clear search"> &times; </button>
312
                                        </div>
310
                                    </div>
313
                                    </div>
311
                                    <!-- /.col -->
314
                                    <!-- /.col -->
312
315
Lines 364-372 Link Here
364
                                        [% END # / opac_limit_override %]
367
                                        [% END # / opac_limit_override %]
365
                                    [% END # / OpacAddMastheadLibraryPulldown %]
368
                                    [% END # / OpacAddMastheadLibraryPulldown %]
366
369
367
                                    <div class="order-5 col-sm-auto clear-search">
368
                                        <i class="fa-solid fa-circle-xmark" aria-hidden="true" title="Clear search" aria-label="Clear search"></i>
369
                                    </div>
370
                                    <div class="order-5 col-sm-auto">
370
                                    <div class="order-5 col-sm-auto">
371
                                        <button type="submit" id="searchsubmit" class="btn btn-primary" title="Search" aria-label="Search">
371
                                        <button type="submit" id="searchsubmit" class="btn btn-primary" title="Search" aria-label="Search">
372
                                            <i class="fa fa-search" aria-hidden="true"></i>
372
                                            <i class="fa fa-search" aria-hidden="true"></i>
373
- 

Return to bug 33668