external/aurweb
0
0
Fork 0
mirror of https://gitlab.archlinux.org/archlinux/aurweb.git synced 2025-02-03 10:43:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

All the RTL related changes

Browse source
This commit is contained in:
Yaron Shahrabani 2022-01-26 17:19:39 +02:00
parent ba6ba4c367
commit 82972d28e2
7 changed files with 176 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
aurweb/l10n.py
View file

@ -40,6 +40,9 @@ SUPPORTED_LANGUAGES = OrderedDict({
}) })
RIGHT_TO_LEFT_LANGUAGES = ("he", "ar")
class Translator: class Translator:
def __init__(self): def __init__(self):
self._localedir = aurweb.config.get('options', 'localedir') self._localedir = aurweb.config.get('options', 'localedir')

4
aurweb/templates.py
View file

@ -69,12 +69,14 @@ def make_context(request: Request, title: str, next: str = None):
commit_hash = commit_hash[:7] commit_hash = commit_hash[:7]
timezone = time.get_request_timezone(request) timezone = time.get_request_timezone(request)
language = l10n.get_request_language(request)
return { return {
"request": request, "request": request,
"commit_url": commit_url, "commit_url": commit_url,
"commit_hash": commit_hash, "commit_hash": commit_hash,
"language": l10n.get_request_language(request), "language": language,
"languages": l10n.SUPPORTED_LANGUAGES, "languages": l10n.SUPPORTED_LANGUAGES,
"rtl": language in l10n.RIGHT_TO_LEFT_LANGUAGES,
"timezone": timezone, "timezone": timezone,
"timezones": time.SUPPORTED_TIMEZONES, "timezones": time.SUPPORTED_TIMEZONES,
"title": title, "title": title,

2
templates/partials/layout.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="{{ language }}" lang="{{ language }}"> xml:lang="{{ language }}" lang="{{ language }}" {% if rtl %}dir="rtl"{% endif %}>
{% include 'partials/head.html' %} {% include 'partials/head.html' %}
<body> <body>

19
test/test_html.py
View file

@ -132,6 +132,25 @@ def test_metrics(client: TestClient):
assert resp.headers.get("Content-Type").startswith("text/plain") 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): def test_404_with_valid_pkgbase(client: TestClient, pkgbase: PackageBase):
""" Test HTTPException with status_code == 404 and valid pkgbase. """ """ Test HTTPException with status_code == 404 and valid pkgbase. """
endpoint = f"/{pkgbase.Name}" endpoint = f"/{pkgbase.Name}"

3
web/html/css/archnavbar/archnavbar.css
View file

@ -16,10 +16,11 @@
#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } #archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; }
/* display the list inline, float it to the right and style it */ /* 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; } #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; } #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 */ /* style the links */
#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } #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; } #archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; }

131
web/html/css/archweb.css
View file

@ -13,9 +13,16 @@
*/ */
/* container for the entire bar */ /* 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; } #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; } #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) { @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; #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; } #archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; }
/* display the list inline, float it to the right and style it */ /* 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; } #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; } #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 */ /* style the links */
@ -56,6 +65,11 @@ p {
margin: .33em 0 1em; margin: .33em 0 1em;
} }
[dir="rtl"] ol,
[dir="rtl"] ul {
padding-right: 2em;
}
ol, ol,
ul { ul {
margin-bottom: 1em; margin-bottom: 1em;
@ -152,6 +166,10 @@ a {
} }
/* special anchor elements */ /* special anchor elements */
[dir="rtl"] a.headerlink {
padding-right: 0.5em;
}
a.headerlink { a.headerlink {
visibility: hidden; visibility: hidden;
padding-left: 0.5em; padding-left: 0.5em;
@ -184,21 +202,38 @@ h5 {
} }
/* general layout */ /* general layout */
[dir="rtl"] #content {
text-align: right;
}
#content { #content {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
} }
[dir="rtl"] #content-left-wrapper {
float: right;
}
#content-left-wrapper { #content-left-wrapper {
float: left; float: left;
width: 100%; /* req to keep content above sidebar in source code */ width: 100%; /* req to keep content above sidebar in source code */
} }
[dir="rtl"] #content-left {
margin: 0 0 0 340px;
}
#content-left { #content-left {
margin: 0 340px 0 0; margin: 0 340px 0 0;
} }
[dir="rtl"] #content-right {
float: right;
margin-right: -300px;
}
#content-right { #content-right {
float: left; float: left;
width: 300px; width: 300px;
@ -248,6 +283,11 @@ table {
white-space: normal; white-space: normal;
} }
[dir="rtl"] th,
[dir="rtl"] td {
text-align: right;
}
th, th,
td { td {
white-space: nowrap; white-space: nowrap;
@ -305,6 +345,7 @@ dl {
border-top: 1px dotted #bbb; border-top: 1px dotted #bbb;
} }
[dir="rtl"] dl dt {float: right; padding-left: 15px;}
dl dt { dl dt {
color: #333; color: #333;
float:left; float:left;
@ -392,6 +433,10 @@ form ul.errorlist {
} }
/* JS sorting via tablesorter */ /* JS sorting via tablesorter */
[dir="rtl"] table th.tablesorter-header {
padding-left: 20px;
background-position: center left ;
}
table th.tablesorter-header { table th.tablesorter-header {
padding-right: 20px; padding-right: 20px;
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
@ -424,6 +469,9 @@ table thead th.sorter-false {
*/ */
/* home: introduction */ /* home: introduction */
[dir="rtl"] #intro p.readmore {
text-align: left;
}
#intro p.readmore { #intro p.readmore {
margin: -0.5em 0 0 0; margin: -0.5em 0 0 0;
font-size: .9em; font-size: .9em;
@ -435,6 +483,9 @@ table thead th.sorter-false {
margin-top: 1.5em; margin-top: 1.5em;
} }
[dir="rtl"] #news h3 {
float: right;
}
#news h3 { #news h3 {
float: left; float: left;
padding-bottom: .5em padding-bottom: .5em
@ -508,6 +559,7 @@ h3 span.arrow {
padding: 0.1em 0; padding: 0.1em 0;
} }
[dir="rtl"] #pkgsearch input {float: left;}
#pkgsearch input { #pkgsearch input {
width: 10em; width: 10em;
float: right; float: right;
@ -517,6 +569,8 @@ h3 span.arrow {
border: 1px solid #09c; border: 1px solid #09c;
} }
[dir="rtl"] .pkgsearch-typeahead {right:0;float:right;text-align: right;}
.pkgsearch-typeahead { .pkgsearch-typeahead {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -551,24 +605,33 @@ h3 span.arrow {
#pkg-updates .more { #pkg-updates .more {
font-weight: normal; font-weight: normal;
} }
[dir="rtl"] #pkg-updates .rss-icon {
float: left;}
#pkg-updates .rss-icon { #pkg-updates .rss-icon {
float: right; float: right;
margin: -2em 0 0 0; margin: -2em 0 0 0;
} }
[dir="rtl"] #pkg-updates .rss-icon.latest {
margin-left: 1em;
}
#pkg-updates .rss-icon.latest { #pkg-updates .rss-icon.latest {
margin-right: 1em; margin-right: 1em;
} }
#pkg-updates table { #pkg-updates table {
margin: 0; margin: 0;
direction: ltr;
} }
#pkg-updates td.pkg-name { #pkg-updates td.pkg-name {
white-space: normal; white-space: normal;
text-align: left;
} }
[dir="rtl"] #pkg-updates td.pkg-arch {
text-align: left;
}
#pkg-updates td.pkg-arch { #pkg-updates td.pkg-arch {
text-align: right; text-align: right;
} }
@ -583,6 +646,10 @@ h3 span.arrow {
} }
/* home: sidebar navigation */ /* home: sidebar navigation */
[dir="rtl"] #nav-sidebar ul {
margin: 0.5em 1em 0.5em 0;
}
#nav-sidebar ul { #nav-sidebar ul {
list-style: none; list-style: none;
margin: 0.5em 0 0.5em 1em; margin: 0.5em 0 0.5em 1em;
@ -600,6 +667,11 @@ div.widget {
} }
/* feeds page */ /* feeds page */
[dir="rtl"] #rss-feeds .rss {
padding-left: 20px;
background: url(rss.png) top left no-repeat;
}
#rss-feeds .rss { #rss-feeds .rss {
padding-right: 20px; padding-right: 20px;
background: url(rss.png) top right no-repeat; background: url(rss.png) top right no-repeat;
@ -617,6 +689,9 @@ div.widget {
} }
/* news: article list */ /* news: article list */
[dir="rtl"] .news-nav {
float: left;
}
.news-nav { .news-nav {
float: right; float: right;
margin-top: -2.2em; margin-top: -2.2em;
@ -648,6 +723,9 @@ div.news-article .article-info {
} }
/* todolists: list */ /* todolists: list */
[dir="rtl"] .todolist-nav {
float: left;
}
.todolist-nav { .todolist-nav {
float: right; float: right;
margin-top: -2.2em; margin-top: -2.2em;
@ -679,8 +757,10 @@ table.results {
font-size: 0.846em; font-size: 0.846em;
border-top: 1px dotted #999; border-top: 1px dotted #999;
border-bottom: 1px dotted #999; border-bottom: 1px dotted #999;
direction: ltr;
} }
[dir="rtl"] .results th {text-align: center; direction:rtl;}
.results th { .results th {
padding: 0.5em 1em 0.25em 0.25em; padding: 0.5em 1em 0.25em 0.25em;
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
@ -690,6 +770,7 @@ table.results {
.results td { .results td {
padding: .3em 1em .3em 3px; padding: .3em 1em .3em 3px;
text-align: left;
} }
.results .flagged { .results .flagged {
@ -710,15 +791,25 @@ table.results {
font-size: 0.85em; font-size: 0.85em;
} }
[dir="rtl"] #pkglist-results .pkglist-nav {
float: left;
}
#pkglist-results .pkglist-nav { #pkglist-results .pkglist-nav {
float: right; float: right;
margin-top: -2.2em; margin-top: -2.2em;
} }
[dir="rtl"] .pkglist-nav .prev {
margin-left: 1em;
}
.pkglist-nav .prev { .pkglist-nav .prev {
margin-right: 1em; margin-right: 1em;
} }
[dir="rtl"] .pkglist-nav .next {
margin-left: 1em;
}
.pkglist-nav .next { .pkglist-nav .next {
margin-right: 1em; margin-right: 1em;
} }
@ -732,7 +823,10 @@ table.results {
font-size: 1em; font-size: 1em;
margin-top: 0; margin-top: 0;
} }
[dir="rtl"] .filter-criteria div {
float: right;
margin-left: 1.65em;
}
.filter-criteria div { .filter-criteria div {
float: left; float: left;
margin-right: 1.65em; margin-right: 1.65em;
@ -750,6 +844,9 @@ table.results {
} }
/* pkgdetails: details links that float on the right */ /* pkgdetails: details links that float on the right */
[dir="rtl"] #pkgdetails #detailslinks {
float: right;
}
#pkgdetails #detailslinks { #pkgdetails #detailslinks {
float: right; float: right;
} }
@ -784,6 +881,10 @@ table.results {
width: auto; width: auto;
} }
[dir="rtl"] #pkgdetails td {
padding: 0.25em 1.5em 0.25em 0;
}
#pkgdetails #pkginfo td { #pkgdetails #pkginfo td {
padding: 0.25em 0 0.25em 1.5em; padding: 0.25em 0 0.25em 1.5em;
} }
@ -826,10 +927,17 @@ table.results {
padding: 0; padding: 0;
} }
[dir="rtl"] #pkgdetails #metadata li {
padding-right: 0.5em;
}
#pkgdetails #metadata li { #pkgdetails #metadata li {
padding-left: 0.5em; padding-left: 0.5em;
} }
[dir="rtl"] #pkgdetails #metadata p {
padding-right: 0.5em;
}
#pkgdetails #metadata p { #pkgdetails #metadata p {
padding-left: 0.5em; padding-left: 0.5em;
} }
@ -842,6 +950,11 @@ table.results {
clear: both; clear: both;
} }
[dir="rtl"] #pkgdetails #pkgdeps {
float: right;
margin-left: 2%;
}
#pkgdetails #pkgdeps { #pkgdetails #pkgdeps {
float: left; float: left;
width: 48%; width: 48%;
@ -857,6 +970,11 @@ table.results {
#pkgdetails #metadata .dep-desc { #pkgdetails #metadata .dep-desc {
font-style: italic; font-style: italic;
} }
[dir="rtl"] #pkgdetails #pkgreqs {
float: right;
}
#pkgdetails #pkgreqs { #pkgdetails #pkgreqs {
float: left; float: left;
width: 50%; width: 50%;
@ -922,7 +1040,9 @@ table td.country {
min-width: 640px; min-width: 640px;
margin: 0 auto; margin: 0 auto;
} }
.arch-bio-entry td.pic {
padding-left: 15px;
}
.arch-bio-entry td.pic { .arch-bio-entry td.pic {
vertical-align: top; vertical-align: top;
padding-right: 15px; padding-right: 15px;
@ -942,6 +1062,10 @@ table td.country {
.arch-bio-entry table.bio { .arch-bio-entry table.bio {
margin-bottom: 2em; margin-bottom: 2em;
} }
[dir="rtl"] .arch-bio-entry table.bio th {
text-align: left;
padding-left: 0.5em;
}
.arch-bio-entry table.bio th { .arch-bio-entry table.bio th {
color: #666; color: #666;
@ -990,6 +1114,7 @@ table.dash-stats .key {
} }
/* dev dashboard: admin actions (add news items, todo list, etc) */ /* dev dashboard: admin actions (add news items, todo list, etc) */
[dir="rtl"] ul.admin-actions {float: left;}
ul.admin-actions { ul.admin-actions {
float: right; float: right;
list-style: none; list-style: none;

19
web/html/css/aurweb.css
View file

@ -8,6 +8,9 @@
background: url('archnavbar/aurlogo.png') !important; background: url('archnavbar/aurlogo.png') !important;
} }
[dir="rtl"] #lang_sub {
float: left;
}
#lang_sub { #lang_sub {
float: right; float: right;
} }
@ -41,10 +44,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
[dir="rtl"] #pkg-updates td.pkg-date {
text-align:left;
}
#pkg-updates td.pkg-date { #pkg-updates td.pkg-date {
text-align:right; text-align:right;
} }
[dir="rtl"] .keyword:link, .keyword:visited {
float: right;
}
.keyword:link, .keyword:visited { .keyword:link, .keyword:visited {
float: left; float: left;
margin: 1px .5ex 1px 0; margin: 1px .5ex 1px 0;
@ -93,6 +103,11 @@
color: #999; 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 { .delete-comment-form, .undelete-comment-form, .pin-comment-form, .edit-comment {
float: right; float: right;
margin-left: 8px; margin-left: 8px;
@ -121,6 +136,10 @@
opacity: 1; opacity: 1;
} }
[dir="rtl"] .ajax-loader {
float: left;
}
.ajax-loader { .ajax-loader {
float: right; float: right;
position: relative; position: relative;