Bug 26189

Summary: Table options on points of sale misaligned
Product: Koha Reporter: Katrin Fischer <katrin.fischer>
Component: Fines and feesAssignee: Martin Renvoize <martin.renvoize>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: minor    
Priority: P5 - low CC: aleisha, katrin.fischer, lucas, martin.renvoize, oleonard, sally.healey
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27777
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.04
Bug Depends on: 26160    
Bug Blocks: 13985    
Attachments: Bug 26189: Improve styling of POS table headers
Bug 26189: unset label width in payForm
Bug 26189: Improve styling of datatables within fieldsets
Bug 21689: Unset label width restriction
Bug 26189: Improve styling of datatables within fieldsets
Bug 26189: Improve styling of datatables within fieldsets
Bug 26189: Improve styling of datatables within fieldsets
Bug 26189: Improve styling of datatables within fieldsets

Description Katrin Fischer 2020-08-10 19:59:24 UTC
The table paging, sorting, and other options on the "items for purchase" table on the Points of sale page are misaligned and don't work well with the smaller table width.
Comment 1 Martin Renvoize 2020-08-12 13:31:36 UTC
Created attachment 108106 [details] [review]
Bug 26189: Improve styling of POS table headers
Comment 2 Martin Renvoize 2020-08-12 13:33:23 UTC
Need a little CSS help here guys.. I can't for the life of me work out why the label + select/inputs are wrapping over two lines.
Comment 3 Lucas Gass 2020-08-12 18:40:48 UTC
Created attachment 108156 [details] [review]
Bug 26189: unset label width in payForm
Comment 4 Lucas Gass 2020-08-12 18:41:37 UTC
Maybe just unset the width of labels inside of #payForm?
Comment 5 Martin Renvoize 2020-08-13 08:37:43 UTC
Created attachment 108164 [details] [review]
Bug 26189: Improve styling of datatables within fieldsets

This patch improves the responsive layout of datatables (and tables
generally) by setting layout to 'fixed' and and enabled word-wrap on
table cells.  We also reset the margins for datatables found inside
fieldsets such that the datatable properly utilises the available space
and we restore the default datatable label font weights.
Comment 6 Martin Renvoize 2020-08-13 08:37:46 UTC
Created attachment 108165 [details] [review]
Bug 21689: Unset label width restriction

The label width restriction within fieldsets causes issues for the
datatables header. Unsetting it explicitly here resolves the line
wrapping issues :)
Comment 7 Martin Renvoize 2020-08-13 08:38:46 UTC
(In reply to Lucas Gass from comment #4)
> Maybe just unset the width of labels inside of #payForm?

Dude!  That's genius, how did I not spot that.. fixes it up perfectly :)
Comment 8 Sally 2020-08-20 09:18:31 UTC
I received a conflict when trying to apply the patch:

Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt
error: Failed to merge in the changes.
Patch failed at 0001 Bug 26189: Improve styling of datatables within fieldsets
Comment 9 Martin Renvoize 2020-08-20 15:07:32 UTC
Created attachment 108743 [details] [review]
Bug 26189: Improve styling of datatables within fieldsets

Unset label width restriction: The label width restriction within
fieldsets causes issues for the datatables header. Unsetting it
explicitly here resolves the line wrapping issues :)

Reset margins for datatables found inside fieldsets such that the
datatable properly utilises the available space and restore the
default datatable label font weights.
Comment 10 Martin Renvoize 2020-08-20 15:09:44 UTC
I've rebased and simplified the patchset.

You will need to run the CSS build to test this. (If testing on a sandbox, you can use the 'Build CSS' option from the 'Actions' menu)
Comment 11 PTFS Europe Sandboxes 2020-08-20 15:22:39 UTC
Created attachment 108744 [details] [review]
Bug 26189: Improve styling of datatables within fieldsets

Unset label width restriction: The label width restriction within
fieldsets causes issues for the datatables header. Unsetting it
explicitly here resolves the line wrapping issues :)

Reset margins for datatables found inside fieldsets such that the
datatable properly utilises the available space and restore the
default datatable label font weights.

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 12 Sally 2020-08-20 15:23:50 UTC
(In reply to Martin Renvoize from comment #10)
> I've rebased and simplified the patchset.
> 
> You will need to run the CSS build to test this. (If testing on a sandbox,
> you can use the 'Build CSS' option from the 'Actions' menu)

No worries, thanks for the tip - it's probably paranoia but I always use 'Build CSS' if I think the patch touches anything styling-wise.  

Signed off.  :)
Comment 13 Martin Renvoize 2020-08-20 19:29:57 UTC
(In reply to Sally from comment #12)
> (In reply to Martin Renvoize from comment #10)
> > I've rebased and simplified the patchset.
> > 
> > You will need to run the CSS build to test this. (If testing on a sandbox,
> > you can use the 'Build CSS' option from the 'Actions' menu)
> 
> No worries, thanks for the tip - it's probably paranoia but I always use
> 'Build CSS' if I think the patch touches anything styling-wise.  
> 
> Signed off.  :)

Many thanks for testing 😀, very wise to use the Build CSS options, I must admit I'm terrible at remembering to mention it in the test plans.
Comment 14 Katrin Fischer 2020-08-20 21:24:46 UTC
Sally, always happy to QA patches you tested :)
Comment 15 Katrin Fischer 2020-08-20 21:25:17 UTC
Created attachment 108759 [details] [review]
Bug 26189: Improve styling of datatables within fieldsets

Unset label width restriction: The label width restriction within
fieldsets causes issues for the datatables header. Unsetting it
explicitly here resolves the line wrapping issues :)

Reset margins for datatables found inside fieldsets such that the
datatable properly utilises the available space and restore the
default datatable label font weights.

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 16 Jonathan Druart 2020-08-24 08:53:02 UTC
Created attachment 108973 [details] [review]
Bug 26189: Improve styling of datatables within fieldsets

Unset label width restriction: The label width restriction within
fieldsets causes issues for the datatables header. Unsetting it
explicitly here resolves the line wrapping issues :)

Reset margins for datatables found inside fieldsets such that the
datatable properly utilises the available space and restore the
default datatable label font weights.

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 17 Jonathan Druart 2020-08-24 10:33:49 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 18 Lucas Gass 2020-09-04 19:36:11 UTC
backported to 20.05.x for 20.05.04
Comment 19 Aleisha Amohia 2020-09-10 04:12:04 UTC
missing dependencies, not backported to 19.11.x