[aur-dev] [PATCH] Add RTL Support

13 Jul 2016

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

    

[aur-dev] [PATCH] Add RTL Support

safaalfulaij