Bug 26189 - Table options on points of sale misaligned
Summary: Table options on points of sale misaligned
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: Fines and fees (show other bugs)
Version: master
Hardware: All All
: P5 - low minor (vote)
Assignee: Martin Renvoize
QA Contact: Testopia
URL:
Keywords:
Depends on: 26160
Blocks: 13985
  Show dependency treegraph
 
Reported: 2020-08-10 19:59 UTC by Katrin Fischer
Modified: 2020-09-10 04:12 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.04


Attachments
Bug 26189: Improve styling of POS table headers (2.55 KB, patch)
2020-08-12 13:31 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 26189: unset label width in payForm (754 bytes, patch)
2020-08-12 18:40 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 26189: Improve styling of datatables within fieldsets (2.89 KB, patch)
2020-08-13 08:37 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 21689: Unset label width restriction (1005 bytes, patch)
2020-08-13 08:37 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 26189: Improve styling of datatables within fieldsets (2.37 KB, patch)
2020-08-20 15:07 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 26189: Improve styling of datatables within fieldsets (2.44 KB, patch)
2020-08-20 15:22 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 26189: Improve styling of datatables within fieldsets (2.44 KB, patch)
2020-08-20 21:25 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 26189: Improve styling of datatables within fieldsets (2.49 KB, patch)
2020-08-24 08:53 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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