From f069a916a5b4e40287f050c59fb58d6774c52a94 Mon Sep 17 00:00:00 2001 From: MAEDA Go Date: Fri, 16 Jan 2026 13:35:50 +0900 Subject: [PATCH 1/4] Replace physical CSS properties with logical ones in gantt.css for better RTL support --- app/assets/stylesheets/gantt.css | 116 ++++++++++++++----------------- 1 file changed, 52 insertions(+), 64 deletions(-) diff --git a/app/assets/stylesheets/gantt.css b/app/assets/stylesheets/gantt.css index 52b3f1a51..4c4259747 100644 --- a/app/assets/stylesheets/gantt.css +++ b/app/assets/stylesheets/gantt.css @@ -5,22 +5,22 @@ */ .gantt_subjects div > span.expander { - margin-left: 0; + margin-inline-start: 0; cursor: pointer; } .gantt_subjects .avatar { - margin-right: 4px; + margin-inline-end: 4px; } .gantt_subjects div.project-name a, .gantt_subjects div.version-name a { - margin-left: 4px; + margin-inline-start: 4px; } /***** Gantt chart *****/ table.gantt-table { - width: 100%; + inline-size: 100%; border-collapse: collapse; } @@ -30,23 +30,22 @@ table.gantt-table td { .gantt_hdr { position: absolute; - top: 0; - height: 16px; - border-top: 1px solid var(--oc-gray-4); - border-bottom: 1px solid var(--oc-gray-4); - border-left: 1px solid var(--oc-gray-4); + inset-block-start: 0; + block-size: 16px; + border-block: 1px solid var(--oc-gray-4); + border-inline-start: 1px solid var(--oc-gray-4); text-align: center; overflow: hidden; } #gantt_area .gantt_hdr { - border-left: 0; - border-right: 1px solid var(--oc-gray-4); + border-inline-start: 0; + border-inline-end: 1px solid var(--oc-gray-4); } .gantt_subjects_container:not(.draw_selected_columns) .gantt_hdr, .last_gantt_selected_column .gantt_hdr { - border-right: 1px solid var(--oc-gray-4); + border-inline-end: 1px solid var(--oc-gray-4); } .last_gantt_selected_column .gantt_selected_column_container, @@ -73,11 +72,11 @@ table.gantt-table td { .gantt_subjects div, .gantt_selected_column_content div { line-height: 16px; - height: 16px; + block-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: clip; - width: 100%; + inline-size: 100%; } .gantt_subjects div.issue-subject:hover { @@ -85,14 +84,14 @@ table.gantt-table td { } .gantt_selected_column_content > div { - padding-left: 3px; + padding-inline-start: 3px; box-sizing: border-box; } .gantt_hdr_selected_column_name { position: absolute; - top: 50%; - width: 100%; + inset-block-start: 50%; + inline-size: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); font-size: 0.8em; @@ -102,12 +101,12 @@ table.gantt-table td { } td.gantt_selected_column { - width: 50px; + inline-size: 50px; } td.gantt_selected_column .gantt_hdr, .gantt_selected_column_container { - width: 49px; + inline-size: 49px; } td.gantt_watcher_users_column div.issue_watcher_users ul { @@ -127,7 +126,7 @@ td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::af .task { position: absolute; - height: 8px; + block-size: 8px; font-size: 0.8em; color: var(--oc-gray-6); padding: 0; @@ -137,7 +136,7 @@ td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::af } .task.label { - width: 100%; + inline-size: 100%; } .task.label.project, @@ -163,90 +162,94 @@ td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::af .task_todo.parent { background: var(--oc-gray-6); border: 1px solid var(--oc-gray-6); - height: 3px; + block-size: 3px; } .task_late.parent, .task_done.parent { - height: 3px; + block-size: 3px; } .task.parent.marker.starting { position: absolute; background: url(/task_parent_end.png) no-repeat 0 0; - width: 8px; - height: 16px; - margin-left: -4px; - left: 0; - top: -1px; + inline-size: 8px; + block-size: 16px; + margin-inline-start: -4px; + inset-inline-start: 0; + inset-block-start: -1px; } .task.parent.marker.ending { position: absolute; background: url(/task_parent_end.png) no-repeat 0 0; - width: 8px; - height: 16px; - margin-left: -4px; - right: 0; - top: -1px; + inline-size: 8px; + block-size: 16px; + margin-inline-start: -4px; + inset-inline-end: 0; + inset-block-start: -1px; } .version.task_late { background: var(oc-red-5) url(/milestone_late.png); border: 1px solid var(oc-red-5); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .version.task_done { background: var(--oc-green-7) url(/milestone_done.png); border: 1px solid var(--oc-green-7); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .version.task_todo { background: var(--oc-white) url(/milestone_todo.png); border: 1px solid var(--oc-white); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .version.marker { background-image: url(/version_marker.png); background-repeat: no-repeat; border: 0; - margin-left: -4px; - margin-top: 1px; + margin-inline-start: -4px; + margin-block-start: 1px; } .project.task_late { background: var(oc-red-5) url(/milestone_late.png); border: 1px solid var(oc-red-5); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .project.task_done { background: var(--oc-green-7) url(/milestone_done.png); border: 1px solid var(--oc-green-7); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .project.task_todo { background: var(--oc-white) url(/milestone_todo.png); border: 1px solid var(--oc-white); - height: 2px; - margin-top: 3px; + block-size: 2px; + margin-block-start: 3px; } .project.marker { background-image: url(/project_marker.png); background-repeat: no-repeat; border: 0; - margin-left: -4px; - margin-top: 1px; + margin-inline-start: -4px; + margin-block-start: 1px; +} + +[dir="rtl"] :is(.marker, .task.parent.marker) { + background-position: right; } .version-behind-schedule a, @@ -259,18 +262,3 @@ td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::af .project-overdue a { color: var(--oc-red-8); } - -/* - Limited RTL support moved from rtl.css - TODO: Remove when gantt.css uses logical properties to support both LTR and RTL -*/ -[dir="rtl"] .gantt_hdr { - border-right:0px solid var(--oc-gray-4); border-left:1px solid var(--oc-gray-4); -} - -[dir="rtl"] .task.parent.marker.starting {margin-left:0px; margin-right:-4px; left:auto; right:0;} -[dir="rtl"] .task.parent.marker.ending {margin-left:0px; margin-right:-4px; right:auto; left:0px;} - -[dir="rtl"] .version.marker {margin-left:0; margin-right:-4px;} - -[dir="rtl"] .project.marker {margin-left:0; margin-right:-4px;} -- 2.50.1