Bug 41645 - Make self-checkout use responsive CSS
Summary: Make self-checkout use responsive CSS
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Self checkout (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: David Cook
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2026-01-16 01:13 UTC by David Cook
Modified: 2026-01-16 05:05 UTC (History)
2 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Comma delimited list of Sponsors:
Crowdfunding goal: 0
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 41645: Make self-checkout use responsive CSS (5.06 KB, patch)
2026-01-16 04:06 UTC, David Cook
Details | Diff | Splinter Review
Bug 41645: Make self-checkout use responsive CSS (5.11 KB, patch)
2026-01-16 05:04 UTC, David Nind
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description David Cook 2026-01-16 01:13:01 UTC
Bug 20168 added the the directive '@import "responsive";' to the bottom of ./koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss, so we've had media queries and responsive CSS in the sco.css file for about 5 years now, but... they don't actually work.

And it's because this one line of HTML is missing from koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt:

<meta name="viewport" content="width=device-width, initial-scale=1">

Once that line is added, the CSS media queries start to work. 

Of course, there's a bit more that needs to be done on top of that. The input for the barcode is too narrow and misplaced, the Checkouts datatable runs off the page. 

But those are manageable problems.
Comment 1 David Cook 2026-01-16 01:13:41 UTC
I had a librarian come to me wanting this to work on a phone, but it made me recall that I was sure that someone said at Kohacon25 in Wellington that they wanted the self checkout to be responsive so that roving librarians could use it on tablets... so this would be good for them.
Comment 2 David Cook 2026-01-16 04:06:50 UTC
Created attachment 191540 [details] [review]
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
Comment 3 David Nind 2026-01-16 05:04:53 UTC
Created attachment 191544 [details] [review]
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>
Comment 4 David Nind 2026-01-16 05:05:34 UTC
Have signed-off, but I didn't notice any horizontal scrolling required before the patch.