From 679424466ee87b427403a598bc05c13b733359ca Mon Sep 17 00:00:00 2001 From: Karam Qubsi Date: Sun, 1 Jun 2025 01:49:58 +0800 Subject: [PATCH] Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues This patch removes the legacy right-to-left.css file, which is no longer maintained and has started causing issues in the RTL (Right-to-Left) UI. We now use Gulp-generated RTL CSS files for better maintainability. In limited cases, we use /*rtl:raw: to target RTL-specific styles. This does not affect the default LTR (Left-to-Right) UI, as rtl:raw is handled by the gulp-rtlcss plugin during the build phase. To test: 1. Install the Arabic translation: koha-translate -i ar-Arab 2. Open the staff interface (with the broken CSS) and confirm the issue by browsing several pages. 3. Apply this patch. 4. Run: yarn css:build 5. Browse several pages in Arabic and confirm the issue is resolved. 6. Browse several pages in English and confirm not affected. Signed-off-by: Owen Leonard --- .../intranet-tmpl/prog/css/right-to-left.css | 367 ------------------ .../intranet-tmpl/prog/css/src/_tables.scss | 30 ++ .../prog/css/src/staff-global.scss | 24 ++ .../prog/en/includes/doc-head-close.inc | 1 - .../en/includes/installer-doc-head-close.inc | 6 +- .../prog/en/includes/intranetstylesheet.inc | 6 +- .../prog/en/modules/ill/ill-requests.tt | 6 +- .../prog/en/modules/intranet-main.tt | 6 +- .../prog/en/modules/tools/holidays.tt | 6 +- 9 files changed, 79 insertions(+), 373 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/css/right-to-left.css diff --git a/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css b/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css deleted file mode 100644 index dae1044db00..00000000000 --- a/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css +++ /dev/null @@ -1,367 +0,0 @@ -fieldset.rows ol.radio label, fieldset.rows li.radio label { float: right; margin: 0 1em 0 0.3em; } - -/* Adjust text directions */ - -body, -caption, -div#toolbar, -div.rows span.label, -div.subfield_line label, -fieldset.rows.left label, -fieldset.rows.left span.label, -h1, -h2, -h3, -h4, -h5, -h6, -legend, -th, -p, -ul li, -ul.toolbar, -.autocomplete .sample-result, -.ui-tabs-panel, -{ - text-align: right; -} - -#issuest th, -.column-tool -{ - text-align: center; -} - -/* Swap floats */ - -div.lang, -div.rows span.label, -div.subfield_line label, -div#header_search, -fieldset.action, -fieldset.rows, -fieldset.rows input, -fieldset.rows div.hint, -fieldset.rows img, -fieldset.rows label, -fieldset.rows li, -fieldset.rows ol.radio label.radio, -fieldset.rows select, -fieldset.rows span.label, -fieldset.rows textarea, -ol.bibliodetails, -ol.bibliodetails span.label, -span.required, -span.important, -#marcDocsSelect, -#toplevelnav, -.ui-tabs-nav li, -{ - float: right; -} - -a.buttondot -{ - float: left; -} - -ul li, -input, -.input_marceditor -{ - float: none; -} - -div.sysprefs div.hint { - float: right ; -} - -/* Adjust margins, padding, alignment and table-element widths */ - -div#menu li a -{ - margin-left: -1px; -} - -div#menu, -div.patroninfo ul, -div.patroninfo h5, -#guarantorsearch { - margin-left: 0.5em; -} -fieldset.rows img, -span.required, -span.important -{ - margin-right: 0.5em; -} - -fieldset.rows div.hint -{ - margin-right:1em; - margin-left:0; -} - -ul -{ - padding-left: 0; - padding-right: 1.1em; -} - -#login -{ - left: 0.5em; -} - -#koha_url -{ - left: 2em; -} - -#login, -#koha_url -{ - right:auto; -} - -div.listgroup { - clear:right; -} - -.holdcount -{ - line-height: 150%; -} - - -/* Borders */ - -div#menu, -div.patroninfo ul, -div.patroninfo h5 -{ - border-left: 1px solid #000; - border-right: none; -} - -#menu ul li.active a -{ - border-right: 1px solid #000; - border-left: 0; -} - -/* TODO - Can we find ways to avoid this? */ - -h1#logo, -#koha_url, -#login { - position: absolute; -} - -/* -############### -new added for good rtl : -*/ -.statictabs ul li { - background: none repeat scroll 0px 0px rgb(230, 240, 242); - border-top: 1px solid rgb(185, 216, 217); - border-right: 1px solid rgb(185, 216, 217); - border-left: 1px solid rgb(185, 216, 217); - -moz-border-top-colors: none; - -moz-border-right-colors: none; - -moz-border-bottom-colors: none; - -moz-border-left-colors: none; - border-image: none; - border-bottom: 0px none !important; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - float: right; - list-style: none outside none; - margin-bottom: 0px; - margin-right: 0.4em; - padding: 0px; - position: relative; - white-space: nowrap; - top: 1px; -} - -div.sysprefs div.hint { - width: 25%; - float: left; - padding: 0.5em; - margin: 0.7em; -} -div.subfield_line label { - font-size: 89%; - float: right; - width: 16em; - text-align: right; - clear: right; -} - -ul#toplevelmenu { - padding: 0px; - float: right; -} -.navbar .nav.pull-right { - float: left; - margin-right: 0px; -} - -.navbar .nav > li { - float: right; -} -#cartmenulink { - padding-right: 25px; -} - -fieldset.action { - float: right; - -} - -/***********************************************************/ - - -#addbibliotabs .ui-tabs-panel { - float: right; -} - -/*floating taps for marceditor and other taps plases */ -.ui-tabs .ui-tabs-nav li { - float: right; -} -/*this is about the shadow image in the pref sidbar */ -div#menu li a { - background: -moz-linear-gradient(right center , rgb(232, 240, 246) 0%, rgb(232, 240, 246) 96%, rgb(193, 193, 193) 100%) repeat scroll 0% 0% transparent; /*firefox 6*/ -background: -webkit-gradient(linear, right top, right top, color-stop(0%,#e8f0f6), color-stop(96%,#e8f0f6), color-stop(100%,#c1c1c1)); /* Chrome,Safari4 */ - background: -webkit-linear-gradient(right, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* Chrome10,Safari5.1 */ - background: -o-linear-gradient(right, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* Opera11.10 */ - background: -ms-linear-gradient(right, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* IE10 */ - background: linear-gradient(right, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* W3C */ -} -/*Z39 search botton */ - -#searchheader form.fz3950bigrpad { - float: left; -} -/*check bocks*/ -p label, { - float: left; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: -25px; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0px; - margin: 2px 0px 0px; - list-style: none outside none; - background-color: rgb(255, 255, 255); - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 6px 6px 6px 6px; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); - background-clip: padding-box; -} - -#user-menu { - left: 5px; - right: unset; -} - -div.dt-buttons { - position: relative; - float: right; -} - -#catalog-search-link { - border-right: 0; - border-left: 1px solid #fff; - padding-left: .3em; -} - -#catalog-search-dropdown > a { - border-left: 0; - border-right: 1px solid #a3c8cf; - margin: 0; - padding: .4em .6em; -} - -#catalog-search-dropdown > a.catalog-search-dropdown-hover, -#catalog-search-dropdown > a:hover { - border-left: 0; - border-right: 1px solid #82b4be; -} - - -#header_search .form-title { - border-radius: 16px 0 0 16px; - padding: 0 0 0 16px; -} - -#header_search .form-content { - margin-left: 0; - margin-right: -16px; - padding-left: 0; - padding-right: 16px; - border-radius: 16px 0 0 16px; -} - -#header_search .form-content input[type="text"]:not(:first-child), -#header_search .form-content select:not(:first-child) { - border-left: 0 none; - border-right: 1px solid #e0e0e0; -} - -#header_search input[type="submit"], -#header_search button[type="submit"] { - border-radius: 16px 0 0 16px; - margin-left: 0; - margin-right: -16px; - padding-left: 1em; - padding-right: calc(16px + .5em); -} - -.fa-arrow-right::before { - content: "\f060"; -} - -.navbar-nav { - float: right; -} - -.navbar-header { - float: right; -} - -@media (max-width: 767px) { - h1#logo { - float: none; - margin: auto; - position: relative; - } - - div#header_search { - margin-right: 0; - } - - #user-menu .open .dropdown-menu { - float: left; - left: 0; - min-width: 160px; - margin: 2px 0px 0px; - position: absolute; - right: auto; - top: 100%; - z-index: 1000; - } - - .navbar .nav > li { - float: none; - } - -} diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss index b190dc2a315..476597ed468 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss @@ -569,6 +569,13 @@ div { content: "\f100"; padding-right: .5em; } + /*rtl:raw: + &::before{ + transform: scaleX(-1); + padding-left: 0em; + padding-right: .5em; + } + */ } &.previous { @@ -576,6 +583,13 @@ div { content: "\f104"; padding-right: .5em; } + /*rtl:raw: + &::before{ + transform: scaleX(-1); + padding-left: 0em; + padding-right: .5em; + } + */ } &.next { @@ -583,6 +597,14 @@ div { content: "\f105"; padding-left: .5em; } + + /*rtl:raw: + &::after{ + transform: scaleX(-1); + padding-left: 0.9em; + padding-right: 0; + } + */ } &.last { @@ -592,6 +614,14 @@ div { content: "\f101"; padding-left: .5em; } + + /*rtl:raw: + &::after{ + transform: scaleX(-1); + padding-left: 0.9em; + padding-right: 0; + } + */ } } } 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 5798abfd153..1a5ea1a3619 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -1538,6 +1538,12 @@ i { } } +/*rtl:raw: + i.fa.fa-arrow-right { + transform: scaleX(-1); + } +*/ + .item_status { padding: .2rem 0; @@ -3035,6 +3041,11 @@ nav { margin-right: .3rem; width: .8em; } + /*rtl:raw: + &::before { + transform: scaleX(-1); + } + */ } } @@ -4866,3 +4877,16 @@ div .suggestion_note { } } } + +/*rtl:raw: +.dropdown-menu-end[data-bs-popper] { + left: auto; + right: 0; +} +*/ + +/*rtl:raw: +.CodeMirror{ + text-align: left; +} + */ diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc index adf5a61694d..7b934facc7e 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc @@ -30,7 +30,6 @@ [% Asset.css("lib/datatables/datatables.min.css") | $raw %] [% Asset.css("css/print.css", { media = "print" }) | $raw %] [% INCLUDE intranetstylesheet.inc %] -[% IF ( bidi ) %][% Asset.css("css/right-to-left.css") | $raw %][% END %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc index e476d002a1a..78ed3b37b57 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc @@ -1,6 +1,10 @@ [% USE raw %] [% USE Asset %] -[% SET intranetstylesheet='staff-global.css' UNLESS intranetstylesheet %] +[% IF ( bidi ) %] + [% SET intranetstylesheet='staff-global-rtl.css' UNLESS intranetstylesheet %] +[% ELSE %] + [% SET intranetstylesheet='staff-global.css' UNLESS intranetstylesheet %] +[% END %] [% IF (intranetstylesheet.match('^https?:|^\/')) %] [% ELSE %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt index 26ba077ed94..23d8f96f39a 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt @@ -16,7 +16,11 @@ [% END %] [% INCLUDE 'doc-head-close.inc' %] -[% Asset.css("css/ill-requests.css") | $raw %] +[% IF ( bidi ) %] + [% Asset.css("css/ill-requests-rtl.css") | $raw %] +[% ELSE %] + [% Asset.css("css/ill-requests.css") | $raw %] +[% END %] [% Asset.css("lib/jquery/plugins/multiple-select/multiple-select.min.css") | $raw %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt index 91172dac2af..fe5e0597aaa 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt @@ -12,7 +12,11 @@ [% t("Koha staff interface") | html %] [% END %] -[% Asset.css("css/mainpage.css") | $raw %] +[% IF ( bidi ) %] + [% Asset.css("css/mainpage-rtl.css") | $raw %] +[% ELSE %] + [% Asset.css("css/mainpage.css") | $raw %] +[% END %] [% INCLUDE 'doc-head-close.inc' %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt index d3060db0360..855131c8f82 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt @@ -13,7 +13,11 @@ [% END %] [% INCLUDE 'doc-head-close.inc' %] -[% Asset.css("css/calendar.css") | $raw %] +[% IF ( bidi ) %] + [% Asset.css("css/calendar-rtl.css") | $raw %] +[% ELSE %] + [% Asset.css("css/calendar.css") | $raw %] +[% END %] [% WRAPPER 'header.inc' %] -- 2.39.5