From c44d7bcd443feb0cda50b741baba2f4a04982c44 Mon Sep 17 00:00:00 2001 From: Max Pozdeev Date: Sun, 20 Sep 2020 17:20:34 +0300 Subject: [PATCH] fix style for RTL languages --- src/content/lang/en-rtl.json | 11 +++++++ src/content/themes/default/index.php | 1 - src/content/themes/default/style.css | 20 +++++++----- src/content/themes/default/style_rtl.css | 41 ++++++++++-------------- 4 files changed, 40 insertions(+), 33 deletions(-) create mode 100644 src/content/lang/en-rtl.json diff --git a/src/content/lang/en-rtl.json b/src/content/lang/en-rtl.json new file mode 100644 index 0000000..eab97d8 --- /dev/null +++ b/src/content/lang/en-rtl.json @@ -0,0 +1,11 @@ +{ + "_header": { + "ver": "v1.6", + "date": "2020-09-04", + "language": "English (for RTL test)", + "original_name": "English RTL", + "author": "Max Pozdeev", + "author_url": "http://www.mytinytodo.net" + }, + "_rtl": 1 +} \ No newline at end of file diff --git a/src/content/themes/default/index.php b/src/content/themes/default/index.php index 2fa9932..b440dc5 100644 --- a/src/content/themes/default/index.php +++ b/src/content/themes/default/index.php @@ -61,7 +61,6 @@ $().ready(function(){ - | diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css index e816ad3..6525f04 100644 --- a/src/content/themes/default/style.css +++ b/src/content/themes/default/style.css @@ -27,17 +27,20 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .topblock-title { display:flex; align-items:center; } .topblock-bar { flex-grow:1; display:flex; justify-content:flex-start; border-bottom:1px solid #b5d5ff; padding-bottom:5px; } -#mtt_body.readonly .need-owner { display:none; } -.bar-menu { flex-grow:1; text-align:right; } +.bar-menu { flex-grow:1; display:flex; justify-content:flex-end; } .nodecor { text-decoration:none; } +#bar_auth::before { content:'\00a0| '; } /*   = \00a0 */ #bar_logout { display:none; } #mtt_body.no-need-auth #bar_auth { display:none; } +#mtt_body.readonly .need-owner { display:none; } +#mtt_body.readonly #bar_auth::before { display:none; } + #authform { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; border-radius:2px; padding:10px; min-width:160px; box-shadow:1px 2px 5px rgba(0,0,0,0.5); } #authform div { padding:2px 0px; } #authform div.h { font-weight:bold; } #authform input { padding:3px; border:1px solid #ccc; border-radius:2px; } #authform input[type="submit"] { padding:4px; border-radius:3px; background-color:#efefef; } -#loading { background-color:#ffffff; display:none; padding-right:6px; width:16px; height:16px; background:url(images/loading48.gif) no-repeat; background-size:16px 16px; } +#loading { background-color:#ffffff; display:none; margin-right:6px; width:16px; height:16px; background:url(images/loading48.gif) no-repeat; background-size:16px 16px; } #msg { } #msg .msg-text { font-weight:bold; cursor:pointer; } @@ -103,7 +106,7 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } /* Quick Task Add */ .taskbox-c { flex-grow:1; display:flex; align-items:center; } .mtt-taskbox { position:relative; padding-left:22px; /*input padding+border*/ width:100%; max-width:430px; } -#task { color:#444444; background:#fff; height:1.35rem; padding:2px 4px; padding-right:18px; border:1px solid #ccc; border-radius:3px; width:100%; margin-left:-22px; } +#task { color:#444444; background:#fff; height:1.35rem; padding:2px 4px; padding-right:20px; border:1px solid #ccc; border-radius:3px; width:100%; margin-left:-24px; } #mtt_body.show-all-tasks .taskbox-c, #mtt_body.readonly .taskbox-c { display:none; } .mtt-taskbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; } @@ -173,9 +176,10 @@ li.task-expanded .task-toggle { transform:rotate(90deg); } .task-actions { flex:0 0 1rem; margin-left:5px; } .task-left label { min-width:18px; text-align:center; } /* Safari has small checkboxes */ -.task-date { color:#999999; font-size:0.8rem; margin-left:4px; display:none; } +.task-title { display:inline-block; } +.task-date { color:#999999; font-size:0.8rem; margin-left:4px; display:inline-block; display:none; } .task-date-completed { color:#999999; display:none; margin-left:5px; } -.show-inline-date .task-date { display:inline; } +.show-inline-date .task-date { display:inline-block; } .show-inline-date li.task-completed .task-date-completed { display:inline; } .show-inline-date li.task-completed .task-date { display:none; } .task-through { overflow:hidden; flex-grow:1; } @@ -184,7 +188,7 @@ li.task-expanded .task-toggle { transform:rotate(90deg); } .task-title a:hover { color:#af0000; } #mtt_body.readonly #tasklist li .task-actions { display:none; } .task-listname { background-color:#eee; color:#555; padding:0px 3px; } -.task-tags { padding:0px 2px; } +.task-tags { padding:0px 2px; display:inline-block; } .task-tags .tag { font-size:0.8rem; font-weight:bold; color:#333333; text-decoration:underline; } .task-tags .tag:hover { } .duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; } @@ -229,7 +233,7 @@ li.task-completed .task-note-block .task-note { text-decoration:line-through; } .task-note span a { color:#777777; } .task-note span a:hover { color:#af0000; } -.task-prio { padding-left:2px; padding-right:2px; margin-left:0px; margin-right:5px; cursor:default; } +.task-prio { padding-left:2px; padding-right:2px; margin-left:0px; margin-right:5px; cursor:default; display:inline-block; } .prio-neg { background-color:#3377ff; color:#ffffff; } .prio-pos { background-color:#ff3333; color:#ffffff; } .prio-pos-1 { background-color:#ff7700; color:#ffffff; } diff --git a/src/content/themes/default/style_rtl.css b/src/content/themes/default/style_rtl.css index 024715d..1218298 100644 --- a/src/content/themes/default/style_rtl.css +++ b/src/content/themes/default/style_rtl.css @@ -1,35 +1,28 @@ body { direction:rtl; } -h2 { float:right; padding-left:10px; padding-right:0px; } -.bar-menu { float:left; } -#loading { float:right; } -#lists .mtt-tabs { float:right; } -.mtt-tabs li { float:right; margin:1px 0 0 3px; } +h2 { padding-left:10px; padding-right:0px; } +#loading { margin-left:6px; margin-right:0px; } +.mtt-tabs li { margin-left:3px; margin-right:0px; } .mtt-tab { border-top-right-radius:0px; border-top-left-radius:8px; } -.mtt-tab a { padding:6px 2px 0px 6px; } -.mtt-tabs-add-button { float:right; border-top-right-radius:0px; border-top-left-radius:8px; } +.mtt-tabs-add-button { border-top-right-radius:0px; border-top-left-radius:8px; } -#tabs_buttons { float:left; } -.mtt-tabs-button { float:right; } -#tagcloudbtn { float:left; } - -#htab_search { float:left; } -#task { padding: 2px 2px 2px 18px; } -#task_placeholder span { right:0px; left:auto; } -.mtt-taskbox-icon.mtt-icon-submittask { left:4px; right:auto; } +#task { padding-left:20px; padding-right:4px; } +.mtt-taskbox-icon { left:2px; right:auto; transform:rotateY(180deg); } +#newtask_adv { margin-left:0; margin-right:0.5rem; } .mtt-searchbox-icon.mtt-icon-search { right:4px; left:auto; } .mtt-searchbox-icon.mtt-icon-cancelsearch { left:4px; right:auto; } -.task-actions { float:left; text-align:left; width:15px; } -.task-left { float:right; } -.task-toggle { float:right; } -.task-middle { margin-right:40px; margin-left:25px; } -.task-date { margin-right:4px; } -.duedate { float:left; margin-left:0; margin-right:5px; } +.task-toggle { margin-left:2px; margin-right:0; transform:rotate(180deg); } +.task-middle { margin-left:0; margin-right:5px; } +.task-actions { margin-left:0; margin-right:5px; } + +.task-prio { margin-left:5px; margin-right:0; } +.task-note-block { margin-left:0; margin-right:2px; padding-left:0; padding-right:19px; background-position:right 0px;} +.task-date { margin-left:0; margin-right:4px; } +.duedate { margin-left:0; margin-right:5px; } .duedate-arrow { display:none; } -.duedate:before { content:'\2190'; } -.task-through-right { float:left; } +.duedate:before { content:'\20\2190\20'; } +.task-date-completed { margin-left:0; margin-right:5px; } #taskedit-date { float:left; } #page_taskedit .form-row-short { float:right; margin-left:12px; margin-right:0; } -.task-prio { float:right; margin-left:4px; margin-right:0; } .alltags-cell { padding-left:0; padding-right:5px; } \ No newline at end of file