Bug 30952: Fix "rows" forms

Issue #7

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss
new file mode 100644 (file)
index 0000000..8928834
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss
@@ -0,0 +1,39 @@
+fieldset.rows ol {
+    $label-width: 12rem;
+    $gap-width: 1rem;
+
+    padding: 0;
+
+    li {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        & > * {
+            margin: 0 $gap-width 0 0;
+        }
+
+        label {
+            font-weight: bold;
+
+            &:first-child {
+                flex-basis: $label-width;
+                flex-shrink: 0;
+                flex-grow: 0;
+                text-align: right;
+            }
+
+            &.error {
+                order: -1;
+                width: 100%;
+                padding-left: $label-width + $gap-width;
+            }
+        }
+
+        div.hint {
+            width: 100%;
+            margin-top: .25rem;
+            padding-left: $label-width + $gap-width;
+        }
+    }
+}

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 48dfb99..79cad99 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -982,277 +982,11 @@ fieldset {
         }
     }
 
-    &.rows {
-        border: 0;
-        clear: left;
-        float: left;
-        font-size: 90%;
-        width: 100%;
-
-        fieldset {
-            background-color: transparent;
-            border-width: 1px;
-            margin: 1em;
-            padding: .3em;
-
-            &.action {
-                padding: 1em;
-            }
-        }
-
-        &.inputnote {
-            clear: left;
-            float: left;
-            margin: 1em 0 0 11em;
-        }
-
-
-        &.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: 10.5rem;
-            }
-        }
-
-        label {
-            float: left;
-            font-weight: bold;
-            margin-right: 1rem;
-            text-align: right;
-            width: auto;
-            min-width: 9rem;
-
-            &.error {
-                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;
-            }
-        }
-
-        li {
-            clear: left;
-            float: left;
-            list-style-type: none;
-            padding-bottom: 1em;
-            width: 100%;
-
-            &[aria-disabled="true"] {
-                color: #999;
-            }
-
-            &.radio {
-                margin: 0;
-                padding-left: 9em;
-                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 {
-                label {
-                    width: 6em;
-                }
-
-                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: 9em;
-                    }
-                }
-
-                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: 1em;
-                text-align: right;
-                width: 9em;
-            }
-
-            &.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: normal;
-                width: unset;
-            }
-        }
-
-        .dropdown-menu {
-            li {
-                padding-bottom: 0;
-            }
-        }
-
-        .toptabs {
-            clear: both;
-            margin: 1em;
-        }
-    }
-
     fieldset {
         box-shadow: none;
     }
 }
 
-#multi_receiving {
-    fieldset {
-        &.rows {
-            label {
-                width: 50%;
-            }
-        }
-    }
-}
-
 details {
     > summary {
         cursor: pointer;
@@ -1452,55 +1186,6 @@ div {
         }
     }
 
-    &.rows {
-        clear: left;
-        float: left;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-
-        + div {
-            &.rows {
-                margin-top: .6em;
-            }
-        }
-
-        li {
-            border-bottom: 1px solid #EEE;
-            clear: left;
-            float: left;
-            list-style-type: none;
-            padding: .275em;
-            width: 100%;
-        }
-
-        ol {
-            list-style-type: none;
-            padding: .5em 1em 0 0;
-
-            li {
-                li {
-                    border-bottom: 0;
-                }
-            }
-        }
-
-        p {
-            margin-left: 10em;
-        }
-
-        span {
-            &.label {
-                float: left;
-                font-weight: bold;
-                margin-right: 1em;
-                padding-top: 0;
-                text-align: left;
-                width: 9em;
-            }
-        }
-    }
-
     &.pages {
         margin: .5em 0;
 
@@ -1650,10 +1335,6 @@ dd {
 .patroninfo-section {
     padding: .5em;
     margin: .5em;
-
-    .rows {
-        padding: .5em;
-    }
 }
 
 .patroninfo-heading {
@@ -1769,12 +1450,6 @@ dd {
 
 }
 
-.rows {
-    .label {
-        white-space: normal;
-    }
-}
-
 .readonly,
 input[type='text']:read-only {
     background: #EEE url("../img/locked.png") center left no-repeat;
@@ -2835,16 +2510,6 @@ td.bundle {
     margin-left: 20px;
     padding: 10px;
 
-    fieldset {
-        &.rows {
-            li {
-                label {
-                    width: 16em;
-                }
-            }
-        }
-    }
-
     .importing {
         background: none;
         padding: inherit;
@@ -2852,16 +2517,6 @@ td.bundle {
 }
 
 .form_import {
-    fieldset {
-        &.rows {
-            li {
-                label {
-                    width: auto;
-                }
-            }
-        }
-    }
-
     .input_import {
         border: 1px solid #BCBCBC;
     }
@@ -4602,15 +4257,6 @@ input.renew {
     }
 }
 
-#payForm {
-    fieldset {
-        &.rows {
-            padding-left: 1em;
-            padding-right: 2em;
-        }
-    }
-}
-
 #helper {
     span {
         display: none;
@@ -4903,6 +4549,7 @@ div .suggestion_note {
 
 @import "header";
 @import "toolbar";
+@import "forms";
 
 @media (min-width: 200px) {