From 82972d28e224349d2f69880575663218c4148bb5 Mon Sep 17 00:00:00 2001 From: Yaron Shahrabani Date: Wed, 26 Jan 2022 17:19:39 +0200 Subject: [PATCH] All the RTL related changes --- aurweb/l10n.py | 3 + aurweb/templates.py | 4 +- templates/partials/layout.html | 2 +- test/test_html.py | 19 ++++ web/html/css/archnavbar/archnavbar.css | 3 +- web/html/css/archweb.css | 133 ++++++++++++++++++++++++- web/html/css/aurweb.css | 19 ++++ 7 files changed, 176 insertions(+), 7 deletions(-) diff --git a/aurweb/l10n.py b/aurweb/l10n.py index f3bbc1da..4998d8ee 100644 --- a/aurweb/l10n.py +++ b/aurweb/l10n.py @@ -40,6 +40,9 @@ SUPPORTED_LANGUAGES = OrderedDict({ }) +RIGHT_TO_LEFT_LANGUAGES = ("he", "ar") + + class Translator: def __init__(self): self._localedir = aurweb.config.get('options', 'localedir') diff --git a/aurweb/templates.py b/aurweb/templates.py index d1830d91..ccadb16d 100644 --- a/aurweb/templates.py +++ b/aurweb/templates.py @@ -69,12 +69,14 @@ def make_context(request: Request, title: str, next: str = None): commit_hash = commit_hash[:7] timezone = time.get_request_timezone(request) + language = l10n.get_request_language(request) return { "request": request, "commit_url": commit_url, "commit_hash": commit_hash, - "language": l10n.get_request_language(request), + "language": language, "languages": l10n.SUPPORTED_LANGUAGES, + "rtl": language in l10n.RIGHT_TO_LEFT_LANGUAGES, "timezone": timezone, "timezones": time.SUPPORTED_TIMEZONES, "title": title, diff --git a/templates/partials/layout.html b/templates/partials/layout.html index 68637ed7..5d8e771b 100644 --- a/templates/partials/layout.html +++ b/templates/partials/layout.html @@ -1,6 +1,6 @@ + xml:lang="{{ language }}" lang="{{ language }}" {% if rtl %}dir="rtl"{% endif %}> {% include 'partials/head.html' %} diff --git a/test/test_html.py b/test/test_html.py index 5e9505dc..df018a03 100644 --- a/test/test_html.py +++ b/test/test_html.py @@ -132,6 +132,25 @@ def test_metrics(client: TestClient): assert resp.headers.get("Content-Type").startswith("text/plain") +def test_rtl(client: TestClient): + responses = {} + expected = [ + [], + [], + ['rtl'], + ['rtl'] + ] + with client as request: + responses["default"] = request.get("/") + responses["de"] = request.get("/", cookies={"AURLANG": "de"}) + responses["he"] = request.get("/", cookies={"AURLANG": "he"}) + responses["ar"] = request.get("/", cookies={"AURLANG": "ar"}) + for i, (lang, resp) in enumerate(responses.items()): + assert resp.status_code == int(HTTPStatus.OK) + t = parse_root(resp.text) + assert t.xpath('//html/@dir') == expected[i] + + def test_404_with_valid_pkgbase(client: TestClient, pkgbase: PackageBase): """ Test HTTPException with status_code == 404 and valid pkgbase. """ endpoint = f"/{pkgbase.Name}" diff --git a/web/html/css/archnavbar/archnavbar.css b/web/html/css/archnavbar/archnavbar.css index 5a83dfd2..18c3aca6 100644 --- a/web/html/css/archnavbar/archnavbar.css +++ b/web/html/css/archnavbar/archnavbar.css @@ -16,10 +16,11 @@ #archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } /* display the list inline, float it to the right and style it */ +[dir="rtl"] #archnavbar ul { text-align: left !important; } #archnavbar ul { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; } +[dir="rtl"] #archnavbar ul li { padding: 14px 0px 0px 15px !important; } #archnavbar ul li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; } /* style the links */ #archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } #archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; } - diff --git a/web/html/css/archweb.css b/web/html/css/archweb.css index 45b9bff0..61dd05c7 100644 --- a/web/html/css/archweb.css +++ b/web/html/css/archweb.css @@ -13,9 +13,16 @@ */ /* container for the entire bar */ + +[dir="rtl"] html { + direction: rtl; +} #archnavbar { min-height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; } + +[dir="rtl"] #archnavbarlogo { float: right !important; } #archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url('archnavbar/archlogo.png') no-repeat !important; } @media (-webkit-min-device-pixel-ratio: 1.2), (min--moz-device-pixel-ratio: 1.2), (-o-min-device-pixel-ratio: 2/1) { + [dir="rtl"] #archnavbarlogo { float: right !important;} #archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url(archnavbar/archlogo.svg) no-repeat !important;background-size:100% !important; } } @@ -27,7 +34,9 @@ #archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } /* display the list inline, float it to the right and style it */ +[dir="rtl"] #archnavbarlist {text-align: left !important;} #archnavbarlist { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; } +[dir="rtl"] #archnavbarlist li { padding: 14px 0px 0px 15px; } #archnavbarlist li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; } /* style the links */ @@ -56,6 +65,11 @@ p { margin: .33em 0 1em; } +[dir="rtl"] ol, +[dir="rtl"] ul { + padding-right: 2em; +} + ol, ul { margin-bottom: 1em; @@ -152,6 +166,10 @@ a { } /* special anchor elements */ +[dir="rtl"] a.headerlink { + padding-right: 0.5em; +} + a.headerlink { visibility: hidden; padding-left: 0.5em; @@ -184,21 +202,38 @@ h5 { } /* general layout */ +[dir="rtl"] #content { + text-align: right; +} + #content { width: 95%; margin: 0 auto; text-align: left; } +[dir="rtl"] #content-left-wrapper { + float: right; +} + #content-left-wrapper { float: left; width: 100%; /* req to keep content above sidebar in source code */ } +[dir="rtl"] #content-left { + margin: 0 0 0 340px; +} + #content-left { margin: 0 340px 0 0; } +[dir="rtl"] #content-right { + float: right; + margin-right: -300px; +} + #content-right { float: left; width: 300px; @@ -248,6 +283,11 @@ table { white-space: normal; } +[dir="rtl"] th, +[dir="rtl"] td { + text-align: right; +} + th, td { white-space: nowrap; @@ -305,6 +345,7 @@ dl { border-top: 1px dotted #bbb; } + [dir="rtl"] dl dt {float: right; padding-left: 15px;} dl dt { color: #333; float:left; @@ -392,6 +433,10 @@ form ul.errorlist { } /* JS sorting via tablesorter */ +[dir="rtl"] table th.tablesorter-header { + padding-left: 20px; + background-position: center left ; +} table th.tablesorter-header { padding-right: 20px; background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); @@ -424,6 +469,9 @@ table thead th.sorter-false { */ /* home: introduction */ +[dir="rtl"] #intro p.readmore { + text-align: left; +} #intro p.readmore { margin: -0.5em 0 0 0; font-size: .9em; @@ -435,6 +483,9 @@ table thead th.sorter-false { margin-top: 1.5em; } + [dir="rtl"] #news h3 { + float: right; + } #news h3 { float: left; padding-bottom: .5em @@ -508,6 +559,7 @@ h3 span.arrow { padding: 0.1em 0; } + [dir="rtl"] #pkgsearch input {float: left;} #pkgsearch input { width: 10em; float: right; @@ -517,6 +569,8 @@ h3 span.arrow { border: 1px solid #09c; } + [dir="rtl"] .pkgsearch-typeahead {right:0;float:right;text-align: right;} + .pkgsearch-typeahead { position: absolute; top: 100%; @@ -551,24 +605,33 @@ h3 span.arrow { #pkg-updates .more { font-weight: normal; } - + [dir="rtl"] #pkg-updates .rss-icon { + float: left;} #pkg-updates .rss-icon { float: right; margin: -2em 0 0 0; } + [dir="rtl"] #pkg-updates .rss-icon.latest { + margin-left: 1em; + } #pkg-updates .rss-icon.latest { margin-right: 1em; } #pkg-updates table { margin: 0; + direction: ltr; } #pkg-updates td.pkg-name { white-space: normal; + text-align: left; } + [dir="rtl"] #pkg-updates td.pkg-arch { + text-align: left; + } #pkg-updates td.pkg-arch { text-align: right; } @@ -583,6 +646,10 @@ h3 span.arrow { } /* home: sidebar navigation */ +[dir="rtl"] #nav-sidebar ul { + margin: 0.5em 1em 0.5em 0; +} + #nav-sidebar ul { list-style: none; margin: 0.5em 0 0.5em 1em; @@ -600,6 +667,11 @@ div.widget { } /* feeds page */ +[dir="rtl"] #rss-feeds .rss { + padding-left: 20px; + background: url(rss.png) top left no-repeat; +} + #rss-feeds .rss { padding-right: 20px; background: url(rss.png) top right no-repeat; @@ -617,6 +689,9 @@ div.widget { } /* news: article list */ +[dir="rtl"] .news-nav { + float: left; +} .news-nav { float: right; margin-top: -2.2em; @@ -648,6 +723,9 @@ div.news-article .article-info { } /* todolists: list */ +[dir="rtl"] .todolist-nav { + float: left; +} .todolist-nav { float: right; margin-top: -2.2em; @@ -679,8 +757,10 @@ table.results { font-size: 0.846em; border-top: 1px dotted #999; border-bottom: 1px dotted #999; + direction: ltr; } + [dir="rtl"] .results th {text-align: center; direction:rtl;} .results th { padding: 0.5em 1em 0.25em 0.25em; border-bottom: 1px solid #999; @@ -690,6 +770,7 @@ table.results { .results td { padding: .3em 1em .3em 3px; + text-align: left; } .results .flagged { @@ -710,15 +791,25 @@ table.results { font-size: 0.85em; } +[dir="rtl"] #pkglist-results .pkglist-nav { + float: left; +} #pkglist-results .pkglist-nav { float: right; margin-top: -2.2em; } +[dir="rtl"] .pkglist-nav .prev { + margin-left: 1em; +} + .pkglist-nav .prev { margin-right: 1em; } +[dir="rtl"] .pkglist-nav .next { + margin-left: 1em; +} .pkglist-nav .next { margin-right: 1em; } @@ -732,7 +823,10 @@ table.results { font-size: 1em; margin-top: 0; } - +[dir="rtl"] .filter-criteria div { + float: right; + margin-left: 1.65em; +} .filter-criteria div { float: left; margin-right: 1.65em; @@ -750,6 +844,9 @@ table.results { } /* pkgdetails: details links that float on the right */ +[dir="rtl"] #pkgdetails #detailslinks { + float: right; +} #pkgdetails #detailslinks { float: right; } @@ -784,6 +881,10 @@ table.results { width: auto; } +[dir="rtl"] #pkgdetails td { + padding: 0.25em 1.5em 0.25em 0; + } + #pkgdetails #pkginfo td { padding: 0.25em 0 0.25em 1.5em; } @@ -826,10 +927,17 @@ table.results { padding: 0; } +[dir="rtl"] #pkgdetails #metadata li { + padding-right: 0.5em; +} + #pkgdetails #metadata li { padding-left: 0.5em; } +[dir="rtl"] #pkgdetails #metadata p { + padding-right: 0.5em; +} #pkgdetails #metadata p { padding-left: 0.5em; } @@ -842,6 +950,11 @@ table.results { clear: both; } +[dir="rtl"] #pkgdetails #pkgdeps { + float: right; + margin-left: 2%; + +} #pkgdetails #pkgdeps { float: left; width: 48%; @@ -857,6 +970,11 @@ table.results { #pkgdetails #metadata .dep-desc { font-style: italic; } + +[dir="rtl"] #pkgdetails #pkgreqs { + float: right; +} + #pkgdetails #pkgreqs { float: left; width: 50%; @@ -922,7 +1040,9 @@ table td.country { min-width: 640px; margin: 0 auto; } - + .arch-bio-entry td.pic { + padding-left: 15px; + } .arch-bio-entry td.pic { vertical-align: top; padding-right: 15px; @@ -942,6 +1062,10 @@ table td.country { .arch-bio-entry table.bio { margin-bottom: 2em; } + [dir="rtl"] .arch-bio-entry table.bio th { + text-align: left; + padding-left: 0.5em; + } .arch-bio-entry table.bio th { color: #666; @@ -990,6 +1114,7 @@ table.dash-stats .key { } /* dev dashboard: admin actions (add news items, todo list, etc) */ +[dir="rtl"] ul.admin-actions {float: left;} ul.admin-actions { float: right; list-style: none; @@ -1105,4 +1230,4 @@ ul.signoff-list { /* itemprops */ .itemprop { display: none; -} +} \ No newline at end of file diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css index d5752c07..22b5ac65 100644 --- a/web/html/css/aurweb.css +++ b/web/html/css/aurweb.css @@ -8,6 +8,9 @@ background: url('archnavbar/aurlogo.png') !important; } +[dir="rtl"] #lang_sub { + float: left; + } #lang_sub { float: right; } @@ -41,10 +44,17 @@ text-overflow: ellipsis; } +[dir="rtl"] #pkg-updates td.pkg-date { + text-align:left; +} #pkg-updates td.pkg-date { text-align:right; } +[dir="rtl"] .keyword:link, .keyword:visited { + float: right; +} + .keyword:link, .keyword:visited { float: left; margin: 1px .5ex 1px 0; @@ -93,6 +103,11 @@ color: #999; } +[dir="rtl"] .delete-comment-form, .undelete-comment-form, .pin-comment-form, .edit-comment { + float: left; + margin-right: 8px; +} + .delete-comment-form, .undelete-comment-form, .pin-comment-form, .edit-comment { float: right; margin-left: 8px; @@ -121,6 +136,10 @@ opacity: 1; } +[dir="rtl"] .ajax-loader { + float: left; +} + .ajax-loader { float: right; position: relative;