Bug 41647: Fix self-checkin to use responsive CSS

Test plan:
0. Apply the patch
1. Enable the SelfCheckInModule system preference
2. Go to http://localhost:8080/cgi-bin/koha/sci/sci-main.pl
3. Enter barcode 39999000004571 into input box, click "Submit",
then click "Check in"
4. Using your F12 dev tools, look at the interface with different
widths
5. Note that the page looks good on both large and small screens
6. Note that the page stays contained to the small screen size
and you don't have to scroll horizontally to see all the content

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Baptiste Wojtkowski <baptiste.wojtkowski@biblibre.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
David Cook 2026-01-16 04:37:15 +00:00 committed by Lucas Gass
parent f73b738db3
commit ea16d2288d
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
1 changed files with 9 additions and 5 deletions

View File

@ -37,7 +37,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Koha" />
<!-- leave this for stats -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
[% IF ( Koha.Preference('OpacFavicon') ) %]
<link rel="shortcut icon" href="[% Koha.Preference('OpacFavicon') | url %]" type="image/x-icon" />
[% ELSE %]
@ -145,14 +145,18 @@
<form id="scan_form" name="scan_form" method="post" action="/cgi-bin/koha/sci/sci-main.pl">
[% INCLUDE 'csrf-token.inc' %]
<legend class="sr-only">Scan</legend>
<div class="row">
<div class="col-auto">
<div class="row mb-1">
<div class="col">
<label for="barcode_input">Scan the item or enter its barcode:</label>
</div>
<div class="col-4">
</div>
<div class="row mb-1">
<div class="col-12 col-lg-4">
<input id="barcode_input" name="barcode_input" size="20" type="text" class="focus form-control" autocomplete="off" />
</div>
<div class="col-auto">
</div>
<div class="row mb-1">
<div class="col">
<button id="sci_append_button" type="submit" class="btn btn-primary"> Submit </button>
</div>
</div>