[Bug 40040] New: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Bug ID: 40040 Summary: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: normal Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: karamqubsi@gmail.com QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Created attachment 182880 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=182880&action=edit RTL: Dropdown menus to have background colors that make text unreadable Hello everyone, Currently, the staff interface loads both regular CSS files for LTR and then adds `right-to-left.css` on top when in RTL (bidi) mode. This approach is inefficient and can lead to styling conflicts. The OPAC interface already correctly loads RTL-specific CSS files directly when in RTL mode. The right-to-left.css file is manually maintained and not generated by Gulp, unlike other RTL files that are automatically generated from their LTR counterparts. This results in inconsistent RTL styling. Currently, right-to-left.css is causing dropdown menus to have background colors that make text unreadable (see attachment). I preparing a patch to fix that. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Karam Qubsi <karamqubsi@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |karamqubsi@gmail.com --- Comment #1 from Karam Qubsi <karamqubsi@gmail.com> --- Created attachment 182881 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=182881&action=edit 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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Karam Qubsi <karamqubsi@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |karamqubsi@gmail.com |ity.org | CC| |oleonard@myacpl.org -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #182881|0 |1 is obsolete| | --- Comment #2 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 182920 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=182920&action=edit 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 <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 --- Comment #3 from Karam Qubsi <karamqubsi@gmail.com> --- Thanks, Owen — appreciate your sign-off. By the way, it’s not clear to me whether any additional steps are needed to include the RTL files in the final Debian package. I checked version 25.05.1, and it doesn’t contain the RTL files for the staff interface — even though they were part of the Gulp build before this change. Missing files in the Debian package: • calendar-rtl.css • holds-rtl.css • ill-requests-rtl.css • installer-rtl.css • mainpage-rtl.css • staff-global-rtl.css I checked in /usr/share/koha/intranet/htdocs/intranet-tmpl/prog/css. let me know if I need to work on this in some other parts / scripts. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |m.de.rooy@rijksmuseum.nl --- Comment #4 from Marcel de Rooy <m.de.rooy@rijksmuseum.nl> --- Hi Karam, Why do you add those: +/*rtl:raw: +.dropdown-menu-end[data-bs-popper] { + left: auto; + right: 0; +} +*/ You say: In limited cases, we use /*rtl:raw: to target RTL-specific styles. Please explain. This is just comments, right? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #5 from Marcel de Rooy <m.de.rooy@rijksmuseum.nl> --- Changing status to get the attention of the author. Please reply former comment. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 --- Comment #6 from Karam Qubsi <karamqubsi@gmail.com> --- (In reply to Marcel de Rooy from comment #4)
Hi Karam,
Why do you add those:
+/*rtl:raw: +.dropdown-menu-end[data-bs-popper] { + left: auto; + right: 0; +} +*/
You say: In limited cases, we use /*rtl:raw: to target RTL-specific styles. Please explain. This is just comments, right?
Hi Marcel, sorry for being late, /*rtl:raw*/ looks like a normal CSS comment in LTR (default CSS), but when processed with gulp-rtlcss (used in gulpfile.js for Koha), example: https://github.com/Koha-Community/Koha/blob/main/gulpfile.js#L80 it is interpreted as an rtlcss control directive. That means for RTL builds it is not treated as a comment, but as actual CSS that should be kept as-is. See the documentation here: https://rtlcss.com/learn/usage-guide/control-directives/index.html Let me know if you have any other questions Thanks, and sorry again for the delay. Karam. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off --- Comment #7 from Marcel de Rooy <m.de.rooy@rijksmuseum.nl> --- Thx Karam for clarification. Seeing additional space(s) at the end sometimes: + /*rtl:raw: + &::before { + transform: scaleX(-1); + } + */ Not a big deal, but the space(s) before */ on the last line seems unneeded.. Here I would expect two spaces less. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #182920|0 |1 is obsolete| | --- Comment #8 from Marcel de Rooy <m.de.rooy@rijksmuseum.nl> --- Created attachment 186123 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=186123&action=edit 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 <oleonard@myacpl.org> Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |m.de.rooy@rijksmuseum.nl |y.org | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |25.11.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 --- Comment #9 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Nice work everyone! Pushed to main for 25.11 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|25.11.00 |25.11.00,25.05.04 released in| | Status|Pushed to main |Pushed to stable -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 --- Comment #10 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Nice work everyone! Pushed to 25.05.x -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40040 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to stable |Needs documenting CC| |fridolin.somers@biblibre.co | |m --- Comment #11 from Fridolin Somers <fridolin.somers@biblibre.com> --- I prefer not backport to 24.11.x LTS for UI stability -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org