Bug 31753

Summary: Dialog boxes inside of modals don't seem wide enough
Product: Koha Reporter: Lucas Gass <lucas>
Component: CirculationAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Martin Renvoize <martin.renvoize>
Severity: enhancement    
Priority: P5 - low CC: david, gmcharlt, katrin.fischer, kyle.m.hall, martin.renvoize
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.11.00
Bug Depends on: 30952    
Bug Blocks:    
Attachments: Screenshot of problem
Bug 31753: Dialog boxes inside of modals don't seem wide enough
Bug 31753: Dialog boxes inside of modals don't seem wide enough
Bug 31753: Dialog boxes inside of modals don't seem wide enough
Bug 31753: (follow-up) lighten headers more
Side by side comparisons

Description Lucas Gass 2022-10-12 22:52:18 UTC
Created attachment 141757 [details]
Screenshot of problem

The dialog boxes inside of modals don't quite look right. They seem to lack the proper width.
Comment 1 Owen Leonard 2022-10-18 18:08:52 UTC
*** Bug 31836 has been marked as a duplicate of this bug. ***
Comment 2 Owen Leonard 2022-10-18 19:23:35 UTC
*** Bug 31857 has been marked as a duplicate of this bug. ***
Comment 3 Owen Leonard 2022-10-19 11:22:28 UTC
Created attachment 142145 [details] [review]
Bug 31753: Dialog boxes inside of modals don't seem wide enough

This patch makes some tweaks to the style of Bootstrap modals in the
staff interface, including making a correction to the style of .dialog
<div>s within modals.

The patch makes a correction to the modal markup generated by the guided
reports template for SQL previews so that the modal footer displays
correctly.

The patch also removes CSS which makes links inside headings the same
color as the heading text. The effect of this was to make links
invisible in the headings of hold confirmation modals.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Test the hold confirmation modal in check-in:
  - Place a hold on an available title.
  - Check in an item from that record and confirm that the modal
    looks correct. The "Check in message" box should take up the whole
    width of the modal, and the links in the modal header should be the
    standard green.
- Test the SQL preview modal in reports:
  - Go to Reports -> Use saved.
  - Click the actions menu associated with one of your saved reports and
    choose "Preview SQL." The modal should look correct.
- Other modals which might be tested: MARC previews from the
  bibliographic detail page, the cataloging search page, the Z39.50
  search page, etc.
Comment 4 David Nind 2022-10-19 18:59:32 UTC
Created attachment 142202 [details] [review]
Bug 31753: Dialog boxes inside of modals don't seem wide enough

This patch makes some tweaks to the style of Bootstrap modals in the
staff interface, including making a correction to the style of .dialog
<div>s within modals.

The patch makes a correction to the modal markup generated by the guided
reports template for SQL previews so that the modal footer displays
correctly.

The patch also removes CSS which makes links inside headings the same
color as the heading text. The effect of this was to make links
invisible in the headings of hold confirmation modals.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Test the hold confirmation modal in check-in:
  - Place a hold on an available title.
  - Check in an item from that record and confirm that the modal
    looks correct. The "Check in message" box should take up the whole
    width of the modal, and the links in the modal header should be the
    standard green.
- Test the SQL preview modal in reports:
  - Go to Reports -> Use saved.
  - Click the actions menu associated with one of your saved reports and
    choose "Preview SQL." The modal should look correct.
- Other modals which might be tested: MARC previews from the
  bibliographic detail page, the cataloging search page, the Z39.50
  search page, etc.

Signed-off-by: David Nind <david@davidnind.com>
Comment 5 David Nind 2022-10-19 19:00:54 UTC
I think I somewhat preferred the lighter green for the headers/footers for the modal windows... 8-)
Comment 6 Martin Renvoize 2022-10-21 10:32:47 UTC
Hate to say it, but I think I agree with David.. I thought I'd prefer the friendlier green for the modal headers/footers but actually I find the contrast between the linked green and the background of the header/footer not as nice... wonder if there's a slight middle ground.

I'm not a big color pallet guru though.. I'd love to see our greens a little more standardized.. I prefer our bugzilla/koha-community.org/git.koha-community.org green to the green we use for the new search header bar for example.... though that doesn't really relate to this directly.
Comment 7 Martin Renvoize 2022-10-21 11:01:34 UTC
Created attachment 142326 [details] [review]
Bug 31753: Dialog boxes inside of modals don't seem wide enough

This patch makes some tweaks to the style of Bootstrap modals in the
staff interface, including making a correction to the style of .dialog
<div>s within modals.

The patch makes a correction to the modal markup generated by the guided
reports template for SQL previews so that the modal footer displays
correctly.

The patch also removes CSS which makes links inside headings the same
color as the heading text. The effect of this was to make links
invisible in the headings of hold confirmation modals.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Test the hold confirmation modal in check-in:
  - Place a hold on an available title.
  - Check in an item from that record and confirm that the modal
    looks correct. The "Check in message" box should take up the whole
    width of the modal, and the links in the modal header should be the
    standard green.
- Test the SQL preview modal in reports:
  - Go to Reports -> Use saved.
  - Click the actions menu associated with one of your saved reports and
    choose "Preview SQL." The modal should look correct.
- Other modals which might be tested: MARC previews from the
  bibliographic detail page, the cataloging search page, the Z39.50
  search page, etc.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 8 Martin Renvoize 2022-10-21 11:01:39 UTC
Created attachment 142327 [details] [review]
Bug 31753: (follow-up) lighten headers more

OK.. colors are hard!.. This patch increases the 'lighten' parameter a
little and hopefully improves the headers and footers of modals slighty
back to being less 'bright' green.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 9 Martin Renvoize 2022-10-21 11:03:00 UTC
OK.. colors shouldn't hold this up... so Passing QA.

I've added a follow-up with my attempt at a minor "improvement" to the final color however..

Attaching screen shot of 'before', 'first patch', 'follow-up' side by side for comparison now.
Comment 10 Martin Renvoize 2022-10-21 11:03:40 UTC
Created attachment 142328 [details]
Side by side comparisons
Comment 11 Tomás Cohen Arazi 2022-10-21 13:27:14 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!
Comment 12 Katrin Fischer 2022-10-21 17:56:46 UTC
I like 'follow-up' :)