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>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
(cherry picked from commit e9481a678c)
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
This commit is contained in:
Karam Qubsi
Paul Derscheid
parent
6388bb3bee
commit
647a752a83
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1552,6 +1552,12 @@ i {
|
|||
}
|
||||
}
|
||||
|
||||
/*rtl:raw:
|
||||
i.fa.fa-arrow-right {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
*/
|
||||
|
||||
.item_status {
|
||||
padding: .2rem 0;
|
||||
|
||||
|
|
@ -3066,6 +3072,11 @@ nav {
|
|||
margin-right: .3rem;
|
||||
width: .8em;
|
||||
}
|
||||
/*rtl:raw:
|
||||
&::before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4908,3 +4919,16 @@ div .suggestion_note {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/*rtl:raw:
|
||||
.dropdown-menu-end[data-bs-popper] {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
/*rtl:raw:
|
||||
.CodeMirror{
|
||||
text-align: left;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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' %]
|
||||
|
|
|
|||
Loading…
Reference in New Issue