From 5dc170ce2a4004ff3fbe65527eb06b2973717017 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 Signed-off-by: David Nind Signed-off-by: Martin Renvoize Signed-off-by: Tomas Cohen Arazi (cherry picked from commit 0a3eee9e70988625c6d1ce3f044d9a540e2ebe5c) Signed-off-by: Pedro Amorim --- .../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 e298adf7e0..3bb45083d8 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.39.2