Leantime/leantime

[BUG] RTL needs further improvements

Open

#456 opened on Sep 5, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)PHP (9,827 stars) (957 forks)batch import
Help Wanted

Description

Describe the bug I've injected the Hebrew translation file into the Docker and I managed to see the interface in Hebrew, there are some glitches that render it unusable.

Some practical examples:

  1. The left navigation panel, although appear on the right is not collapsible.
  2. The items on the top should have their icons in the opposite direction.
  3. The whole top menu should have been mirrored
  4. The time tables appear in the opposite direction.
  5. The pen at the top of lanes in Kanban is in the opposite corner.
  6. Lane headers remain in English.
  7. The items in the navigation panel are misaligned relatively to the icons.
  8. Apparenyly some of the JS (Calendar Table) has an RTL function, I'm not sure it's used.

To Reproduce Switch to Hebrew/Add dir=rtl to the <html> or <body> tags.

Expected behavior The interface should have been completely mirrored and usable, instead some features are not working, most of the items are either misaligned or reversed.

Leantime Version 2.1.8 (Using the latest Docker)

Additional context Some tips on mirroring an interface: https://design.fusionfabric.cloud/foundations/rtl

Image attached. Screenshot 2021-09-05 at 09-53-39 Leantime

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS RTL handlingLeantime UI componentsHTML direction attributes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the current RTL implementation by searching for dir="rtl" and CSS properties like direction or text align. Review the Leantime layout files (e.g., header, sidebar, kanban) to identify which elements need mirroring. Check the JavaScript calendar RTL function mentioned in the issue to see if it's used correctly. Test with a Hebrew locale to reproduce the issues.