From 34fa2c8ece692550fa769b6ca20dc1ee958545c1 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 26 Oct 2022 14:17:23 +0000
Subject: [PATCH] Bug 31991: Restore style of sidebar forms

This patch restores the aside{} section of staff-global.scss from before
the staff redesign and makes some tweaks to make it consisten with the
redesign. The goal is to make the spacing of the form more compact but
still readable, and to correct some layout inconsistencies.

The patch also modifies the order filter form to fix the layout of some
checkboxes.

To test, apply the patch and rebuild the staff interface CSS.

Test various pages with sidebar forms to confirm that the form looks
readable and usable. For example:

- Patrons
- Acquisitions -> Invoices
- Tools -> Tags
- Serials -> Subscription search results
- Overdues
- Holds to pull

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/css/src/staff-global.scss            | 189 ++++++------------
 .../prog/en/includes/filter-orders.inc        |  28 +--
 2 files changed, 75 insertions(+), 142 deletions(-)

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 e760fcc2b9..a6d30023b6 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -196,110 +196,52 @@ a {
 
 
 aside {
-    fieldset {
-        @include card;
-        padding: .9em;
-
-        button + button,
-        input + input {
-            margin-left: 5px;
-        }
+    h5 {
+        font-size: 100%;
+        margin: .5em 0;
+    }
 
-        fieldset.brief {
-            width: 100%;
+    fieldset {
+        &.brief {
+            padding: .4em .7em;
 
-            legend {
-                color: #696969;
-                font-weight: bold;
-                font-size: 13px;
-                margin: 0;
-                border-bottom: 0;
+            button + button,
+            input + input {
+                margin-left: 5px;
             }
 
-            li {
-                margin-top: 0;
-                padding: 0;
+            fieldset {
+                border-left: 2px solid #CCC;
+                border-radius: 0;
+                margin: .5em 0;
+                padding: .5em;
 
-                &.radio {
-                    padding: 0;
-                }
-
-                label {
-                    color: #696969;
-                    font-size: 13px;
-                    padding: .5em .3em 0 0;
+                legend {
+                    font-size: 95%;
                     margin: 0;
-                    font-weight: normal;
                 }
 
-                input, select {
-                    height: calc(1.5em + .75rem + 2px);
-                    width: calc(100% - 20px);
+                &.action {
+                    border: 0;
+                    margin-left: 0;
+                    padding: .5em 0;
                 }
             }
-        }
-
-        ol {
-            padding: 0;
-            li {
-                list-style: none;
-                left: 0;
-                flex-direction: row;
-                width: 100%;
-
-                fieldset {
-                    width: 100%;
-
-                    legend {
-                        color: #696969;
-                        font-weight: bold;
-                        font-size: 13px;
-                        margin: 0;
-                        border-bottom: 0;
-                    }
-
-                    li {
-                        margin-top: 0;
-                        padding: 0;
-
-                        label {
-                            color: #696969;
-                            font-size: 13px;
-                            padding: .5em .3em 0 0;
-                            margin: 0;
-                            font-weight: normal;
-                        }
-
-                        input,
-                        select {
-                            height: calc(1.5em + .75rem + 2px);
-                            width: calc(100% - 20px);
-                        }
-                    }
-
-                }
-
-                label {
-                    color: #696969;
-                    padding: .5em .3em 0 0;
-                    margin: 0;
-                }
-
-                input,
-                select {
-                    height: calc(1.5em + .75rem + 2px);
-                    width: calc(100% - 20px);
-
 
-                    &[type="checkbox"],
-                    &[type="radio"] {
-                        width: auto;
-                        margin: 0;
-                        vertical-align: middle;
-                    }
-                }
+            input[type="text"],
+            select {
+                height: calc(1.5em + .75rem + 2px);
+            }
 
+            label {
+                color: #696969;
+                display: block;
+                margin: .5em 0 0 0;
+            }
 
+            li {
+                margin-top: 0;
+                padding: 0;
 
                 &.checkbox {
                     label {
@@ -321,6 +263,8 @@ aside {
                 }
 
                 &.radio {
+                    padding: .7em 0;
+
                     input {
                         padding: .3em 0;
                     }
@@ -334,41 +278,27 @@ aside {
                             display: inline;
                         }
                     }
+                }
+            }
 
-                    select,
-                    [type="text"] {
-                        width: 100%;
-                    }
-
-                    .flatpickr-input {
-                        margin-right: 3px;
-                        width: calc(100% - 20px);
-                    }
-
-                    &+.action {
-                        margin-left: 0;
-                        padding: 0;
-                    }
-
-                    .radio, .checkbox {
-                        margin: 0;
-                    }
+            ol {
+                margin: 0;
+                padding: 0;
+            }
 
-                    select,
-                    [type="text"] {
-                        width: 100%;
-                    }
+            select,
+            [type="text"] {
+                width: 100%;
+            }
 
-                    .flatpickr-input {
-                        margin-right: 3px;
-                        width: calc(100% - 20px);
-                    }
+            .flatpickr-input {
+                margin-right: 3px;
+                width: calc(100% - 20px);
+            }
 
-                    &.action {
-                        margin-left: 0;
-                        padding: 0;
-                    }
-                }
+            &+.action {
+                margin-left: 0;
+                padding: 0;
             }
         }
     }
@@ -638,12 +568,6 @@ textarea {
 }
 
 input {
-    &[type="checkbox"],
-    &[type="radio"] {
-        margin: 0;
-        vertical-align: middle;
-    }
-
     &[type="submit"],
     &[type="reset"],
     &[type="button"] {
@@ -654,6 +578,13 @@ input {
         }
     }
 
+    &[type="checkbox"],
+    &[type="radio"] {
+        height: unset;
+        margin: 0;
+        vertical-align: middle;
+    }
+
     &.submit {
         @include default-button;
 
@@ -689,8 +620,6 @@ label,
     white-space: normal;
 
     input {
-        &[type="checkbox"],
-        &[type="radio"],
         &[type="checkbox"],
         &[type="radio"] {
             margin-top: 0;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/filter-orders.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/filter-orders.inc
index e6451add24..f23c42fbea 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/filter-orders.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/filter-orders.inc
@@ -35,12 +35,14 @@
     <li>
       <label for="ordernumber">Order line:</label>
       <input type="text" name="ordernumber" id="ordernumber" value="[% filters.ordernumber | html %]" />
-      [% IF filters.search_children_too %]
-        <input type="checkbox" name="search_children_too" id="search_children_too" value="1" checked="checked" />
-      [% ELSE %]
-        <input type="checkbox" name="search_children_too" id="search_children_too" value="1" />
-      [% END %]
-      <label class="yesno" for="search_children_too">Display children too.</label>
+        <label class="yesno" for="search_children_too">
+            [% IF filters.search_children_too %]
+                <input type="checkbox" name="search_children_too" id="search_children_too" value="1" checked="checked" />
+            [% ELSE %]
+                <input type="checkbox" name="search_children_too" id="search_children_too" value="1" />
+            [% END %]
+            Display children too
+        </label>
     </li>
 
     <li>
@@ -77,12 +79,14 @@
               <option value="cancelled">Cancelled</option>
             [% END %]
         </select>
-        [% IF filters.is_standing %]
-            <input type="checkbox" name="is_standing" id="is_standing" value="1" checked="checked" />
-        [% ELSE %]
-            <input type="checkbox" name="is_standing" id="is_standing" value="1" />
-        [% END %]
-         <label class="yesno" for="search_children_too">Standing order</label>
+        <label class="yesno" for="search_children_too">
+            [% IF filters.is_standing %]
+                <input type="checkbox" name="is_standing" id="is_standing" value="1" checked="checked" />
+            [% ELSE %]
+                <input type="checkbox" name="is_standing" id="is_standing" value="1" />
+            [% END %]
+            Standing order
+        </label>
     </li>
     <li>
         <label for="fund">Fund: </label>
-- 
2.39.5