From d6a41289dcb9eaf59d42c70ebb65f8a13215ceb6 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 18 Oct 2022 18:39:21 +0000 Subject: [PATCH] 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
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 Signed-off-by: Martin Renvoize --- .../prog/css/src/_variables.scss | 1 + .../prog/css/src/staff-global.scss | 44 ++++++++++--------- .../modules/reports/guided_reports_start.tt | 1 + 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 42b53140f8..cfae4151c3 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -1,6 +1,7 @@ $green-text-color: #006100; $background-color-primary: #408540; $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9); +$background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 30 ); // Copied from Bootstrap 5 without system-ui because of // https://infinnie.github.io/blog/2017/systemui.html diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index b9f4ec04ff..68a21d581f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -593,10 +593,6 @@ h4, h5, h6 { margin: .5em 0; - - a, a:link, a:visited { - color: #000; - } } hr { @@ -1627,7 +1623,6 @@ i { margin: 1em auto; padding: .5em; text-align: center; - display: table; width: 65%; max-width: 600px; @@ -3393,28 +3388,33 @@ label { } } -.modal-header { - .closebtn { - margin-top: 4px; - } -} - .closebtn { color: #000; - filter: alpha(opacity = 20); + cursor: pointer; float: right; font-size: 21px; font-weight: bold; line-height: 1; - opacity: .2; + margin-top: 4px; + text-decoration: none; + text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 ); - &:hover, - &:focus { + &:focus, + &:hover { + text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 ); + } + + &:active { + box-shadow: none; + text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 ); + } +} + +.modal-header { + border-bottom: 1px solid $background-color-secondary; + + h3 { color: #000; - cursor: pointer; - filter: alpha(opacity = 50); - opacity: .5; - text-decoration: none; } } @@ -3432,13 +3432,17 @@ label { } .modal-content { - background-color: rgb(211, 223, 204); + background-color: $background-color-modal; fieldset { box-shadow: none; } } +.modal-footer { + border-top: 1px solid $background-color-secondary; +} + .btn-group { label, select { diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt index 650313c2f1..b5face558b 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt @@ -2320,6 +2320,7 @@ \
\ \