53 views
   owned this note
# Bootstrap5 notes Here's what I (Jake) have found. If you aren't understanding one of my points, just let me know via Mattermost ;-) ### Combined follow-up notes from second pass ##### OPAC - [ ] `[visual] {various}` The search box placeholder text is the same colour as regular text. Perhaps it could be made to have a subtly lower opacity (i.e. somewhere between 0.75---0.90)? - See [Bug 37412](https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412) - [ ] `re: Hovering over actions links or views tabs does not change the colour of the link text; only the fontawesome icons change` Issue still remains, I am going to suppose the OPAC is on the to-do list still at this stage - Just noticed that there is also no visual indication when you hover over the `Browse results` link in `nav_results`, also on `opac-detail.pl`. This could also do with the same treatment as the above point, one would suggest? - I have made some changes to address this in the latest push ##### Staff client - [ ] `re: Claims tab counts are white when selected, matching bg` This apears fixed, but has introduced a new bug on the tab being inconsistent with the others when loading the page. [Screenshot of what I mean](https://koha-hedgedoc.servers.llownd.net/uploads/c4e90bbc-5bf3-4f5a-bc6d-21eb54de33f7.png). - `re: nav-tabs nav-link does not differentiate between active and non-active. Previously, an active nav-link in this area would show a solid white underline.` Lovely solution to this, I like the partially opaque roll-over behaviour now. ++ - `re: Notes box seems unnecessarily tall, and the way it is out of line with the title is a little jarring.` Again, looks much better now. Thanks for your time on this. - `re: ERM module still appears to need looking at for Bootstrap 5` Let me know when you need a tester for this. - `re: nav-tabs on this page appear unstyled` This still appears the same - `re: The colours used to show a healthy component (e.g. Memcached) are of poor contrast, and need looking at` I like the light blue to show all is okay, with the red and yellow being flashy enough to catch your attention when it isn't. ++ ### OPAC - [x] `[visual] {various}` When logged in, the account dropdown menu links overflow outside the dropdown box - [ ] `[accessibility/readability] {opac-details.pl?biblionumber=x}` Hovering over actions links or views tabs does not change the colour of the link text; only the fontawesome icons change - [ ] `[accessibility/readability] {various}` The behaviour noted in point two also appears to be happening for any elements that use the `btn btn-link` class and have a fontawesome icon attached - Possibly a wider bug? - [ ] `[accessibility/readability] {opac-details.pl?biblionumber=x}` Hovering over links in the dropdown menus found under the actions block does not result in any noticable colour or contrast change on the text itself - I believe this has been addressed, with the caveat that the contents of the OPACSearchForTitleIn preference need to be updated with new Bootstrap 5 classes. See [Bug 36805](https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=36805) for a related discussion. ### Staff client - [x] `[accessibility/readability] {circ/circulation.pl?borrowernumber=x}` Claims tab counts are white when selected, matching bg - [x] `[visual] {various}` Modal X symbols aren't all aligned well, e.g. on add message modal in patron records - Perhaps they could also be red? - [x] `[accessibility/readability] {various}` Link hover colour isn't very contrasting with the default link colour. This exists in the Bootstrap3 branch, but maybe this is an opportunity to reconsider this? - WACG suggests: `"Check that hovering over the link causes a visual enhancement (such as an underline, font change, etc.)"` which can also perhaps be interpreted as permitting good constrast ratios through their "etc" - [x] `[accessibility/readability & visual] {various}` nav-tabs nav-link does not differentiate between active and non-active. Previously, an active nav-link in this area would show a solid white underline. - [x] `[accessibility/readability] {various}` Processing pop-up three dots are lime green, and hard to see on the light-grey background - [x] `[accessibility/readability] {mainpage.pl}` Hovering over the main pills found on mainpage.pl sometimes doesn't change the colour of the second fontawesome icon (e.g. advanced search) - Perhaps using a slightly-darker-than-used white can still convey the contrast between top and bottom icons? - [x] `[accessibility/readability & visual] {cataloguing/addbiblio.pl?frameworkcode=}` Subfield input box has no clearly defined outline to make it obvious to the user it is an input field. Additionally, the field appears too narrow on my 35cm Mac display - [x] `[bug] {guided_reports.pl?id=x&op=run}` Edit dropdown delete link does not match the styling of the other dropdown elements, and clicking download results in the delete report alert - Looks like an element hasn't been closed properly somewhere - [x] `[visual] {tools/import_borrowers.pl}` Notes box seems unnecessarily tall, and the way it is out of line with the title is a little jarring. [Perhaps this mockup would be better](https://koha-hedgedoc.servers.llownd.net/uploads/36bfb52e-7a19-4596-923c-f3c377bb8724.png)? - [x] `[bug] {rotation_collections/rotatingCollections.pl}` Similar to in guided_reports.pl, the delete button on the dropdown is incorrectly styled - [x] `[bug] {tools/scheduler.pl}` Scheduled tasks table appears to be unstyled - [ ] `[bug] {erm/erm.pl}` ERM module still appears to need looking at for Bootstrap 5 - [x] `[visual] {admin/library_groups.pl}` Add group modal has a lot of unnecessary whitespace, and indentation for labels appears wrong - `[moan] {admin/smart-rules.pl}` Someone needs to sort that million-column-long table out! Maybe I'll do it one day soon ;-) - [ ] `[bug] {admin/curbside_pickup.pl}` nav-tabs on this page appear unstyled - See [Bug 35838](https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=35838) - [x] `[accessibility/readability & visual] {plugins/plugins-home.pl}` When a plugin is enabled, the label is dark green with black text. This is not readable. - The dropdown links for plugin actions also appear to be inconsistent with other parts of the system, though this is only a visual issue - [ ] `[visual] {admin/record_sources}` The full width of the page does not appear to be getting used, as if there is a right-aligned nav expected - This looks like part of ERM / Vue. May be out of scope for this work. - [x] `[visual] {admin/smtp_servers.pl}` The alignment of the default configuration details is unusual -- it appears to be 25% of the way across the screen - [x] `[visual] {about.pl}` The colours used to show a healthy component (e.g. Memcached) are of poor contrast, and need looking at - I like the use of the darker green, but we probably need to use white & bold text now