From e9dec3f57408ade21ea0a3e598d67b17a52d9ef4 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 1 Dec 2025 11:06:14 -0500 Subject: [PATCH] Bug 39780: (follow-up) Adjust layout of checkbox inputs at larger widths Also adjusting the markup on the library add/edit form so that yes/no selects are narrower. --- .../intranet-tmpl/prog/css/src/_forms.scss | 60 +++++++++++-------- .../prog/en/modules/admin/branches.tt | 4 +- 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss index a09c40cc2be..fcb947cc758 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss @@ -52,8 +52,8 @@ fieldset { } .btn-default { - border: 1px solid #aaa; - border-radius: 0.375rem; + border: 1px solid #AAA; + border-radius: .375rem; height: calc( 1.5em + .75rem + 2px ); padding: .375rem .75rem; } @@ -75,6 +75,8 @@ fieldset { .fg-label { grid-column: 2 / 3; grid-row: 1 / 2; + justify-self: left; + text-align: left; } .fg-input, @@ -83,7 +85,7 @@ fieldset { } .hint { - grid-column: 2 / 3; + grid-row: 2 / 3; } } @@ -101,10 +103,10 @@ fieldset { width: 100%; } - input[type="text"]{ + input[type="text"] { &.readonly, &:read-only { - background: #EEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='currentColor'%3E%3Cpath d='M6.5 1.371c.962 0 1.742.78 1.742 1.742v1.549H4.758V3.113c0-.962.78-1.742 1.742-1.742m2.613 5.226V3.113c0-3.484-5.226-3.484-5.226 0v1.549c-.962 0-1.742.78-1.742 1.741v4.355c0 .962.78 1.742 1.742 1.742h5.226c.962 0 1.742-.78 1.742-1.742V6.403c0-.962-.78-1.741-1.742-1.741' style='fill:%23838383'/%3E%3C/svg%3E") 1% 50% no-repeat; + background: #EEE url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='currentColor'%3E%3Cpath d='M6.5 1.371c.962 0 1.742.78 1.742 1.742v1.549H4.758V3.113c0-.962.78-1.742 1.742-1.742m2.613 5.226V3.113c0-3.484-5.226-3.484-5.226 0v1.549c-.962 0-1.742.78-1.742 1.741v4.355c0 .962.78 1.742 1.742 1.742h5.226c.962 0 1.742-.78 1.742-1.742V6.403c0-.962-.78-1.741-1.742-1.741' style='fill:%23838383'/%3E%3C/svg%3E" ) 1% 50% no-repeat; border-style: inset; border-width: 1px; cursor: default; @@ -157,9 +159,9 @@ fieldset { } } - .form-control[type="file"]{ + .form-control[type="file"] { background-color: #FFF; - border: 1px solid #aaa; + border: 1px solid #AAA; display: inline-block; width: 80%; } @@ -171,17 +173,22 @@ fieldset { grid-template-columns: 25% 50% 15%; grid-template-rows: 1fr min-content; + .fg-label { + justify-self: right; + text-align: right; + } + .fg-input, .fg-text { grid-column-start: 2; } &.input-md { - grid-template-columns: 25% 30% 15% + grid-template-columns: 25% 30% 15%; } &.input-sm { - grid-template-columns: 25% 15% 15% + grid-template-columns: 25% 15% 15%; } &.wide { @@ -189,16 +196,23 @@ fieldset { } &.input-checkbox { + display: grid; grid-template-columns: 25% 1.5rem 65%; - .fg-label, - .fg-input { - grid-column: unset; + .fg-label { + grid-column: 3 / 4; + grid-row: 1 / 2; + justify-self: left; + text-align: left; + } + + .fg-input, + .fg-text { + grid-column: 2 / 3; } .hint { - grid-column-end: unset; - grid-column-start: unset; + grid-column: 3 / 4; } } @@ -207,11 +221,6 @@ fieldset { width: calc( 100% - 20px ); } } - - .fg-label { - justify-self: right; - text-align: right; - } } @container form-grid ( width > 1700px ) { @@ -219,11 +228,11 @@ fieldset { grid-template-columns: 20% 35% 15%; &.input-md { - grid-template-columns: 20% 30% 25% + grid-template-columns: 20% 30% 25%; } &.input-sm { - grid-template-columns: 20% 15% 25% + grid-template-columns: 20% 15% 25%; } &.wide { @@ -235,8 +244,7 @@ fieldset { .hint { color: #666; font-size: 95%; - grid-column-end: 4; - grid-column-start: 2; + grid-column: 4 / 2; margin: .3rem 0; } } @@ -402,12 +410,12 @@ fieldset { width: auto; span { - margin-left:5px; - width:auto; + margin-left: 5px; + width: auto; } } - ul>li.hide-radio.selected { + ul > li.hide-radio.selected { background-color: initial; color: initial; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt index 182554d5af9..1f1db59a70a 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt @@ -393,7 +393,7 @@ -
+
@@ -409,7 +409,7 @@
-
+
-- 2.39.5