Attachment 138293 Details for Bug 30952 – Bug 30952: Fix "rows" forms

[patch] Bug 30952: Fix "rows" forms

Bug-30952-Fix-rows-forms.patch (text/plain), 9.87 KB, created by Julian Maurice on 2022-07-29 10:39:51 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Julian Maurice

Created: 2022-07-29 10:39:51 UTC

Size: 9.87 KB

patch

obsolete

>From 6ce54e57335cf98a012fcc11fa57d632704ab9f1 Mon Sep 17 00:00:00 2001
>From: Julian Maurice <julian.maurice@biblibre.com>
>Date: Fri, 29 Jul 2022 12:29:40 +0200
>Subject: [PATCH] Bug 30952: Fix "rows" forms
>
>Issue #7
>---
> .../intranet-tmpl/prog/css/src/_forms.scss    |  39 ++
> .../prog/css/src/staff-global.scss            | 355 +-----------------
> 2 files changed, 40 insertions(+), 354 deletions(-)
> create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss
>
>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
>index 0000000000..8928834db5
>--- /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 9a90ef38f1..28b2003a25 100644
>--- 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;
>@@ -2813,16 +2488,6 @@ td.bundle {
>     margin-left: 20px;
>     padding: 10px;
> 
>-    fieldset {
>-        &.rows {
>-            li {
>-                label {
>-                    width: 16em;
>-                }
>-            }
>-        }
>-    }
>-
>     .importing {
>         background: none;
>         padding: inherit;
>@@ -2830,16 +2495,6 @@ td.bundle {
> }
> 
> .form_import {
>-    fieldset {
>-        &.rows {
>-            li {
>-                label {
>-                    width: auto;
>-                }
>-            }
>-        }
>-    }
>-
>     .input_import {
>         border: 1px solid #BCBCBC;
>     }
>@@ -4574,15 +4229,6 @@ input.renew {
>     }
> }
> 
>-#payForm {
>-    fieldset {
>-        &.rows {
>-            padding-left: 1em;
>-            padding-right: 2em;
>-        }
>-    }
>-}
>-
> #helper {
>     span {
>         display: none;
>@@ -4866,6 +4512,7 @@ div .suggestion_note {
> 
> @import "header";
> @import "toolbar";
>+@import "forms";
> 
> @media (min-width: 200px) {
> 
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 30952: 136810 | 136812 | 136813 | 136815 | 136816 | 136818 | 136819 | 136820 | 136822 | 136823 | 136825 | 136827 | 136828 | 136830 | 136831 | 136833 | 136834 | 136836 | 136837 | 136839 | 136840 | 136842 | 136844 | 136845 | 136847 | 136848 | 136878 | 136879 | 136880 | 136881 | 136882 | 136883 | 136884 | 136885 | 136886 | 136887 | 136888 | 136889 | 136890 | 136891 | 136892 | 136893 | 136894 | 136895 | 136896 | 136897 | 136898 | 136899 | 136900 | 136901 | 136902 | 136950 | 136951 | 136952 | 136953 | 136954 | 136955 | 136956 | 136957 | 136958 | 136959 | 136960 | 136961 | 136962 | 136963 | 136964 | 136965 | 136966 | 136967 | 136968 | 136969 | 136970 | 136971 | 136972 | 136973 | 136974 | 137408 | 137409 | 137410 | 137411 | 137414 | 137415 | 137416 | 137417 | 137418 | 137419 | 137420 | 137744 | 137767 | 137768 | 137775 | 137776 | 137994 | 138091 | 138092 | 138093 | 138094 | 138095 | 138096 | 138097 | 138098 | 138099 | 138100 | 138101 | 138102 | 138103 | 138245 | 138246 | 138247 | 138293 | 138299 | 138300 | 138302 | 140117 | 140118 | 140119 | 140120 | 140121 | 140122 | 140123 | 140124 | 140125 | 140126 | 140127 | 140128 | 140129 | 140130 | 140131 | 140132 | 140133 | 140134 | 140135 | 140136 | 140137 | 140138 | 140139 | 140140 | 140141 | 140142 | 140143 | 140371 | 140372 | 140373 | 140374 | 140433 | 140435 | 140459 | 140460 | 140512 | 140513 | 140514 | 140515 | 140516 | 140517 | 140519 | 140520 | 140521 | 140522 | 140523 | 140524 | 140525 | 140526 | 140527 | 140528 | 140529 | 140530 | 140531 | 140532 | 140533 | 140534 | 140535 | 140536 | 140537 | 140538 | 140539 | 140540 | 140541 | 140542 | 140543 | 140544 | 140545 | 140546 | 140547 | 140548 | 140549 | 140550 | 140551 | 140552 | 140553 | 140554 | 140555 | 140556 | 140557 | 140558 | 140559 | 140560 | 140566 | 140567 | 140570 | 140571 | 140575 | 140576 | 140577 | 140588 | 140613 | 140617 | 140618 | 140619 | 140620 | 140628 | 140629 | 140635 | 140649 | 140650 | 140651 | 140652 | 140653 | 140654 | 140658 | 140687 | 140976 | 140977 | 141020 | 141024 | 141026 | 141027 | 141041 | 141043 | 141044 | 141047 | 141052 | 141053 | 141054 | 141055 | 141056 | 141057 | 141064 | 141074 | 141075 | 141631 | 141632 | 141633 | 141634 | 141635 | 141636 | 141637 | 141638 | 141639 | 141640 | 141641 | 141642 | 141643 | 141644 | 141645 | 141646 | 141647 | 141648 | 141649 | 141650 | 141651 | 141652 | 141653 | 141654 | 141655 | 141656 | 141657 | 141658 | 141659 | 141660 | 141661 | 141662 | 141663 | 141664 | 141665 | 141666 | 141667 | 141668 | 141669 | 141670 | 141671 | 141672 | 141673 | 141674 | 141675 | 141676 | 141677 | 141678 | 141679 | 141680 | 141681 | 141682 | 141683 | 141684 | 141685 | 141686 | 141687 | 141688 | 141689 | 141690 | 141691 | 141692 | 141693 | 141694 | 141695 | 141696 | 141697 | 141698 | 141699 | 141700 | 141701 | 141702 | 141703 | 141704 | 141705 | 141706 | 141707 | 141708 | 141709 | 141710 | 141711 | 141712 | 141713 | 142604 | 142605