From 9007d54b02ee1cc83c816cafd53e95333aa6c70e Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 22 Oct 2024 17:16:07 +0000
Subject: [PATCH] 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 b8e69361bd8a0021f272636c61b2be51ab10ba01)
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../bootstrap/css/src/_responsive.scss         | 16 +++++-----------
 .../opac-tmpl/bootstrap/css/src/opac.scss      |  6 ------
 .../en/includes/title-actions-menu.inc         | 18 +++++++++---------
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 3339e0c919..082a9cba4c 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -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;
         }
     }
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index c852515e27..ba62d7a779 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -280,12 +280,6 @@ th {
 
 .actions {
     white-space: nowrap;
-
-    &:first-child {
-        .btn-link {
-            padding-left: 0;
-        }
-    }
 }
 
 .advsearch_limit {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/title-actions-menu.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/title-actions-menu.inc
index 79db98d6e4..99fb97ee1c 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/title-actions-menu.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/title-actions-menu.inc
@@ -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>