c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-04-14 12:06:25 +02:00
Code Releases Activity

fix(web): improve memories layout on small screens ()

Browse source 
* fix(web): improve memories layout on small screens

* decrease viewer height
This commit is contained in:
Lukas 2025-02-19 00:40:52 +01:00 • committed by GitHub
parent 7bf142dc43
commit b13a98646f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 4 deletions
web/src/lib/components
memory-page
memory-viewer.svelte
shared-components
control-app-bar.svelte

6
web/src/lib/components/memory-page/memory-viewer.svelte
View file

@ -264,7 +264,7 @@
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}> <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
{#if current && current.memory.assets.length > 0} {#if current && current.memory.assets.length > 0}
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark> <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark multiRow>
{#snippet leading()} {#snippet leading()}
{#if current} {#if current}
<p class="text-lg"> <p class="text-lg">
@ -320,9 +320,9 @@
</div> </div>
{/if} {/if}
<!-- Viewer --> <!-- Viewer -->
<section class="overflow-hidden pt-20"> <section class="overflow-hidden pt-32 md:pt-20">
<div <div
class="ml-[-100%] box-border flex h-[calc(100vh_-_180px)] w-[300%] items-center justify-center gap-10 overflow-hidden" class="ml-[-100%] box-border flex h-[calc(100vh_-_224px)] md:h-[calc(100vh_-_180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
> >
<!-- PREVIOUS MEMORY --> <!-- PREVIOUS MEMORY -->
<div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}"> <div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">

4
web/src/lib/components/shared-components/control-app-bar.svelte
View file

@ -13,6 +13,7 @@
backIcon?: string; backIcon?: string;
tailwindClasses?: string; tailwindClasses?: string;
forceDark?: boolean; forceDark?: boolean;
multiRow?: boolean;
onClose?: () => void; onClose?: () => void;
leading?: Snippet; leading?: Snippet;
children?: Snippet; children?: Snippet;
@ -24,6 +25,7 @@
backIcon = mdiClose, backIcon = mdiClose,
tailwindClasses = '', tailwindClasses = '',
forceDark = false, forceDark = false,
multiRow = false,
onClose = () => {}, onClose = () => {},
leading, leading,
children, children,
@ -67,7 +69,7 @@
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent"> <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
<div <div
id="asset-selection-app-bar" id="asset-selection-app-bar"
class={`grid grid-cols-[10%_80%_10%] justify-between sm:grid-cols-[25%_50%_25%] lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${ class={`grid ${multiRow ? 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]' : 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]'} justify-between lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
forceDark && 'bg-immich-dark-gray text-white' forceDark && 'bg-immich-dark-gray text-white'
}`} }`}
> >