From 8025c1ccd2afba479f3ecf9e976df16c6bd4c849 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Tue, 10 Jan 2023 15:54:09 +0000 Subject: [PATCH] Bug 32605: Restore some form styling from before the redesign This patch pulls styles from pre-22.11 staff-global.scss related to the styling of fieldset.rows and contents. The old CSS is more verbose but it has been better proven to hold up in a variety of situations. The patch makes only one template change, a minor correction to the basket groups form. To test, apply the patch and rebuild the staff interface SCSS. Test as many forms as possible to confirm that everything is still correct. Forms affected are ones shown in the main body of the page, not in sidebars. Some good examples: Editing patrons, subscriptions, patron categories, notices, item types. This patch should help outstanding bugs 32513, 32543, and 32591 Signed-off-by: David Nind <david@davidnind.com> --- .../intranet-tmpl/prog/css/src/_forms.scss | 278 ++++++++++++++++-- .../prog/en/modules/acqui/basketgroup.tt | 2 +- 2 files changed, 253 insertions(+), 27 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss index c57ea1acec..d9d7caa54c 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss @@ -6,6 +6,7 @@ fieldset { color: #696969; float: left; font-weight: bold; + margin-bottom: 0; ~ * { clear: left; @@ -18,45 +19,270 @@ fieldset { } } -fieldset.rows ol { - $label-width: 12rem; - $gap-width: 1rem; +fieldset { + &.rows { + clear: left; + float: left; + margin: .9em 0 0; + padding: 1rem; + width: 100%; - padding: 0; + fieldset { + background-color: transparent; + margin: 1em; + padding: .3em; - li { - display: flex; - flex-wrap: wrap; - align-items: center; - width: 100%; + &.action { + padding: 1em; + } + } - & > * { - margin: 0 $gap-width 0 0; + &.inputnote { + clear: left; + float: left; + margin: 1em 0 0 11em; } - label, - .label { - font-weight: bold; - &:first-child { - align-self: start; - flex-basis: $label-width; - flex-shrink: 0; - flex-grow: 0; - text-align: right; + &.left { + label { + text-align: left; + width: 8em; + } + + li { + padding-bottom: .4em; + } + + span { + label { + text-align: left; + width: 8em; + } + } + } + + &.ui-accordion-content { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin: 0; + padding: 0; + width: 100%; + + table { + margin: 0; + } + } + + &.unselected { + background-color: #FFFFFF; + border: 0; + border-width: 0; + } + + caption { + font-size: 120%; + } + + div { + &.hint { + font-size: 105%; + margin: .5rem 0; + margin-left: 11rem; } + } + + label { + float: left; + font-weight: bold; + margin-right: 1rem; + text-align: right; + width: 10rem; &.error { - order: -1; - width: 100%; - padding-left: $label-width + $gap-width; + float: none; + margin-left: 1rem; + width: auto; + } + + &.inline { + display: inline; + float: none; + margin-left: 1rem; + } + + &.radio { + display: inline-block; + margin: 0 1rem 0 0; + padding: 0; + width: auto; + } + + &.yesno { + float: none; + width: auto; } } - div.hint { + legend { + // font-size: 110%; + // font-weight: bold; + // margin-left: 1em; + } + + li { + clear: left; + float: left; + list-style-type: none; width: 100%; - margin-top: .25rem; - padding-left: $label-width + $gap-width; + + &[aria-disabled="true"] { + color: #999; + } + + &.radio { + margin: 0; + padding-left: 7.5em; + width: auto; + + input + label { + margin-left: 0; + padding-left: 0; + } + + label { + float: none; + margin: 0 0 0 1em; + width: auto; + } + } + + input + label { + margin-left: 0; + padding-left: 0; + } + + fieldset { + margin-left: 7.5em; + + label { + width: 6em; + } + + legend { + font-size: 120%; + margin: 0 0 0 1em; + } + + li.radio { + padding-left: 0; + } + } + } + + ol { + list-style-type: none; + padding: 1em 1em 0; + + &.radio { + label { + float: none; + margin-left: 20px; + margin-right: 30px; + padding-left: 0; + vertical-align: middle; + width: auto; + + &.radio { + float: left; + margin-right: 1em; + margin-top: 0; + width: 10em; + } + } + + input { + &[type="checkbox"], + &[type="radio"] { + margin-left: -20px; + } + } + } + + table { + display: inline-block; + font-size: 105%; + margin: 0; + } + } + + p { + margin: 1em 0 1em 1em; + } + + span { + &.label { + float: left; + font-weight: bold; + margin-right: 1rem; + text-align: right; + width: 10rem; + } + + &.hint { + font-size: 105%; + } + } + + table { + clear: both; + font-size: 105%; + margin: 1em 0 1em 1em; + + &.dataTable { + margin: 0; + } + + &.mceListBox { + margin: 0; + } + } + + td { + label { + float: none; + font-weight: normal; + width: auto; + } + } + + .inputnote { + clear: left; + float: left; + margin: 1em 0 0 11em; + } + + + h3 { + clear: both; + padding-top: .5em; + } + + .dataTables_wrapper { + label { + font-weight: 400; + width: unset; + } + } + + .dropdown-menu { + li { + padding-bottom: 0; + } + } + + .toptabs { + clear: both; + margin: 1em; } } } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basketgroup.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basketgroup.tt index f7ef0c98e9..b8ed3b54fd 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basketgroup.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basketgroup.tt @@ -205,7 +205,7 @@ <div class="col-xs-6 col-xs-pull-6"> [% END %] <form action="/cgi-bin/koha/acqui/basketgroup.pl" method="post" id="groupingform" onsubmit="return submitForm(this)"> - <fieldset id="various" class="brief rows"> + <fieldset id="various" class="brief"> <ol> [% UNLESS (closedbg) %] <li> -- 2.30.2