Attachment 145201 Details for Bug 32605 – Bug 32605: Restore some form styling from before the redesign

[patch] Bug 32605: Restore some form styling from before the redesign

Bug-32605-Restore-some-form-styling-from-before-th.patch (text/plain), 8.77 KB, created by Owen Leonard on 2023-01-10 18:59:11 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2023-01-10 18:59:11 UTC

Size: 8.77 KB

patch

obsolete

>From 43e8adfcd269523ec883b56fa2e6b6d5688daa94 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
>---
> .../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.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 32605: 145201 | 145916 | 146348 | 146349 | 146359 | 146360 | 146495 | 146496