Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues Activity

feat(web): Make scaling of albums overview more responsive (#1981)

Browse source 
* Make scaling of albums overview more responsive

* Adapt column sizes

* Run prettier

* Use tailwind magic instead of hard-coded breakpoints
This commit is contained in:
Matthias Rupp 2023-03-12 01:43:54 +01:00 • committed by GitHub
parent 8adca31c24
commit ceb81d00fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/album-page/album-card.svelte
View file

@ -61,7 +61,7 @@
</script> </script>
<div <div
class="h-[339px] w-[275px] hover:cursor-pointer mt-4 relative" class="hover:cursor-pointer mt-4 relative"
on:click={() => dispatchClick('click', album)} on:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)} on:keydown={() => dispatchClick('click', album)}
data-testid="album-card" data-testid="album-card"
@ -76,7 +76,7 @@
<CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} /> <CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} />
</div> </div>
<div class={`h-[275px] w-[275px] z-[-1]`}> <div class={`aspect-square z-[-1]`}>
<img <img
src={imageData} src={imageData}
alt={album.id} alt={album.id}

4
web/src/routes/(user)/albums/+page.svelte
View file

@ -45,7 +45,7 @@
<section class="overflow-y-auto relative immich-scrollbar"> <section class="overflow-y-auto relative immich-scrollbar">
<section <section
id="album-content" id="album-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg" class="relative pt-8 pl-4 pr-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
> >
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg"> <div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div> <div>
@ -70,7 +70,7 @@
</div> </div>
<!-- Album Card --> <!-- Album Card -->
<div class="flex flex-wrap gap-8"> <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
{#each $albums as album} {#each $albums as album}
{#key album.id} {#key album.id}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}> <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>