Flip arrows of Bootstrap-styled <select>s for RTL langs (#1526)

* Flip arrows of Bootstrap-styled <select>s for RTL langs

* Use the dir attribute to set document direction

* Remove unused variable and fix use of CSS var
This commit is contained in:
Abdo 2021-12-06 11:40:26 +03:00 committed by GitHub
parent cee57f4cb7
commit b3ea7288ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 8 deletions

View file

@ -438,15 +438,9 @@ div[contenteditable="true"]:focus {{
window_bg_day = self.get_window_bg_color(False).name()
window_bg_night = self.get_window_bg_color(True).name()
body_bg = window_bg_night if theme_manager.night_mode else window_bg_day
if is_rtl(anki.lang.current_lang):
lang_dir = "rtl"
else:
lang_dir = "ltr"
return f"""
body {{ zoom: {zoom}; background-color: --window-bg; direction: {lang_dir}; }}
body {{ zoom: {zoom}; background-color: var(--window-bg); }}
html {{ {font} }}
{button_style}
:root {{ --window-bg: {window_bg_day} }}
@ -496,9 +490,14 @@ html {{ {font} }}
else:
doc_class = ""
if is_rtl(anki.lang.current_lang):
lang_dir = "rtl"
else:
lang_dir = "ltr"
html = f"""
<!doctype html>
<html class="{doc_class}">
<html class="{doc_class}" dir="{lang_dir}">
<head>
<title>{self.title}</title>
{head}

View file

@ -68,3 +68,10 @@ samp {
.isLin {
--base-font-size: 14px;
}
[dir=rtl] {
.form-select {
/* flip <select>'s arrow */
background-position: left .75rem center;
}
}

View file

@ -88,4 +88,6 @@ export async function setupI18n(args: { modules: ModuleName[] }): Promise<void>
setBundles(newBundles);
langs = json.langs;
document.dir = direction();
}