kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: replace right with logical properties

This commit is contained in:
kolaente 2025-08-03 13:09:20 +02:00
parent 0159ddc313
commit 0f5e0019ae
19 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/home/AppHeader.vue
View File

@ -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;

6
frontend/src/components/home/ContentAuth.vue
View File

@ -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"] & {

2
frontend/src/components/home/DemoMode.vue
View File

@ -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;
}
</style>

2
frontend/src/components/input/Multiselect.vue
View File

@ -581,7 +581,7 @@ function focus() {
.removal-button {
position: absolute;
right: .5rem;
inset-inline-end: .5rem;
color: var(--danger);
}
</style>

2
frontend/src/components/input/Password.vue
View File

@ -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%);
}
</style>

2
frontend/src/components/input/editor/EditorToolbar.vue
View File

@ -425,7 +425,7 @@ function setLink(event) {
font-size: .75rem;
position: absolute;
bottom: -3px;
right: -2px;
inset-inline-end: -2px;
font-weight: bold;
}
}

4
frontend/src/components/input/editor/TipTap.vue
View File

@ -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;

2
frontend/src/components/misc/Dropdown.vue
View File

@ -99,7 +99,7 @@ onClickOutside(dropdown, (e) => {
z-index: 20;
display: block;
inset-inline-start: auto;
right: 0;
inset-inline-end: 0;
}
.dropdown-content {

4
frontend/src/components/misc/Modal.vue
View File

@ -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}));
}

2
frontend/src/components/misc/NoAuthWrapper.vue
View File

@ -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);
}

2
frontend/src/components/misc/Ready.vue
View File

@ -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;
}

4
frontend/src/components/notifications/Notifications.vue
View File

@ -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;

2
frontend/src/components/project/partials/FilterPopup.vue
View File

@ -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;

4
frontend/src/components/project/partials/ProjectCard.vue
View File

@ -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;

4
frontend/src/components/project/views/ProjectKanban.vue
View File

@ -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);

2
frontend/src/components/tasks/AddTask.vue
View File

@ -321,6 +321,6 @@ defineExpose({
<style>
button.show-helper-text {
right: 0;
inset-inline-end: 0;
}
</style>

2
frontend/src/components/tasks/partials/Attachments.vue
View File

@ -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%;

2
frontend/src/components/tasks/partials/DeferTask.vue
View File

@ -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);
}

2
frontend/src/components/tasks/partials/Heading.vue
View File

@ -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) {