Bugzilla – Attachment 182881 Details for
Bug 40040
RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues
0001-Bug-40040-RTL-CSS-files-not-loaded-in-templates-lega.patch (text/plain), 15.47 KB, created by
Karam Qubsi
on 2025-05-31 17:55:38 UTC
(
hide
)
Description:
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues
Filename:
MIME Type:
Creator:
Karam Qubsi
Created:
2025-05-31 17:55:38 UTC
Size:
15.47 KB
patch
obsolete
>From 9e8ef3eec746d0d68aa6a083707039ec38b16979 Mon Sep 17 00:00:00 2001 >From: Karam Qubsi <karamqubsi@gmail.com> >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. >--- > .../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 dae1044db0..0000000000 >--- 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 b190dc2a31..476597ed46 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 5798abfd15..1a5ea1a361 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 adf5a61694..7b934facc7 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 %] > <script type="module"> > import { APIClient } from "/intranet-tmpl/prog/js/fetch/api-client.js"; > window.APIClient = APIClient; >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc >index bf1f8b6d7f..688b2b1090 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc >@@ -5,7 +5,11 @@ > [% Asset.css("lib/fontawesome/css/fontawesome.min.css") | $raw %] > [% Asset.css("lib/fontawesome/css/brands.min.css") | $raw %] > [% Asset.css("lib/fontawesome/css/solid.min.css") | $raw %] >-[% Asset.css("css/installer.css") | $raw %] >+[% IF ( bidi ) %] >+ [% Asset.css("css/installer-rtl.css") | $raw %] >+[% ELSE %] >+ [% Asset.css("css/installer.css") | $raw %] >+[% END %] > <script> > var Koha = {}; > </script> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/intranetstylesheet.inc >index e476d002a1..78ed3b37b5 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?:|^\/')) %] > <link rel="stylesheet" type="text/css" href="[% intranetstylesheet | html %]" /> > [% 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 26ba077ed9..23d8f96f39 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 %]</title > > > [% 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 %] > </head> > >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 91172dac2a..fe5e0597aa 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 %]</title > > >-[% 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' %] > </head> > >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 d3060db036..855131c8f8 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 %]</title > > > [% 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 %] > </head> > <body id="tools_holidays" class="tools"> > [% WRAPPER 'header.inc' %] >-- >2.39.3 (Apple Git-146) >
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 40040
:
182880
|
182881
|
182920