[aur-dev] [PATCH] Add RTL Support
safaalfulaij
safa1996alfulaij at gmail.com
Wed Jul 13 06:19:57 UTC 2016
Add Right-To-Left layout support.
Signed-off-by: Safa AlFulaij <safa1996alfulaij at 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
More information about the aur-dev
mailing list