cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rtl (#17860)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-04-28 09:53:53 -04:00
committed by GitHub
parent 85ac0512a6
commit e6c575c33e
130 changed files with 354 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/photos-page/asset-date-group.svelte
+1 -1
View File
@@ -149,7 +149,7 @@
</div>
{/if}
<span class="w-full truncate first-letter:capitalize ml-2.5" title={getDateLocaleString(dateGroup.date)}>
<span class="w-full truncate first-letter:capitalize ms-2.5" title={getDateLocaleString(dateGroup.date)}>
{dateGroup.groupTitle}
</span>
</div>
web/src/lib/components/photos-page/asset-grid.svelte
+1 -1
View File
@@ -743,7 +743,7 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ml-0': !isEmpty }]}
class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
tabindex="-1"
bind:clientHeight={assetStore.viewportHeight}
web/src/lib/components/photos-page/memory-lane.svelte
+6 -6
View File
@@ -44,9 +44,9 @@
onscroll={onScroll}
>
{#if canScrollLeft || canScrollRight}
<div class="sticky left-0 z-20">
<div class="sticky start-0 z-20">
{#if canScrollLeft}
<div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<div class="absolute start-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -59,7 +59,7 @@
</div>
{/if}
{#if canScrollRight}
<div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<div class="absolute end-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -76,7 +76,7 @@
<div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
{#each memoryStore.memories as memory (memory.id)}
<a
class="memory-card relative mr-2 md:mr-4 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
>
<img
@@ -85,11 +85,11 @@
alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
draggable="false"
/>
<p class="absolute bottom-2 left-4 z-10 text-lg text-white max-md:text-sm">
<p class="absolute bottom-2 start-4 z-10 text-lg text-white max-md:text-sm">
{$memoryLaneTitle(memory)}
</p>
<div
class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
class="absolute start-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
></div>
</a>
{/each}
web/src/lib/components/photos-page/skeleton.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
{title}
</div>
<div
class="animate-pulse absolute h-full ml-[10px] mr-[10px]"
class="animate-pulse absolute h-full ms-[10px] me-[10px]"
style:width="calc(100% - 20px)"
data-skeleton="true"
></div>