Bug 41645: Make self-checkout use responsive CSS

This change makes the responsive CSS work with self-checkout.
This changes also includes a few minor HTML changes to make the
display look good both on large and small screens.

Test plan:
0. Apply the patch
1. Go to http://localhost:8080/cgi-bin/koha/sco/sco-main.pl
2. Log in as the koha user
3. Check out barcodes 39999000004571 and 39999000001310
4. In an incognito window, add holds and charges for the
koha user
5. Go back to http://localhost:8080/cgi-bin/koha/sco/sco-main.pl
and log in as the koha user
6. Using your F12 dev tools, look at the interface with different
widths
7. Note that the datatables have a responsive design which looks
good on a mobile view
8. 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:03:41 +00:00 committed by Lucas Gass
parent 28b479d114
commit 9b2f2fcf6f
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
1 changed files with 10 additions and 7 deletions

View File

@ -19,6 +19,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 %]
@ -100,21 +101,23 @@
[% END %]
</h2></legend
>
<div class="row">
<div class="row mb-1">
<div class="col">
<label for="barcode">Scan a new item or enter its barcode[% IF batch_checkouts_allowed %](or for <b>multiple checkouts only,</b> enter a barcode list, one barcode per line)[% END %]:</label>
</div>
<div class="col-3">
</div>
<div class="row mb-1">
<div class="col-12 col-lg-4">
[% IF batch_checkouts_allowed %]
<textarea id="barcode" name="barcode" rows="10" cols="30" class="focus form-control"></textarea>
[% ELSE %]
<input id="barcode" name="barcode" size="20" type="text" class="focus form-control" autocomplete="off" />
[% END %]
</div>
<div class="col-auto">
</div>
<div class="row mb-1">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col ml-auto">
<button type="button" id="logout_form" class="btn btn-info"><i class="fa fa-check" aria-hidden="true"></i> Finish</button>
<input type="hidden" name="op" value="cud-checkout" />
<input type="hidden" name="patronid" value="[% patronid | html %]" />
@ -186,9 +189,9 @@
<th class="all anti-the">Title</th>
<th>Call number</th>
<th class="psort">Due</th>
<th class="all no-sort">Renew</th>
<th class="no-sort">Renew</th>
[% IF Koha.Preference('SCOAllowCheckin') %]
<th class="all no-sort">Check in</th>
<th class="no-sort">Check in</th>
[% END %]
[% UNLESS ( nofines ) %]
<th>Fines</th>