self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-22 01:47:08 +02:00
Code Issues Releases Activity

fix(web): asset-grid padding/margin left fix (#8125)

Browse Source 
use media query for grid padding/margin size
This commit is contained in:
Alex 2024-03-21 00:18:38 -05:00 committed by GitHub
parent 16d0df796c
commit 44ed1f0919
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -380,7 +380,7 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar --> <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section <section
id="asset-grid" id="asset-grid"
class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'mr-[60px]'}" class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
bind:clientHeight={viewport.height} bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width} bind:clientWidth={viewport.width}
bind:this={element} bind:this={element}

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -50,7 +50,7 @@
<ImmichLogo width="55%" noText={innerWidth < 768} /> <ImmichLogo width="55%" noText={innerWidth < 768} />
</a> </a>
<div class="flex justify-between gap-16 pr-6"> <div class="flex justify-between gap-16 pr-6">
<div class="hidden w-full max-w-5xl flex-1 sm:block"> <div class="hidden w-full max-w-5xl flex-1 pl-4 tall:pl-0 sm:block">
{#if $featureFlags.search} {#if $featureFlags.search}
<SearchBar grayTheme={true} /> <SearchBar grayTheme={true} />
{/if} {/if}

2
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@ -434,7 +434,7 @@
{/if} {/if}
</header> </header>
<main class="relative h-screen overflow-hidden bg-immich-bg ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"> <main class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
{#key refreshAssetGrid} {#key refreshAssetGrid}
<AssetGrid <AssetGrid
{assetStore} {assetStore}

3
web/tailwind.config.cjs
View File

@ -30,6 +30,9 @@ module.exports = {
spacing: { spacing: {
18: '4.5rem', 18: '4.5rem',
}, },
screens: {
tall: { raw: '(min-height: 800px)' },
},
}, },
}, },
}; };