Bug 38231: Adjust CSS for search result controls in the OPAC

This patch makes some markup and CSS changes to the OPAC so that
controls are aligned correctly in the "mobile" view's catalog search
results. The patch also removes the border from the controls... I think
the borders looks out of place.

To test apply the patch and rebuild the OPAC CSS.

- Perform a catalog search.
- Check the styling of the controls shown for each search result, e.g.
  Place hold, Add tg, Save to lists, etc.
  - Make sure the controls work well when the browser window is various
    widths, from ~600px and up.

Sponsored-by: Athens County Public Libraries
Signed-off-by: Yanjun Li <yanjun.li@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
(cherry picked from commit b8e69361bd)
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2024-10-22 17:16:07 +00:00 committed by Lucas Gass
parent 5eed8269b2
commit 9007d54b02
3 changed files with 14 additions and 26 deletions

View File

@ -110,17 +110,11 @@
.actions {
display: block;
&:first-child {
.btn-link {
padding: .375rem .75rem;
}
.btn-link {
padding-left: 0;
}
a {
@include border-radius-all( 4px );
background-color: #F2F2EF;
border: 1px solid #DDD;
display: block;
font-size: 120%;
font-weight: bold;
@ -210,9 +204,9 @@
.cart-actions {
display: flex;
.btn {
flex-grow: 1;
padding: .375rem .75rem;
.btn + .btn {
line-height: 2;
margin-left: .5em;
}
}

View File

@ -280,12 +280,6 @@ th {
.actions {
white-space: nowrap;
&:first-child {
.btn-link {
padding-left: 0;
}
}
}
.advsearch_limit {

View File

@ -16,18 +16,18 @@
[% END # / OPACHoldRequests %]
[% IF ( RecallsEnabled ) %]
<span class="actions"><a class="btn btn-link btn-sm recall" href="/cgi-bin/koha/opac-recall.pl?biblionumber=[% items.biblionumber | html %]"><i class="fa-solid fa-book-bookmark" aria-hidden="true"></i> Place recall</a></span>
<span class="actions"><a class="btn btn-link btn-sm recall" href="/cgi-bin/koha/opac-recall.pl?biblionumber=[% items.biblionumber | html %]"><i class="fa-fw fa-solid fa-book-bookmark" aria-hidden="true"></i> Place recall</a></span>
[% END %]
[% IF ( LoginEnabled ) %]
[% IF items.artreqpossible %]
<span class="actions"><a href="/cgi-bin/koha/opac-request-article.pl?biblionumber=[% items.biblionumber | uri %]" class="btn btn-link btn-sm"><i class="fa-solid fa-file-lines" aria-hidden="true"></i> Request article</a></span>
<span class="actions"><a href="/cgi-bin/koha/opac-request-article.pl?biblionumber=[% items.biblionumber | uri %]" class="btn btn-link btn-sm"><i class="fa-fw fa-solid fa-file-lines" aria-hidden="true"></i> Request article</a></span>
[% END %]
[% END %]
[% IF ( TagsInputEnabled ) %]
[% IF ( loggedinusername ) %]
<span class="actions"><a id="tag_add[% items.biblionumber | html %]" href="#" class="tag_add btn btn-link btn-sm"><i class="fa fa-tag" aria-hidden="true"></i> Add tag</a></span>
<span class="actions"><a id="tag_add[% items.biblionumber | html %]" href="#" class="tag_add btn btn-link btn-sm"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Add tag</a></span>
<div id="tagform[% items.biblionumber | html %]" class="tag_results_input form-inline" style="display:none;">
<label for="newtag[% items.biblionumber | html %]">New tag(s), separated by a comma:</label>
<input type="text" name="newtag[% items.biblionumber | html %]" id="newtag[% items.biblionumber | html %]" class="form-control form-control-sm newtag" maxlength="100" />
@ -40,7 +40,7 @@
[% ELSE %]
<span class="actions">
<span class="login4tags">
<a class="btn btn-link btn-sm loginModal-trigger" href="/cgi-bin/koha/opac-user.pl"><i class="fa fa-tag" aria-hidden="true"></i> Log in to add tags</a>
<a class="btn btn-link btn-sm loginModal-trigger" href="/cgi-bin/koha/opac-user.pl"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Log in to add tags</a>
</span>
</span>
[% END # IF loggedinusername %]
@ -48,20 +48,20 @@
[% IF ( ListsEnabled ) %]
[% IF ( shelf AND op == 'view' ) %]
<span class="actions"><a href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=[% items.biblionumber | uri %]" class="addtoshelf btn btn-link btn-sm"><i class="fa fa-list" aria-hidden="true"></i> Save to another list</a></span>
<span class="actions"><a href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=[% items.biblionumber | uri %]" class="addtoshelf btn btn-link btn-sm"><i class="fa fa-fw fa-list" aria-hidden="true"></i> Save to another list</a></span>
[% IF can_remove_biblios %]
<span class="actions"><a class="btn btn-link btn-sm removeitems" data-biblionumber="[% items.biblionumber | html %]" href="#"><i class="fa fa-remove" aria-hidden="true"></i> Remove from this list</a></span>
<span class="actions"><a class="btn btn-link btn-sm removeitems" data-biblionumber="[% items.biblionumber | html %]" href="#"><i class="fa fa-fw fa-remove" aria-hidden="true"></i> Remove from this list</a></span>
[% END %]
[% ELSE %]
<span class="actions"><a class="addtoshelf btn btn-link btn-sm" href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=[% items.biblionumber | html %]"><i class="fa fa-list" aria-hidden="true"></i> Save to lists</a></span>
<span class="actions"><a class="addtoshelf btn btn-link btn-sm" href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=[% items.biblionumber | html %]"><i class="fa fa-fw fa-list" aria-hidden="true"></i> Save to lists</a></span>
[% END # /IF ( shelf AND op == 'view' ) %]
[% END # /IF Koha.Preference( 'opacuserlogin' ) %]
[% IF ( CartEnabled ) %]
[% IF ( items.incart ) %]
<span class="actions cart-actions"><a data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm addtocart cart[% items.biblionumber | html %]" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> In your cart</a> <a data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm remove cartRemove cartR[% items.biblionumber | html %]" href="#">(remove)</a></span>
<span class="actions cart-actions"><a data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm addtocart cart[% items.biblionumber | html %]" href="#"><i class="fa fa-fw fa-shopping-cart" aria-hidden="true"></i> In your cart</a> <a data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm remove cartRemove cartR[% items.biblionumber | html %]" href="#">(remove)</a></span>
[% ELSE %]
<span class="actions cart-actions"><a aria-label="Add [% items.title | html %] to the cart" data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm addtocart cart cart[% items.biblionumber | html %]" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</a> <a style="display:none;" data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm remove cartRemove cartR[% items.biblionumber | html %]" href="#">(remove)</a></span>
<span class="actions cart-actions"><a aria-label="Add [% items.title | html %] to the cart" data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm addtocart cart cart[% items.biblionumber | html %]" href="#"><i class="fa fa-fw fa-shopping-cart" aria-hidden="true"></i> Add to cart</a> <a style="display:none;" data-biblionumber="[% items.biblionumber | html %]" class="btn btn-link btn-sm remove cartRemove cartR[% items.biblionumber | html %]" href="#">(remove)</a></span>
[% END %]
[% END # / IF opacbookbag %]
</div>