Bug 27777 - Improve tables on Point of Sale page for low screen resolutions
Summary: Improve tables on Point of Sale page for low screen resolutions
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Martin Renvoize
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 12580 13985
  Show dependency treegraph
 
Reported: 2021-02-24 16:20 UTC by Martin Renvoize
Modified: 2022-06-06 20:25 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.05.00,20.11.04


Attachments
Bug 27777: Set invoices table to fixed width (1.38 KB, patch)
2021-02-24 16:25 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions (2.74 KB, patch)
2021-02-24 17:06 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions (2.80 KB, patch)
2021-02-25 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions (2.86 KB, patch)
2021-03-04 17:34 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2021-02-24 16:20:27 UTC
At low resolutions or high zoom levels, the two tables on the point of sale page can overlap their allotted form fieldset boundaries.
Comment 1 Martin Renvoize 2021-02-24 16:25:50 UTC
Created attachment 117279 [details] [review]
Bug 27777: Set invoices table to fixed width

This invoices table on the point of sale page should be set to
`table-layout: fixed;` to prevent it from overflowing it's alloated
fieldset.

Test plan
1/ Play with various screen resolutions and zoom levels on the point of
sale page (This is easily achieved with chrome developer tools and the
'device toolbar' options.
2/ Apply the patch and build the css from it.
3/ Play with the various screen resolutions again and this time note
that the tables should not overflow their boundaries.
4/ Signoff
Comment 2 Owen Leonard 2021-02-24 17:06:50 UTC
Created attachment 117280 [details] [review]
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions

This alternate solution makes these minor changes:

- The Bootstrap grid classes are adjusted so that the breakpoint
  between the two-column layout and the single-column layout happens at
  a wider browser-width.
- The DataTable configurations are modified to set "autoWidth" to
  "false," which gives us a more fluid behavior.
Comment 3 Martin Renvoize 2021-02-25 10:58:25 UTC
Interesting.. I like your alternative.. though I actually removed the autoWidth in bug 26189.. confused why I'm not seeing the issues I saw there now here.
Comment 4 Martin Renvoize 2021-02-25 11:38:34 UTC
As discussed on IRC, the editable fields in the 'This sale' table currently make the table column widths jump around when they're invoked via click.. it would be great to resolve that here too :)
Comment 5 Martin Renvoize 2021-02-25 12:16:29 UTC
(In reply to Martin Renvoize from comment #4)
> As discussed on IRC, the editable fields in the 'This sale' table currently
> make the table column widths jump around when they're invoked via click.. it
> would be great to resolve that here too :)

See bug 27792
Comment 6 Martin Renvoize 2021-02-25 13:39:43 UTC
Created attachment 117322 [details] [review]
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions

This alternate solution makes these minor changes:

- The Bootstrap grid classes are adjusted so that the breakpoint
  between the two-column layout and the single-column layout happens at
  a wider browser-width.
- The DataTable configurations are modified to set "autoWidth" to
  "false," which gives us a more fluid behavior.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 7 Martin Renvoize 2021-02-25 13:40:29 UTC
I like Owens approach better and it works just as well, if not better..

Removing mine and signing off his :)
Comment 8 Katrin Fischer 2021-03-04 17:34:00 UTC
Created attachment 117754 [details] [review]
Bug 27777: (alternate) Improve tables on Point of Sale page for low screen resolutions

This alternate solution makes these minor changes:

- The Bootstrap grid classes are adjusted so that the breakpoint
  between the two-column layout and the single-column layout happens at
  a wider browser-width.
- The DataTable configurations are modified to set "autoWidth" to
  "false," which gives us a more fluid behavior.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Jonathan Druart 2021-03-05 12:52:12 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 10 Fridolin Somers 2021-03-08 15:53:50 UTC
Pushed to 20.11.x for 20.11.04
Comment 11 Andrew Fuerste-Henry 2021-03-14 19:40:19 UTC
Doesn't apply cleanly to 20.05, please rebase if needed