[aur-dev] [PATCH] Add RTL Support
Add Right-To-Left layout support. Signed-off-by: Safa AlFulaij <safa1996alfulaij@gmail.com> --- web/html/css/archweb.css | 193 +++++++++++++++++++++++++++++++++++++++++++++ web/html/css/aurweb.css | 14 ++++ web/lib/aur.inc.php | 1 + web/lib/translator.inc.php | 10 +++ web/template/header.php | 4 +- 5 files changed, 221 insertions(+), 1 deletion(-) diff --git a/web/html/css/archweb.css b/web/html/css/archweb.css index b7d6e1e..a908049 100644 --- a/web/html/css/archweb.css +++ b/web/html/css/archweb.css @@ -58,6 +58,12 @@ ul { padding-left: 2em; } +html[dir="rtl"] ol, +ul { + padding-left: auto; + padding-right: 2em; +} + ul { list-style: square; } @@ -152,6 +158,11 @@ a.headerlink { padding-left: 0.5em; } +html[dir="rtl"] a.headerlink { + padding-left: auto; + padding-right: 0.5em; +} + h3:hover > a.headerlink { visibility: visible; } @@ -185,11 +196,21 @@ h5 { text-align: left; } +html[dir="rtl"] #content { + text-align: right; +} + #content-left-wrapper { float: left; width: 100%; /* req to keep content above sidebar in source code */ } +html[dir="rtl"] #content-left-wrapper { + float: right; + margin-left: auto; + margin-right: -340px; +} + #content-left { margin: 0 340px 0 0; } @@ -200,6 +221,11 @@ h5 { margin-left: -300px; } +html[dir="rtl"] #content-right { + margin-left: auto; + margin-right: -300px; +} + div.box { margin-bottom: 1.5em; padding: 0.65em; @@ -249,6 +275,11 @@ td { text-align: left; } +html[dir="rtl"] th, +td { + text-align: right; +} + th { vertical-align: middle; font-weight: bold; @@ -325,6 +356,12 @@ dl { padding-right:15px; } + html[dir="rtl"] dl dt { + float:right; + padding-right: auto; + padding-left: 15px; + } + /* forms and input styling */ form p { margin: 0.5em 0; @@ -409,6 +446,11 @@ table th.tablesorter-header { cursor: pointer; } +html[dir="rtl"] table th.tablesorter-header { + padding-right: auto; + padding-left: 20px; +} + table thead th.tablesorter-headerAsc { background-color: #e4eeff; background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); @@ -435,6 +477,10 @@ table thead th.sorter-false { text-align: right; } +html[dir="rtl"] #intro p.readmore { + text-align: left; +} + /* home: news */ #news { margin-top: 1.5em; @@ -444,6 +490,10 @@ table thead th.sorter-false { float: left; padding-bottom: .5em } + + html[dir="rtl"] #news h3 { + float: right; + } #news div { margin-bottom: 1em; @@ -462,6 +512,10 @@ table thead th.sorter-false { margin-top: 1em; } + html[dir="rtl"] #news .rss-icon { + float: left; + } + #news h4 { clear: both; font-size: 1em; @@ -474,6 +528,10 @@ table thead th.sorter-false { font-size: 0.85em; margin: -1.8em 0.5em 0 0; } + + html[dir="rtl"] #news .timestamp { + float: left; + } /* home: arrowed headings */ #news h3 a { @@ -521,6 +579,11 @@ h3 span.arrow { background: #fff; border: 1px solid #09c; } + + html[dir="rtl"] #pkgsearch input { + float: left; + direction: ltr; + } .pkgsearch-typeahead { position: absolute; @@ -560,6 +623,10 @@ h3 span.arrow { float: right; margin: -2em 0 0 0; } + + html[dir="rtl"] #pkg-updates .rss-icon { + float: left; + } #pkg-updates table { margin: 0; @@ -568,11 +635,20 @@ h3 span.arrow { #pkg-updates td.pkg-name { white-space: normal; } + + html[dir="rtl"] #pkg-updates td.pkg-name { + direction: ltr; + text-align: left; + } #pkg-updates td.pkg-arch { text-align: right; } + html[dir="rtl"] #pkg-updates td.pkg-arch { + text-align: left; + } + #pkg-updates span.testing { font-style: italic; } @@ -610,12 +686,22 @@ div.widget { opacity: 0.6; } +html[dir="rtl"] #konami { + left: auto; + right: 0; +} + /* feeds page */ #rss-feeds .rss { padding-right: 20px; background: url(rss.png) top right no-repeat; } +html[dir="rtl"] #rss-feeds .rss { + padding-right: auto; + padding-left: 20px; +} + /* artwork: logo images */ #artwork img.inverted { background: #333; @@ -633,6 +719,10 @@ div.widget { margin-top: -2.2em; } +html[dir="rtl"] .news-nav { + float: left; +} + .news-nav .prev, .news-nav .next { margin: 0 1em; @@ -665,6 +755,10 @@ div.news-article .article-info { min-width: 20em; } + html[dir="rtl"] #donor-list li { + float: right; + } + /* download page */ #arch-downloads h3 { border-bottom: 1px dotted #bbb; @@ -684,10 +778,21 @@ table.results { background-color:#fff; } + html[dir="rtl"] .results th { + padding-right: 0.25em; + padding-left: 1em; + } + .results td { padding: .3em 1em .3em 3px; } + html[dir="rtl"] .results td { + padding-right: 3px; + padding-left: 1em; + direction: ltr; + } + .results tr.odd { background: #fff; } @@ -715,14 +820,28 @@ table.results { margin-top: -2.2em; } +html[dir="rtl"] #pkglist-results .pkglist-nav { + float: left; +} + .pkglist-nav .prev { margin-right: 1em; } +html[dir="rtl"] .pkglist-nav .prev { + margin-right: auto; + margin-left: 1em; +} + .pkglist-nav .next { margin-right: 1em; } +html[dir="rtl"] .pkglist-nav .next { + margin-right: auto; + margin-left: 1em; +} + /* search fields and other filter selections */ .filter-criteria { margin-bottom: 1em; @@ -739,6 +858,12 @@ table.results { font-size: 0.85em; } +html[dir="rtl"] .filter-criteria div { + float: right; + margin-right: auto; + margin-left: 1.65em; +} + .filter-criteria legend { display: none; } @@ -754,6 +879,10 @@ table.results { float: right; } +html[dir="rtl"] #pkgdetails #detailslinks { + float: left; +} + #pkgdetails #detailslinks h4 { margin-top: 0; margin-bottom: 0.25em; @@ -787,6 +916,11 @@ table.results { #pkgdetails #pkginfo td { padding: 0.25em 0 0.25em 1.5em; } + + html[dir="rtl"] #pkgdetails #pkginfo td { + padding-left: auto; + padding-right: 1.5em; + } #pkgdetails #pkginfo .userdata { font-size: 0.85em; @@ -826,10 +960,21 @@ table.results { padding-left: 0.5em; } +html[dir="rtl"] #pkgdetails #metadata li { + padding-left: auto; + padding-right: 0.5em; + direction: ltr; +} + #pkgdetails #metadata p { padding-left: 0.5em; } +html[dir="rtl"] #pkgdetails #metadata p { + padding-left: auto; + padding-right: 0.5em; +} + #pkgdetails #metadata .message { font-style: italic; } @@ -844,6 +989,12 @@ table.results { margin-right: 2%; } +html[dir="rtl"] #pkgdetails #pkgdeps { + float: right; + margin-right: auto; + margin-left: 2%; +} + #pkgdetails #metadata .virtual-dep, #pkgdetails #metadata .testing-dep, #pkgdetails #metadata .staging-dep, @@ -858,11 +1009,19 @@ table.results { width: 50%; } +html[dir="rtl"] #pkgdetails #pkgreqs { + float: right; +} + #pkgdetails #pkgfiles { clear: left; padding-top: 1em; } +html[dir="rtl"] #pkgdetails #pkgfiles { + clear: right; +} + #pkgfilelist li.d { color: #666; } @@ -881,6 +1040,11 @@ table td.country { padding-left: 0; } +html[dir="rtl"] #list-generator div ul { + padding-left: auto; + padding-right: 0; +} + #list-generator div ul li { display: inline; } @@ -925,6 +1089,11 @@ table td.country { padding-top: 2.25em; } + html[dir="rtl"] .arch-bio-entry td.pic { + padding-right: auto; + padding-left: 15px; + } + .arch-bio-entry td.pic img { padding: 4px; border: 1px solid #ccc; @@ -947,6 +1116,12 @@ table td.country { vertical-align: top; white-space: nowrap; } + + html[dir="rtl"] .arch-bio-entry table.bio th { + text-align: left; + padding-right: auto; + padding-left: 0.5em; + } .arch-bio-entry table.bio td { width: 100%; @@ -968,6 +1143,10 @@ table td.country { border-top: 1px dotted #bbb; } +html[dir="rtl"] #dash-pkg-notify { + text-align: left; +} + #dash-pkg-notify label { width: auto; font-weight: normal; @@ -997,11 +1176,20 @@ ul.admin-actions { margin-top: -2.5em; } +html[dir="rtl"] ul.admin-actions { + float: left; +} + ul.admin-actions li { display: inline; padding-left: 1.5em; } + html[dir="rtl"] ul.admin-actions li { + padding-left: auto; + padding-right: 1.5em; + } + /* colored yes/no type values */ .todo-table .complete, .signoff-yes, @@ -1065,6 +1253,11 @@ ul.signoff-list { padding-left: 1em; } +html[dir="rtl"] #releng-feedback ul { + padding-left: auto; + padding-right: 1em; +} + #releng-feedback li { list-style: none; } diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css index f777ab8..b1cd561 100644 --- a/web/html/css/aurweb.css +++ b/web/html/css/aurweb.css @@ -12,6 +12,10 @@ float: right; } +html[dir="rtl"] #lang_sub { + float: left; +} + .pkglist-nav .page { margin: 0 .25em; } @@ -45,6 +49,10 @@ text-align:right; } +html[dir="rtl"] #pkg-updates td.pkg-date { + text-align: left; +} + .keyword:link, .keyword:visited { float: left; margin: 1px .5ex 1px 0; @@ -55,6 +63,12 @@ border-radius: 2px; } +html[dir="rtl"] .keyword:link, .keyword:visited { + float: right; + margin-right: auto; + margin-left: 0.5em; +} + .keyword:hover { cursor: pointer; } diff --git a/web/lib/aur.inc.php b/web/lib/aur.inc.php index 9015ae8..6fbb32e 100644 --- a/web/lib/aur.inc.php +++ b/web/lib/aur.inc.php @@ -355,6 +355,7 @@ function uid_from_sid($sid="") { */ function html_header($title="", $details=array()) { global $LANG; + global $LANG_DIRECTION; global $SUPPORTED_LANGS; include('header.php'); diff --git a/web/lib/translator.inc.php b/web/lib/translator.inc.php index d53bd53..0a422cf 100644 --- a/web/lib/translator.inc.php +++ b/web/lib/translator.inc.php @@ -52,6 +52,11 @@ $SUPPORTED_LANGS = array( "zh_TW" => "正體中文" ); +$RTL_LANGS = array( + "ar" => "Arabic", + "he" => "Hebrew" +); + function __() { global $LANG; global $l10n; @@ -85,6 +90,7 @@ function _n($msgid1, $msgid2, $n) { # function set_lang() { global $LANG; + global $LANG_DIRECTION = "ltr"; global $SUPPORTED_LANGS; global $streamer, $l10n; @@ -122,6 +128,10 @@ function set_lang() { $LANG = config_get('options', 'default_lang'); } + if array_key_exists($LANG, $RTL_LANGS) { + $LANG_DIRECTION = "rtl"; + } + if ($update_cookie) { $timeout = intval(config_get('options', 'persistent_cookie_timeout')); $cookie_time = time() + $timeout; diff --git a/web/template/header.php b/web/template/header.php index 874109a..4dab832 100644 --- a/web/template/header.php +++ b/web/template/header.php @@ -2,7 +2,9 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" - xml:lang="<?= htmlspecialchars($LANG, ENT_QUOTES) ?>" lang="<?= htmlspecialchars($LANG, ENT_QUOTES) ?>"> + xml:lang="<?= htmlspecialchars($LANG, ENT_QUOTES) ?>" + lang="<?= htmlspecialchars($LANG, ENT_QUOTES) ?>" + dir="<?= htmlspecialchars($LANG_DIRECTION, ENT_QUOTES) ?>"> <head> <title>AUR (<?= htmlspecialchars($LANG); ?>)<?php if ($title != "") { print " - " . htmlspecialchars($title); } ?></title> <link rel='stylesheet' type='text/css' href='/css/archweb.css' /> -- 2.9.0
On Wed, 13 Jul 2016 at 08:19:57, safaalfulaij via aur-dev wrote:
Add Right-To-Left layout support.
A commit message body that is (almost) a 1-to-1 copy of the subject does not help a lot. It would be great if you could give a very short summary of the implementation here, though.
Signed-off-by: Safa AlFulaij <safa1996alfulaij@gmail.com> --- web/html/css/archweb.css | 193 +++++++++++++++++++++++++++++++++++++++++++++ web/html/css/aurweb.css | 14 ++++ web/lib/aur.inc.php | 1 + web/lib/translator.inc.php | 10 +++ web/template/header.php | 4 +- 5 files changed, 221 insertions(+), 1 deletion(-)
diff --git a/web/html/css/archweb.css b/web/html/css/archweb.css index b7d6e1e..a908049 100644 --- a/web/html/css/archweb.css +++ b/web/html/css/archweb.css
archweb.css is imported from the archweb Git repository and synced from time to time. This means we must not make any changes to that file. All additions must be added to aurweb.css instead. For example...
@@ -58,6 +58,12 @@ ul { padding-left: 2em; }
+html[dir="rtl"] ol, +ul { + padding-left: auto; + padding-right: 2em; +} +
... this hunk should be moved there. I am not entirely sure but you might need to add !important or something similar. The same applies to all other changes below. It might even be a good idea to have all RTL related changes in one block in aurweb.css that is prefaced by a comment.
ul { list-style: square; } @@ -152,6 +158,11 @@ a.headerlink { padding-left: 0.5em; }
+html[dir="rtl"] a.headerlink { + padding-left: auto; + padding-right: 0.5em; +} + h3:hover > a.headerlink { visibility: visible; } [...] diff --git a/web/lib/translator.inc.php b/web/lib/translator.inc.php index d53bd53..0a422cf 100644 --- a/web/lib/translator.inc.php +++ b/web/lib/translator.inc.php @@ -52,6 +52,11 @@ $SUPPORTED_LANGS = array( "zh_TW" => "正體中文" );
+$RTL_LANGS = array( + "ar" => "Arabic", + "he" => "Hebrew" +);
I do not think we need to repeat the long names here, do we? Something like $RTL_LANGS = array("ar", "he"); should work. And then we can use in_array() instead of array_key_exists() in the following hunk:
[...] @@ -122,6 +128,10 @@ function set_lang() { $LANG = config_get('options', 'default_lang'); }
+ if array_key_exists($LANG, $RTL_LANGS) { + $LANG_DIRECTION = "rtl"; + } + if ($update_cookie) { $timeout = intval(config_get('options', 'persistent_cookie_timeout')); $cookie_time = time() + $timeout; [...]
Looks good to me otherwise. Thank you for working on this!
Hi! Do I really need to add !important? Other sites (Like Pootle) don't add it and things work. And yes, we don't need to repeat the names but I don't develop with PHP so I don't know :) Just copied what's in the file. Will fix that, thanks! I want to make sure that "table th.tablesorter-header" is used in AUR so that I don't attach it if not (There are a huge number of customizations in the first diff, that are not used at all :) ) Last thing: Can you apply this and check if things is correct? Because it seems like a TU page that I don't have access to. (Stylish addon will be enough)
*[lang="ar"] { direction: rtl; }
html[lang="ar"] ul.admin-actions {
float: left; }
html[lang="ar"] ul.admin-actions li {
padding-left: auto; padding-right: 1.5em; }
Thanks! P.S: I'm subscribed to the list ;)
On Fri, 15 Jul 2016 at 11:10:12, Safa Alfulaij wrote:
Do I really need to add !important? Other sites (Like Pootle) don't add it and things work.
I actually think that it is not needed. However, it is a way of enforcing a redefinition of previous values if CSS cascading decides to not take your RTL overrides into account (which is what I wanted to express by saying you "might need to add !important").
I want to make sure that "table th.tablesorter-header" is used in AUR so that I don't attach it if not (There are a huge number of customizations in the first diff, that are not used at all :) )
Of course. It would be great to keep the amount of redefinitions as small as possible.
Last thing: Can you apply this and check if things is correct? Because it seems like a TU page that I don't have access to. (Stylish addon will be enough)
Unfortunately, the machine I am usually doing aurweb related development on is currently broken (short circuit caused by a defective USB power supply) and I will not be able to setup a new one in the upcoming three to four weeks. Maybe Johannes, Marcel or Mark could give it a shot? Thanks!
participants (3)
-
Lukas Fleischer
-
Safa Alfulaij
-
safaalfulaij