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.3 KiB
CSS
100 lines
2.3 KiB
CSS
.sk-spinner-cube-grid {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 100px auto;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid {
|
|
width: 33%;
|
|
height: 33%;
|
|
background-color: #333;
|
|
float: inline-start;
|
|
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid1 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid2 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid3 {
|
|
-webkit-animation-delay: 0.4s;
|
|
animation-delay: 0.4s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid4 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid5 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid6 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid7 {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid8 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s;
|
|
}
|
|
.sk-spinner-cube-grid .sk-cube-grid9 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
@-webkit-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
@-moz-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
@-webkit-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
@-o-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
@keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|