|
Description
Martin Renvoize (ashimema)
2020-04-22 06:36:09 UTC
Created attachment 107884 [details] [review] Bug 25242: Improve column wrapping and overflow for tables This patch attempts to improve the column wrapping and prevent datatabels from overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to various tables in the OPAC (Holds table is a good one) and 'play' with various window sizes and zoom levels. 3/ The table should not overlap with right navigation content 4/ Signoff Sources: * https://stackoverflow.com/questions/19571017/how-do-i-fix-long-column-value-issue-which-breaks-table-outside-of-container-us * https://stackoverflow.com/questions/38635412/how-to-fix-jquery-datatables-from-overflowing-outside-parent-div-in-internet-exp/38921912 * https://datatables.net/forums/discussion/21110 Created attachment 107897 [details] [review] Bug 25242: Improve column wrapping and overflow for tables This patch attempts to improve the column wrapping and prevent datatabels from overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to various tables in the OPAC (Holds table is a good one) and 'play' with various window sizes and zoom levels. 3/ The table should not overlap with right navigation content 4/ Signoff Signed-off-by: Owen Leonard <oleonard@myacpl.org> Created attachment 108348 [details] [review] Bug 25242: Improve column wrapping and overflow for tables This patch attempts to improve the column wrapping and prevent datatabels from overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to various tables in the OPAC (Holds table is a good one) and 'play' with various window sizes and zoom levels. 3/ The table should not overlap with right navigation content 4/ Signoff Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 108438 [details] [review] Bug 25242: Improve column wrapping and overflow for tables This patch attempts to improve the column wrapping and prevent datatabels from overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to various tables in the OPAC (Holds table is a good one) and 'play' with various window sizes and zoom levels. 3/ The table should not overlap with right navigation content 4/ Signoff Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 108439 [details] [review] Bug 25242: (QA follow-up) Colwidth on results table Prior to this patch, the column width on the opac-results table were not fixed or calculated by a datatable; As such when we introduced the 'table-layout: fixed' property all columns were given equal share of the table, which resulted in most cases in a three way split between a checkbox, an empty cell and the actual content. This patch sets the width for the selectcol to '1ch' for the single character checkbox and updates the second columns class to 'numcol' as it is not used for selection but rather result numbering and sets a fixed width of '4ch' allowing for results upto 3 digits (plus the period) to display correctly without wrapping. Test plan 1/ Apply the patches and run the yarn build process to update the .css 2/ Perform a search and varify that the results table looks reasonable 3/ Disable OPACHiddenItems and perform a search again. 4/ Confirm the table looks reasonable still 5/ Signoff Oops, this one slipped through QA without the results table being checked properly.. This table is NOT a datatable like the others and thus didn't have authwidth being calculated. The followup corrects the display of this table.. I have tried to catch all other tables during my own testing, and am happy to provide further followups if we spot anything post push. On https://developer.mozilla.org/en-US/docs/Web/CSS/word-break word-break: break-word; is marked as deprecated Do we really need it? Sounds like perhaps we no longer do.. break-all appears ot be the modern equivilent on all browsers. Created attachment 108574 [details] [review] Bug 25242: (QA follow-up) Remove deprecated break-word It appears break-word is now deprecated in Firefox and instead all browsers now support break-all as the definitive. Pushed to master for 20.11, thanks to everybody involved! I feel like this has too many side effects, some have been filed, but I am seeing more. For example the course reserves tables no longer "squashes" nicely on smaller screens - the columns contents run into each other. I suggest to revert and start fresh. We could target just this table, but personally I'd rather work through fixing issues and keep with OPAC wide accessibility and responsive design fix provided here. We have the time left in the cycle, I'm happy to commit to providing fixes if you bring my attention to them. I did mention in the test plan to check various tables rather that just focus on the one I was targeting fixing. Problem is, we have lots of tables that display differently with varying settings. We clearly missed some combinations. I suspect that this setting is too radical: + table-layout: fixed; fixed Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells So that's why I said we should maybe reconsider and start over, trying to fix the initial issue differently than trying to work on all other tables - I think that could be easier after all. See also Owen's comment on bug 26263. Patches have been reverted from master. commit 4009bb04ad857ef042bba9a4d690dd21d84ac3dd Revert "Bug 25242: Improve column wrapping and overflow for tables" Created attachment 109444 [details] [review] Bug 25242: Improve column wrapping for holdingst This patch attempts to improve the column wrapping for the holdingst datatable and sets the tabel to fixed width to prevent overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to an item with holdings visible in the OPAC 3/ 'Play' with various window sizes and zoom levels. 4/ The table should not overlap with right navigation content 5/ Signoff NOTE: This is an alternative patch to those pushed and reverted that attempted to provide a global fix to overlap issues. This patch specifically targets just the holdings table in the opac detail view. Here we go again.. Needs Signoff Created attachment 109654 [details] [review] Bug 25242: Improve column wrapping for holdingst This patch attempts to improve the column wrapping for the holdingst datatable and sets the tabel to fixed width to prevent overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to an item with holdings visible in the OPAC 3/ 'Play' with various window sizes and zoom levels. 4/ The table should not overlap with right navigation content 5/ Signoff NOTE: This is an alternative patch to those pushed and reverted that attempted to provide a global fix to overlap issues. This patch specifically targets just the holdings table in the opac detail view. Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se> Created attachment 109663 [details] [review] Bug 25242: Improve column wrapping for holdingst This patch attempts to improve the column wrapping for the holdingst datatable and sets the tabel to fixed width to prevent overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to an item with holdings visible in the OPAC 3/ 'Play' with various window sizes and zoom levels. 4/ The table should not overlap with right navigation content 5/ Signoff NOTE: This is an alternative patch to those pushed and reverted that attempted to provide a global fix to overlap issues. This patch specifically targets just the holdings table in the opac detail view. Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se> Signed-off-by: Alexis Ripetti <alexis.ripetti@inLibro.com> Created attachment 109994 [details] [review] Bug 25242: Improve column wrapping for holdingst This patch attempts to improve the column wrapping for the holdingst datatable and sets the tabel to fixed width to prevent overlapping with other content on high zoom levels/low width screen sizes. Test plan 1/ Build the OPAC CSS from the updated SCSS 2/ Navigate to an item with holdings visible in the OPAC 3/ 'Play' with various window sizes and zoom levels. 4/ The table should not overlap with right navigation content 5/ Signoff NOTE: This is an alternative patch to those pushed and reverted that attempted to provide a global fix to overlap issues. This patch specifically targets just the holdings table in the opac detail view. Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se> Signed-off-by: Alexis Ripetti <alexis.ripetti@inLibro.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Pushed to master for 20.11, thanks to everybody involved! accessibility enhancement, choosing to backport backported to 20.05.x for 20.05.05 backported to 19.11.x for 19.11.12 Doesn't seem to affect 19.05.x not backporting. |