mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 11:25:19 -05:00
Lauri Ojansivu
2536861b79
(Arabic and its variants, Persian/Farsi, Hebrew, Uyghur, Uzbek-Arabic and Yiddish — the languages flagged `rtl: true` in `imports/i18n/languages.js`). Previously only some pages flipped. The root `<html>` element now gets a reactive `dir="rtl"`/`dir="ltr"` attribute that follows the chosen language, so the whole UI mirrors at once. To make this work on every page rather than a handful, all directional component CSS was converted to CSS logical properties (`margin-left`→`margin-inline-start`, `left:`→`inset-inline-start:`, `text-align: left`→`text-align: start`, `float: left`→`float: inline-start`, and the mirror-image right/end variants) across 48 stylesheets, which flip automatically with `dir`. Horizontal-centering rules using `left: 50%` + `transform: translate(-50%, …)` were intentionally kept physical, since those already center correctly in both directions. The calendar view also renders RTL. Thanks to xet7 and Claude. - Tests for the RTL UI. A fast, server-less `tests/rtl.test.js` (run with `node tests/rtl.test.js`) checks that exactly the expected languages are flagged `rtl: true`, that the direction helper maps each language to the right `dir` value, that the root `<html>` and the client keep `dir` in sync, and — as a regression guard — that component CSS keeps using logical properties (no physical `margin-left`/`float: left`/bare `left:` offsets sneak back in). A Playwright browser spec `tests/playwright/specs/18-rtl-layout.e2e.js` drives the app in both English (LTR) and Arabic (RTL) and asserts, on the boards list, board view, card details, my-cards / due-cards / global-search, the admin settings page and the login page, that the direction is correct, the translated text is visible, and leading-edge content (the boards menu, the first board list) sits on the correct side. Thanks to xet7 and Claude. - Fixed the "Meteor unit tests" CI job hanging until its 45-minute timeout. The workflow set `TEST_WATCH: '0'`, but meteortesting:mocha computes `testWatch: TEST_WATCH || …` and the string `'0'` is truthy in JavaScript, so it turned on watch mode and the process never exited. Removing the env var lets `meteor test --once` finish and exit with the correct status. Thanks to xet7 and Claude ! Fixes #6136, fixes #3376, fixes #884
100 lines
2.0 KiB
CSS
100 lines
2.0 KiB
CSS
.my-cards-board-wrapper {
|
|
border-radius: 0 0 0.5vw 0.5vw;
|
|
min-width: min(400px, 52vw);
|
|
margin-bottom: 2.5vh;
|
|
margin-inline-end: auto;
|
|
margin-inline-start: auto;
|
|
border-width: 0.3vw;
|
|
border-style: solid;
|
|
border-color: #a2a2a2;
|
|
}
|
|
.my-cards-board-title {
|
|
font-size: clamp(1.2rem, 3vw, 1.6rem);
|
|
font-weight: bold;
|
|
padding: 0.7vh 0.7vw;
|
|
background-color: #808080;
|
|
color: #fff;
|
|
}
|
|
.my-cards-swimlane-title {
|
|
font-size: clamp(1rem, 2.5vw, 1.3rem);
|
|
font-weight: bold;
|
|
padding: 0.7vh 0.7vw;
|
|
padding-bottom: 0.5vh;
|
|
margin-top: 0;
|
|
margin-bottom: 0.7vh;
|
|
text-align: center;
|
|
}
|
|
.swimlane-default-color {
|
|
background-color: #d3d3d3;
|
|
}
|
|
.my-cards-list-title {
|
|
font-weight: bold;
|
|
font-size: clamp(1rem, 2.5vw, 1.3rem);
|
|
text-align: center;
|
|
margin-bottom: 0.9vh;
|
|
}
|
|
.my-cards-list-wrapper {
|
|
margin: 1.3vh 1.3vw;
|
|
border-radius: 0.7vw;
|
|
display: inline-grid;
|
|
min-width: min(250px, 32vw);
|
|
max-width: min(350px, 45vw);
|
|
}
|
|
.my-cards-card-wrapper {
|
|
margin-top: 0;
|
|
margin-bottom: 1.3vh;
|
|
}
|
|
.my-cards-dueat-list-wrapper {
|
|
max-width: min(500px, 65vw);
|
|
margin-inline-end: auto;
|
|
margin-inline-start: auto;
|
|
}
|
|
.my-cards-board-table thead {
|
|
border-bottom: 3px solid #4d4d4d;
|
|
background-color: transparent;
|
|
}
|
|
.my-cards-board-table th,
|
|
.my-cards-board-table td {
|
|
border: 0;
|
|
}
|
|
.my-cards-board-table tr {
|
|
border-bottom: 2px solid #a2a2a2;
|
|
}
|
|
.my-cards-card-title-table {
|
|
font-weight: bold;
|
|
padding-inline-start: 2px;
|
|
max-width: 243px;
|
|
}
|
|
.my-cards-board-badge {
|
|
width: 36px;
|
|
height: 24px;
|
|
float: inline-start;
|
|
border-radius: 5px;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
/* Accessibility page styles */
|
|
.accessibility-page {
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.accessibility-page h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.accessibility-page-content {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.accessibility-page-content p {
|
|
margin-bottom: 16px;
|
|
line-height: 1.6;
|
|
}
|