From 43e8adfcd269523ec883b56fa2e6b6d5688daa94 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 --- .../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 @@
[% END %]
-
+
    [% UNLESS (closedbg) %]
  1. -- 2.20.1