From 00b1bf3c2cce46878cb12957a8af999e02ec7b40 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 4 Sep 2020 14:32:04 +0000 Subject: [PATCH] Bug 20168: (follow-up) Add automatic creation of RTL CSS Signed-off-by: Jonathan Druart --- gulpfile.js | 18 +- .../opac-tmpl/bootstrap/css/right-to-left.css | 1 - .../bootstrap/css/src/right-to-left.scss | 569 ------------------ .../bootstrap/en/includes/doc-head-close.inc | 14 +- .../bootstrap/en/modules/sci/sci-main.tt | 10 +- .../bootstrap/en/modules/sco/printslip.tt | 6 +- .../bootstrap/en/modules/sco/sco-main.tt | 9 +- package.json | 3 +- yarn.lock | 115 +++- 9 files changed, 133 insertions(+), 612 deletions(-) delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/right-to-left.css delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss diff --git a/gulpfile.js b/gulpfile.js index 5b8d6e68a2..d2164c9bb1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,9 +5,11 @@ const { dest, series, src, watch } = require('gulp'); const sass = require("gulp-sass"); const cssnano = require("gulp-cssnano"); +const rtlcss = require('gulp-rtlcss'); const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('gulp-autoprefixer'); const args = require('minimist')(process.argv.slice(2)); +const rename = require('gulp-rename'); const STAFF_JS_BASE = "koha-tmpl/intranet-tmpl/prog/js"; const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css"; @@ -34,6 +36,12 @@ function css() { .pipe(sass(sassOptions).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(sourcemaps.write('./maps')) + .pipe(dest(css_base)) + + .pipe(rtlcss()) + .pipe(rename({ + suffix: '-rtl' + })) // Append "-rtl" to the filename. .pipe(dest(css_base)); } @@ -42,7 +50,15 @@ function build() { return src(css_base + "/src/**/*.scss") .pipe(sass(sassOptions).on('error', sass.logError)) .pipe(autoprefixer()) - .pipe(cssnano({ zindex: false })) + .pipe(cssnano({ + zindex: false + })) + .pipe(dest(css_base)) + + .pipe(rtlcss()) + .pipe(rename({ + suffix: '-rtl' + })) // Append "-rtl" to the filename. .pipe(dest(css_base)); } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/right-to-left.css b/koha-tmpl/opac-tmpl/bootstrap/css/right-to-left.css deleted file mode 100644 index 5c330050c6..0000000000 --- a/koha-tmpl/opac-tmpl/bootstrap/css/right-to-left.css +++ /dev/null @@ -1 +0,0 @@ -.popup{padding-left:0;padding-right:0}a.cancel{padding-right:1em}a.addtocart,a.addtoshelf,a.highlight_toggle,a.incart,a.print-large,a.reserve{padding-right:35px}a.brief,a.detail,a.tag_add{padding-right:27px}a.download{padding-right:20px}a.editshelf,a.hide{padding-right:26px}a.empty,a.print-small{padding-right:30px}a.hold,a.new{padding-right:23px}a.deleteshelf,a.removeitems{padding-right:25px}a.send{padding-right:28px}h1#libraryname{float:right!important}input.hold{padding-right:23px}caption{text-align:right}#basketcount span{margin:0 .9em 0 0}#koha_url p{float:left}.actions a.hold{margin-left:1em;padding-right:21px}.actions a.addtocart,.actions a.addtolist,.actions a.addtoshelf,.actions a.tag_add{margin-left:1em;padding-right:20px}.actions a.removefromlist{margin-left:1em;padding-right:15px}.statictabs li,.ui-tabs .ui-tabs-nav li{margin-left:.4em}#bookcover,.statictabs li,.statictabs li a{float:right}#bookcover img{margin:0 0 1em 1em}#bookcover .no-image{margin-left:10px}th.sum,th[scope=row]{text-align:left}fieldset.rows{clear:right;float:right}fieldset.rows .label,fieldset.rows label{float:right;margin-left:1em;text-align:left}fieldset.rows ol.lradio label{margin-left:0}fieldset.rows ol.lradio label.lradio{float:right;margin-left:1em}fieldset.rows li{clear:right;float:right}fieldset.rows li.lradio{padding-right:8.5em}fieldset.rows li.lradio label{margin:0 1em 0 0}div.rows{float:right;clear:right}div.rows .label{float:right;margin-left:1em;text-align:right}div.rows ol{margin-right:0;padding:.5em 0 0 1em}div.rows li{clear:right;float:right}div.rows ul li{margin-right:7.3em}div.rows ul li:first-child{margin-right:0}.toolbar{padding:3px 5px 5px 3px}.toolbar label{margin-right:.5em}.toolbar #tagsel_tag,.toolbar .hold{padding-right:28px}.toolbar li a{border-right:1px solid #e8e8e8}.toolbar li:first-child a{border-right:0}.toolbar ul{padding-right:0}#basket .toolbar{padding:7px 9px 9px 5px}#selections-toolbar{padding-right:10px}#tagsel_span input.submit,#tagsel_tag{padding-right:25px}#selections-toolbar a.disabled,#selections-toolbar a.disabled:hover,#selections-toolbar input.hold.disabled,#selections-toolbar input.hold.disabled:hover,#tagsel_span input.disabled,#tagsel_span input.disabled:hover,#tagsel_span input.hold.disabled,#tagsel_span input.hold.disabled:hover{padding-right:23px}#views{padding:0 .2em .2em 2em}#bibliodescriptions,#isbdcontents{clear:right}.results-pagination{right:-1px}.back{float:left}.pagination_list li a,.pagination_list ul{padding-right:0}.pagination_list .li_pag_index{float:right;padding-left:10px;text-align:left}.pg_menu li.back_results a{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.pg_menu li a,.pg_menu li span{float:right}#listResults li{margin-left:1px}.nav_pages .close_pagination{left:3px;padding-left:10px}.nav_pages li,.nav_pages li ul{float:right}#format,#furthersearches{padding-right:35px}.highlight_controls{float:right}input.editshelf{padding-right:29px}.newshelf{padding-right:28px}.deleteshelf{padding-right:25px}#login4tags{padding-right:20px}.tag_results_input{margin-right:1em}#social_networks span{float:right;margin:.5em .5em .5em 0!important}#social_networks div{float:right!important;margin:.5em .2em .5em 0!important}#marc td,#marc th{text-align:right}#marc .results_summary{clear:right}#plainmarc th{text-align:right}#renewcontrols{float:left}.authstanza li{margin-right:.5em}#didyoumean{text-align:right}.authlink{padding-right:.25em}#menu h4 a,#search-facets h4 a{border-radius:8px 0 0 8px}#menu{border:0 solid #d8d8d8;border-left-width:1px}#menu li a{border-radius:0 5px 5px 0;margin-left:-1px}#menu li.active a{border-left-width:0;border-right-width:1px}.addto a.addtocart{padding-right:33px}.searchresults a.highlight_toggle{padding:0 21px 0 10px}.commentline .avatar{float:left;padding-right:.5em}span.sep{padding:0 .5em 0 .2em}.pages a:first-child,.pages span:first-child{border-bottom-right-radius:3px;border-top-right-radius:3px}.pages a:last-child,.pages span:last-child{border-bottom-left-radius:3px;border-top-left-radius:3px;border-width:1px 0 1px 1px}.pages .currentPage,.pages .inactive,.pages a{border-width:1px 0 1px 1px;float:right}.pages a[rel=last]{border-bottom-left-radius:3px;border-top-left-radius:3px}.close{left:auto}.alert .closebtn{left:-21px}.closebtn{float:left}#logo{float:right!important}.floating{box-shadow:0 0 2px 3px rgba(0,0,0,.4)}.table .sorting_asc{background:url(../images/asc.gif) no-repeat scroll 0 #ecede6;padding-left:19px}.table .sorting_desc{padding-left:19px;background:url(../images/desc.gif) no-repeat scroll 0 #ecede6}.table .sorting{background:url(../images/ascdesc.gif) no-repeat scroll 0 #ecede6}.table .nosort,.table .nosort.sorting,.table .nosort.sorting_asc,.table .nosort.sorting_desc,.table .sorting{padding-left:19px}.tags ul{margin-right:0}.coverimages{float:left}#i18nMenu{margin-right:1em}#overdrive-results{padding-right:1em}.navbar .pull-right{float:left} \ No newline at end of file diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss deleted file mode 100644 index fba7f5baa7..0000000000 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss +++ /dev/null @@ -1,569 +0,0 @@ -.popup { - padding-left: 0; - padding-right: 0; -} - -a { - &.cancel { - padding-right: 1em; - } - - &.addtocart, - &.addtoshelf, - &.highlight_toggle, - &.incart, - &.print-large, - &.reserve { - padding-right: 35px; - } - - &.brief, - &.tag_add, - &.detail { - padding-right: 27px; - } - - &.download { - padding-right: 20px; - } - - &.editshelf { - padding-right: 26px; - } - - &.hide { - padding-right: 26px; - } - - &.empty, - &.print-small { - padding-right: 30px; - } - - &.hold, - &.new { - padding-right: 23px; - } - - &.removeitems, - &.deleteshelf { - padding-right: 25px; - } - - &.send { - padding-right: 28px; - } -} - -h1 { - &#libraryname { - float: right !important; - } -} - -input.hold { - padding-right: 23px; -} - -caption { - text-align: right; -} - -#basketcount { - span { - margin: 0 .9em 0 0; - } -} - -#koha_url p { - float: left; -} - -.actions { - a { - &.hold { - margin-left: 1em; - padding-right: 21px; - } - - &.addtocart { - margin-left: 1em; - padding-right: 20px; - } - - &.addtoshelf { - margin-left: 1em; - padding-right: 20px; - } - - &.addtolist { - margin-left: 1em; - padding-right: 20px; - } - - &.tag_add { - margin-left: 1em; - padding-right: 20px; - } - - /* List contents remove from list link */ - &.removefromlist { - margin-left: 1em; - padding-right: 15px; - } - } -} - -.ui-tabs .ui-tabs-nav li { - margin-left: .4em; -} - -.statictabs { - li { - float: right; - margin-left: .4em; - - a { - float: right; - } - } -} - -#bookcover { - float: right; - - img { - margin: 0 0 1em 1em; - } - - .no-image { - margin-left: 10px; - } -} - -th.sum { - text-align: left; -} - -th[scope=row] { - text-align: left; -} - -fieldset { - &.rows { - clear: right; - float: right; - - label, - .label { - float: right; - margin-left: 1em; - text-align: left; - } - - ol { - &.lradio { - label { - margin-left: 0; - - &.lradio { - float: right; - margin-left: 1em; - } - } - } - } - - li { - clear: right; - float: right; - - &.lradio { - padding-right: 8.5em; - - label { - margin: 0 1em 0 0; - } - } - } - } -} - -div.rows { - float: right; - clear: right; - - .label { - float: right; - margin-left: 1em; - text-align: right; - } - - ol { - margin-right: 0; - padding: .5em 0 0 1em; - } - - li { - - clear: right; - float: right; - } - - ul { - li { - margin-right: 7.3em; - - &:first-child { - margin-right: 0; - } - } - } -} - -.toolbar { - padding: 3px 5px 5px 3px; - - label { - margin-right: .5em; - } - - .hold, - #tagsel_tag { - padding-right: 28px; - } - - li { - a { - border-right: 1px solid #E8E8E8; - } - - &:first-child { - a { - border-right: 0; - } - } - } - - ul { - padding-right: 0; - } -} - -#basket .toolbar { - padding: 7px 9px 9px 5px; -} - -#selections-toolbar { - padding-right: 10px; -} - -#tagsel_span input.submit, -#tagsel_tag { - padding-right: 25px; -} - -#tagsel_span input.disabled, -#tagsel_span input.disabled:hover, -#tagsel_span input.hold.disabled, -#tagsel_span input.hold.disabled:hover, -#selections-toolbar input.hold.disabled, -#selections-toolbar input.hold.disabled:hover, -#selections-toolbar a.disabled, -#selections-toolbar a.disabled:hover { - padding-right: 23px; -} - -#views { - padding: 0 .2em .2em 2em; -} - -#bibliodescriptions, -#isbdcontents { - clear: right; -} - -/* pagination */ -.results-pagination { - right: -1px; -} - - -.back { - float: left; -} - -.pagination_list { - ul { - padding-right: 0; - } - - li { - a { - padding-right: 0; - } - } - - .li_pag_index { - float: right; - padding-left: 10px; - text-align: left; - } -} - -.pg_menu { - li { - &.back_results { - a { - border-left: 1px solid #D0D0D0; - border-right: 1px solid #D0D0D0; - } - } - - a, - span { - float: right; - } - } -} - -#listResults{ - li { - margin-left: 1px; - } -} - -/* nav */ -.nav_pages { - .close_pagination { - left: 3px; - padding-left: 10px; - } - - li { - float: right; - - ul { - float: right; - } - } -} - -#format, -#furthersearches { - padding-right: 35px; -} - -.highlight_controls { - float: right; -} - -input.editshelf { - padding-right: 29px; -} - -.newshelf { - padding-right: 28px; -} - -.deleteshelf { - padding-right: 25px; -} - -#login4tags { - padding-right: 20px; -} - -.tag_results_input { - margin-right: 1em; -} - -#social_networks { - span { - float: right; - margin: .5em .5em .5em 0 !important; - } - div { - float: right !important; - margin: .5em .2em .5em 0 !important; - } -} - -#marc { - td, - th { - text-align: right; - } - .results_summary { - clear: right; - } -} - -#plainmarc th { - text-align: right; -} - -#renewcontrols { - float: left; -} - -.authstanza li { - margin-right: 0.5em; -} - -#didyoumean { - text-align: right; -} - -.authlink { - padding-right: 0.25em; -} - -#search-facets, -#menu { - h4 { - a { - border-radius: 8px 0 0 8px; - } - } -} - -#menu { - border: 0 solid #D8D8D8; - border-left-width: 1px; - - li { - a { - border-radius: 0 5px 5px 0; - margin-left: -1px; - } - - &.active { - a { - border-left-width: 0; - border-right-width: 1px; - } - } - } -} - -/* Search results add to cart (lists disabled) */ -.addto a.addtocart { - padding-right: 33px; -} - -.searchresults { - a { - &.highlight_toggle { - padding: 0 21px 0 10px; - } - } -} - -.commentline .avatar { - float: left; - padding-right: .5em; -} - -span.sep { - padding: 0 .5em 0 .2em; -} - -/* style for PM-generated pagination bar */ - -.pages span:first-child, -.pages a:first-child { - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; -} - -.pages span:last-child, -.pages a:last-child { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - border-width: 1px 0 1px 1px; -} - -.pages .inactive, -.pages .currentPage, -.pages a { - border-width: 1px 0 1px 1px; - float: right; -} - -.pages a[rel='last'] { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; -} - -.close { - left: auto; -} - -/* Redefine a new style for Bootstrap's class "close" since we use that already */ -/* Use × */ -.alert .closebtn { - left:-21px; -} - -.closebtn { - float: left; -} - -#logo { - float: right !important; -} - -/* Class to be added to toolbar when it starts being fixed at the top of the screen*/ -.floating { - box-shadow: 0 0 2px 3px rgba( 0, 0, 0, .4 ); -} - - -.table { - .sorting_asc { - background: url("../images/asc.gif") no-repeat scroll left center #ECEDE6; - padding-left: 19px; - } - - .sorting_desc { - padding-left: 19px; - background: url("../images/desc.gif") no-repeat scroll left center #ECEDE6; - } - - .sorting { - padding-left: 19px; - background: url("../images/ascdesc.gif") no-repeat scroll left center #ECEDE6; - } - - .nosort, - .nosort.sorting_asc, - .nosort.sorting_desc, - .nosort.sorting { - padding-left: 19px; - } -} - -.tags { - ul { - margin-right: 0; - } -} - -.coverimages { - float: left; -} - -#i18nMenu { - margin-right: 1em; -} - -#overdrive-results { - padding-right: 1em; -} - -.navbar { - .pull-right { - float: left; - } -} diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc index a85e600d8d..f0e42039f6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc @@ -7,16 +7,18 @@ [% IF ( bidi ) %] - [% Asset.css("lib/bootstrap/css/bootstrap-rtl.min.css") | $raw %] [% Asset.css("lib/jquery/jquery-ui-rtl-1.12.1.min.css") | $raw %] - [% Asset.css("css/right-to-left.css") | $raw %] [% ELSE %] [% Asset.css("lib/jquery/jquery-ui-1.12.1.min.css") | $raw %] [% END %] [% IF ( Koha.Preference('opaclayoutstylesheet') ) %] [% SET opaclayoutstylesheet = Koha.Preference('opaclayoutstylesheet') %] [% ELSE %] - [% SET opaclayoutstylesheet = 'opac.css' %] + [% IF ( bidi ) %] + [% SET opaclayoutstylesheet = 'opac-rtl.css' %] + [% ELSE %] + [% SET opaclayoutstylesheet = 'opac.css' %] + [% END %] [% END %] [% IF (opaclayoutstylesheet.match('^https?:|^\/')) %] @@ -34,7 +36,11 @@ [% IF ( opac_css_override ) %] [% END %] -[% Asset.css("css/print.css", { media = "print" }) | $raw %] +[% IF ( bidi ) %] + [% Asset.css("css/print-rtl.css", { media = "print" }) | $raw %] +[% ELSE %] + [% Asset.css("css/print.css", { media = "print" }) | $raw %] +[% END %] [% IF ( Koha.Preference('OPACUserCSS') ) %] [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt index fe552a95c8..d719cc07bc 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt @@ -32,9 +32,13 @@ [% ELSE %] [% END %] -[% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %] -[% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %] -[% Asset.css("css/sco.css") | $raw %] +[% IF ( bidi ) %] + [% Asset.css("lib/jquery/jquery-ui-rtl-1.12.1.min.css") | $raw %] + [% Asset.css("css/sco-rtl.css") | $raw %] +[% ELSE %] + [% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %] + [% Asset.css("css/sco.css") | $raw %] +[% END %] [% IF ( Koha.Preference('OPACUserCSS') ) %][% END %] [% IF ( Koha.Preference('SelfCheckInUserCSS') ) %][% END %]