Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 02:27:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): improve responsiveness in Album and Shared Album pages on small devices (#11055)

Browse Source 
* style: better responsiveness on album and shared album pages

* revert right margin changes

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
ayykamp 2024-07-26 23:06:08 +02:00 committed by GitHub
parent ee6f1a010c
commit 147c6e3600
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/album-page/album-title.svelte
View File

@ -33,7 +33,7 @@
<input <input
use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }} use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
on:blur={handleUpdateName} on:blur={handleUpdateName}
class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
? 'hover:border-gray-400' ? 'hover:border-gray-400'
: 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray" : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
type="text" type="text"

4
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -95,10 +95,10 @@
<main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"> <main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
<AssetGrid {album} {assetStore} {assetInteractionStore}> <AssetGrid {album} {assetStore} {assetInteractionStore}>
<section class="pt-24"> <section class="pt-8 md:pt-24">
<!-- ALBUM TITLE --> <!-- ALBUM TITLE -->
<h1 <h1
class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary" class="bg-immich-bg text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
> >
{album.albumName} {album.albumName}
</h1> </h1>

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

@ -427,7 +427,9 @@
<!-- 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 outline-none pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}" class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty
? 'm-0'
: 'ml-4 tall:ml-0 md:mr-[60px]'}"
tabindex="-1" tabindex="-1"
bind:clientHeight={viewport.height} bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width} bind:clientWidth={viewport.width}

2
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -548,7 +548,7 @@
> >
{#if viewMode !== ViewMode.SELECT_THUMBNAIL} {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
<!-- ALBUM TITLE --> <!-- ALBUM TITLE -->
<section class="pt-24"> <section class="pt-8 md:pt-24">
<AlbumTitle id={album.id} bind:albumName={album.albumName} {isOwned} /> <AlbumTitle id={album.id} bind:albumName={album.albumName} {isOwned} />
{#if album.assetCount > 0} {#if album.assetCount > 0}