Bootstrap OPAC: Current charges not aligned properly on mobile device

[Terran McCanna]

In 3.6.1 with Bootstrap OPAC:

The tables listing the current charges do not align up properly when 1) The window is too narrow (like on a mobile device) and 2) The library does *not* take online credit card payments.

See attached screenshot for example.

[Garry Collum (gcollum)]

This issue is caused from column headers being defined in CSS that only appear when the table is collapsed on smallish screens, and the table is presented in a vertical format. The CSS is as follows:

    .chargesTable td:nth-of-type(1):before { content: "Select"; display: flex; }
    .chargesTable td:nth-of-type(2):before { content: "Owed"; display: flex; }
    .chargesTable td:nth-of-type(3):before { content: "Billing Type"; display: flex;}

It happens when Credit Card payment is not turned on because the 'select' column does not exist.

I don't think that this table has enough columns displayed to worry about presenting it in a vertical format.

The attached patch removes the class names from the table that render it in a vertical format and wraps the table in a div with 'table-responsive' class. An image of the results is attached.

Also, if column names are defined in CSS, do they get translated? Something to ask Eva to look at on her small screens.

A proposed patch is at https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/gcollum/lp1928005-Bootstrap-opac-charges-not-aligned

[Terran McCanna (tmccanna)]

Works for me! My sign off is at:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1928005-bootstrap-opac-charges-not-aligned-signoff

[Galen Charlton (gmc)]

Pushed to master, rel_3_7, and rel_3_6. Thanks, Garry and Terran!