From 0f5e0019aef45d5a8e4f61dde6708cb2187f1bdf Mon Sep 17 00:00:00 2001 From: kolaente Date: Sun, 3 Aug 2025 13:09:20 +0200 Subject: [PATCH] feat: replace right with logical properties --- frontend/src/components/home/AppHeader.vue | 2 +- frontend/src/components/home/ContentAuth.vue | 6 +++--- frontend/src/components/home/DemoMode.vue | 2 +- frontend/src/components/input/Multiselect.vue | 2 +- frontend/src/components/input/Password.vue | 2 +- frontend/src/components/input/editor/EditorToolbar.vue | 2 +- frontend/src/components/input/editor/TipTap.vue | 4 ++-- frontend/src/components/misc/Dropdown.vue | 2 +- frontend/src/components/misc/Modal.vue | 4 ++-- frontend/src/components/misc/NoAuthWrapper.vue | 2 +- frontend/src/components/misc/Ready.vue | 2 +- frontend/src/components/notifications/Notifications.vue | 4 ++-- frontend/src/components/project/partials/FilterPopup.vue | 2 +- frontend/src/components/project/partials/ProjectCard.vue | 4 ++-- frontend/src/components/project/views/ProjectKanban.vue | 4 ++-- frontend/src/components/tasks/AddTask.vue | 2 +- frontend/src/components/tasks/partials/Attachments.vue | 2 +- frontend/src/components/tasks/partials/DeferTask.vue | 2 +- frontend/src/components/tasks/partials/Heading.vue | 2 +- 19 files changed, 26 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue index 23f61ad54..f6abc3482 100644 --- a/frontend/src/components/home/AppHeader.vue +++ b/frontend/src/components/home/AppHeader.vue @@ -158,7 +158,7 @@ $user-dropdown-width-mobile: 5rem; position: fixed; inset-block-start: 0; inset-inline-start: 0; - right: 0; + inset-inline-end: 0; display: flex; justify-content: space-between; diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue index 03672723a..0840d1bcf 100644 --- a/frontend/src/components/home/ContentAuth.vue +++ b/frontend/src/components/home/ContentAuth.vue @@ -133,7 +133,7 @@ projectStore.loadAllProjects() .menu-hide-button { position: fixed; inset-block-start: 0.5rem; - right: 0.5rem; + inset-inline-end: 0.5rem; z-index: 31; [dir="rtl"] & { @@ -209,7 +209,7 @@ projectStore.loadAllProjects() inset-block-start: 0; bottom: 0; inset-inline-start: 0; - right: 0; + inset-inline-end: 0; height: 100vh; width: 100vw; background: hsla(var(--grey-100-hsl), 0.8); @@ -226,7 +226,7 @@ projectStore.loadAllProjects() .keyboard-shortcuts-button { position: fixed; bottom: calc(1rem - 4px); - right: 1rem; + inset-inline-end: 1rem; z-index: 4500; // The modal has a z-index of 4000 [dir="rtl"] & { diff --git a/frontend/src/components/home/DemoMode.vue b/frontend/src/components/home/DemoMode.vue index c4dff8766..b20c2a581 100644 --- a/frontend/src/components/home/DemoMode.vue +++ b/frontend/src/components/home/DemoMode.vue @@ -45,7 +45,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value) padding: .25rem .5rem; cursor: pointer; position: absolute; - right: .5rem; + inset-inline-end: .5rem; inset-block-start: .25rem; } diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue index 82cec4b53..95b626876 100644 --- a/frontend/src/components/input/Multiselect.vue +++ b/frontend/src/components/input/Multiselect.vue @@ -581,7 +581,7 @@ function focus() { .removal-button { position: absolute; - right: .5rem; + inset-inline-end: .5rem; color: var(--danger); } diff --git a/frontend/src/components/input/Password.vue b/frontend/src/components/input/Password.vue index 1bf04ba9d..8d7b6461d 100644 --- a/frontend/src/components/input/Password.vue +++ b/frontend/src/components/input/Password.vue @@ -88,7 +88,7 @@ function handleInput(e: Event) { position: absolute; color: var(--grey-400); inset-block-start: 50%; - right: 1rem; + inset-inline-end: 1rem; transform: translateY(-50%); } diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue index 6d2e2a966..6f0c0cfc8 100644 --- a/frontend/src/components/input/editor/EditorToolbar.vue +++ b/frontend/src/components/input/editor/EditorToolbar.vue @@ -425,7 +425,7 @@ function setLink(event) { font-size: .75rem; position: absolute; bottom: -3px; - right: -2px; + inset-inline-end: -2px; font-weight: bold; } } diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue index cfb4942ca..2ebec692f 100644 --- a/frontend/src/components/input/editor/TipTap.vue +++ b/frontend/src/components/input/editor/TipTap.vue @@ -928,7 +928,7 @@ watch( position: absolute; content: ''; inset-inline-start: 0; - right: 0; + inset-inline-end: 0; inset-block-start: 0; bottom: 0; background: rgba(200, 200, 255, 0.4); @@ -937,7 +937,7 @@ watch( .column-resize-handle { position: absolute; - right: -2px; + inset-inline-end: -2px; inset-block-start: 0; bottom: -2px; width: 4px; diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue index cd2bfb7d0..55c982462 100644 --- a/frontend/src/components/misc/Dropdown.vue +++ b/frontend/src/components/misc/Dropdown.vue @@ -99,7 +99,7 @@ onClickOutside(dropdown, (e) => { z-index: 20; display: block; inset-inline-start: auto; - right: 0; + inset-inline-end: 0; } .dropdown-content { diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue index a39a5a42d..13c64121b 100644 --- a/frontend/src/components/misc/Modal.vue +++ b/frontend/src/components/misc/Modal.vue @@ -217,13 +217,13 @@ $modal-width: 1024px; $close-button-padding: 26px; position: fixed; inset-block-start: .5rem; - right: $close-button-padding; + inset-inline-end: $close-button-padding; color: var(--white); font-size: 2rem; @media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) { inset-block-start: calc(5px + $modal-margin); - right: 50%; + inset-inline-end: 50%; // we align the close button to the modal until there is enough space outside for it transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding})); } diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue index fd97c0dbb..aa5bf2ba7 100644 --- a/frontend/src/components/misc/NoAuthWrapper.vue +++ b/frontend/src/components/misc/NoAuthWrapper.vue @@ -119,7 +119,7 @@ useTitle(() => title.value) position: absolute; inset-block-start: 0; inset-inline-start: 0; - right: 0; + inset-inline-end: 0; bottom: 0; background-color: rgba(0, 0, 0, .2); } diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue index b061404e2..d769ed05d 100644 --- a/frontend/src/components/misc/Ready.vue +++ b/frontend/src/components/misc/Ready.vue @@ -84,7 +84,7 @@ const baseStore = useBaseStore() inset-block-start: 0; inset-inline-start: 0; bottom: 0; - right: 0; + inset-inline-end: 0; background: var(--grey-100); z-index: 99; } diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue index 974a2e1da..ab3bba148 100644 --- a/frontend/src/components/notifications/Notifications.vue +++ b/frontend/src/components/notifications/Notifications.vue @@ -209,7 +209,7 @@ async function markAllRead() { .unread-indicator { position: absolute; inset-block-start: 1rem; - right: .5rem; + inset-inline-end: .5rem; width: .75rem; height: .75rem; @@ -220,7 +220,7 @@ async function markAllRead() { .notifications-list { position: absolute; - right: 1rem; + inset-inline-end: 1rem; inset-block-start: calc(100% + 1rem); max-height: 400px; overflow-y: auto; diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue index d47654e5e..83d907187 100644 --- a/frontend/src/components/project/partials/FilterPopup.vue +++ b/frontend/src/components/project/partials/FilterPopup.vue @@ -108,7 +108,7 @@ $filter-bubble-size: .75rem; content: ''; position: absolute; inset-block-start: math.div($filter-bubble-size, -2); - right: math.div($filter-bubble-size, -2); + inset-inline-end: math.div($filter-bubble-size, -2); width: $filter-bubble-size; height: $filter-bubble-size; diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue index f1c4be26f..73148cefa 100644 --- a/frontend/src/components/project/partials/ProjectCard.vue +++ b/frontend/src/components/project/partials/ProjectCard.vue @@ -116,7 +116,7 @@ const textOnlyDescription = computed(() => { .project-button { position: absolute; inset-block-start: 0; - right: 0; + inset-inline-end: 0; bottom: 0; inset-inline-start: 0; } @@ -160,7 +160,7 @@ const textOnlyDescription = computed(() => { .favorite { position: absolute; inset-block-start: var(--project-card-padding); - right: var(--project-card-padding); + inset-inline-end: var(--project-card-padding); transition: opacity $transition, color $transition; opacity: 1; diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue index a33497201..efb7cd360 100644 --- a/frontend/src/components/project/views/ProjectKanban.vue +++ b/frontend/src/components/project/views/ProjectKanban.vue @@ -790,7 +790,7 @@ function unCollapseBucket(bucket: IBucket) { .control.is-loading { &::after { inset-block-start: 30%; - right: 50%; + inset-inline-end: 50%; transform: translate(-50%, 0); --loader-border-color: var(--grey-500); } @@ -841,7 +841,7 @@ $filter-container-height: '1rem - #{$switch-view-height}'; position: absolute; display: block; inset-block-start: 0.25rem; - right: 0.5rem; + inset-inline-end: 0.5rem; bottom: 0.25rem; inset-inline-start: 0.5rem; border: 3px dashed var(--grey-300); diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue index 604d7649d..b5709e03a 100644 --- a/frontend/src/components/tasks/AddTask.vue +++ b/frontend/src/components/tasks/AddTask.vue @@ -321,6 +321,6 @@ defineExpose({ diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue index d3b7fb4f5..b1f53fa86 100644 --- a/frontend/src/components/tasks/partials/Attachments.vue +++ b/frontend/src/components/tasks/partials/Attachments.vue @@ -368,7 +368,7 @@ async function setCoverImage(attachment: IAttachment | null) { position: absolute; bottom: 0; inset-inline-start: 0; - right: 0; + inset-inline-end: 0; .icon { width: 100%; diff --git a/frontend/src/components/tasks/partials/DeferTask.vue b/frontend/src/components/tasks/partials/DeferTask.vue index ad2e228aa..202011278 100644 --- a/frontend/src/components/tasks/partials/DeferTask.vue +++ b/frontend/src/components/tasks/partials/DeferTask.vue @@ -140,7 +140,7 @@ $defer-task-max-width: 350px + 100px; @media screen and (max-width: ($defer-task-max-width)) { inset-inline-start: .5rem; - right: .5rem; + inset-inline-end: .5rem; max-width: 100%; width: calc(100vw - 1rem - 2rem); } diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue index 7941862cf..bbd242cf5 100644 --- a/frontend/src/components/tasks/partials/Heading.vue +++ b/frontend/src/components/tasks/partials/Heading.vue @@ -192,7 +192,7 @@ async function cancel(element: HTMLInputElement) { .task-properties .close { display: none; position: absolute; - right: 1.25rem; + inset-inline-end: 1.25rem; inset-block-start: 1.1rem; @media screen and (max-width: $tablet) {