doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Arabic readers get the language code, the link gap and the population column on the wrong side

Browse source 
Four rules in the resources list and tables are physical where the thing they
position follows READING ORDER, so they do not mirror under dir="rtl":

- .r-code sat at margin-left of the language name, landing before the name in Arabic
- .res a + a used margin-left for the gap that exists so "Holy Bible" and
  "JESUS Film" do not read as one string; mirrored, the gap moves outside the
  pair and the two links run together again
- .r-pop aligned right, which is the START of an Arabic row, not the end
- .gt-filter's accent bar marked the left edge rather than the leading edge

Now inline properties. The three border-left-color rules in resources-map.vue
are deliberately untouched: each sits on an element carrying dir="ltr", so its
edge is physical in every locale by design.
This commit is contained in:
Doxa Maps 2026-09-28 23:00:36 +00:00
parent 93061d2029
commit 77503c07a0
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
plugin-designs/gospel-resources/data-tables.vue
View file

@ -342,7 +342,7 @@ useShadowStyles(
'background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.18)}' +
'.is-dark .gt-hero{background:rgba(220,38,38,.12);border-color:rgba(248,113,113,.25)}' +
'.gt-hero b{font-weight:800;font-variant-numeric:tabular-nums}' +
'.gt-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid #d1d4cd;border-left:3px solid #92b195;border-radius:8px;background:#f3f3f1;color:#3b463d;font-size:13px}' +
'.gt-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid #d1d4cd;border-inline-start:3px solid #92b195;border-radius:8px;background:#f3f3f1;color:#3b463d;font-size:13px}' +
'.gt-clear{border:1px solid #d1d4cd;background:#fff;color:#3b463d;font:600 12px inherit;padding:5px 11px;border-radius:7px;cursor:pointer;min-height:32px}' +
'.gt-clear:hover{background:#f3f3f1}' +
'.gt-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}' +

6
plugin-designs/gospel-resources/resources-list.vue
View file

@ -306,11 +306,11 @@ useShadowStyles(
'padding:10px;border-bottom:1px solid rgba(0,0,0,.07)}' +
'.is-dark .row{border-bottom-color:rgba(255,255,255,.08)}' +
'.r-lang{font-size:14px;font-weight:700}' +
'.r-code{font-size:10.5px;opacity:.55;font-family:ui-monospace,monospace;margin-left:6px}' +
'.r-code{font-size:10.5px;opacity:.55;font-family:ui-monospace,monospace;margin-inline-start:6px}' +
'.r-meta{font-size:11.5px;opacity:.68;margin-top:2px;line-height:1.45}' +
'.r-credit{font-size:11.5px;color:#6d766e;margin-top:2px;line-height:1.35}' +
'.is-dark .r-credit{color:#d1d4cd}' +
'.r-pop{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}' +
'.r-pop{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}' +
'.pill{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}' +
'.pill.no{background:rgba(220,38,38,.13);color:#a12020}' +
'.pill.nt{background:rgba(245,158,11,.16);color:#8a6414}' +
@ -319,7 +319,7 @@ useShadowStyles(
'.res a{color:#0b7a5b;text-decoration:none;font-weight:600}' +
'.res a:hover{text-decoration:underline}' +
// Two links on one row need separating, or "Holy Bible" and "JESUS Film" read as one string.
'.res a + a{margin-left:10px}' +
'.res a + a{margin-inline-start:10px}' +
// The film link is a DIFFERENT KIND of resource from a scripture edition, so it is marked rather
// than left to look like another Bible. Muted against the scripture green: a film is a real
// resource but not a text, and this list is about text availability first.