1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00

Better styling for count info

This commit is contained in:
Alex Tran 2022-09-07 21:19:24 -05:00
parent 853a65aef1
commit 836b174d33
No known key found for this signature in database
GPG Key ID: E4954BC787B85C8A

View File

@ -66,12 +66,12 @@
on:mouseenter={() => (showAssetCount = true)} on:mouseenter={() => (showAssetCount = true)}
on:mouseleave={() => (showAssetCount = false)} on:mouseleave={() => (showAssetCount = false)}
> >
<InformationOutline size={18} color="#4250af" /> <InformationOutline size={18} color="#989a9f" />
{#if showAssetCount} {#if showAssetCount}
<div <div
transition:fade={{ duration: 200 }} transition:fade={{ duration: 200 }}
id="asset-count-info-detail" id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center" class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
> >
{#await getAssetCount()} {#await getAssetCount()}
<LoadingSpinner /> <LoadingSpinner />
@ -99,12 +99,12 @@
on:mouseenter={() => (showSharingCount = true)} on:mouseenter={() => (showSharingCount = true)}
on:mouseleave={() => (showSharingCount = false)} on:mouseleave={() => (showSharingCount = false)}
> >
<InformationOutline size={18} color="#4250af" /> <InformationOutline size={18} color="#989a9f" />
{#if showSharingCount} {#if showSharingCount}
<div <div
transition:fade={{ duration: 200 }} transition:fade={{ duration: 200 }}
id="asset-count-info-detail" id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center" class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
> >
{#await getAlbumCount()} {#await getAlbumCount()}
<LoadingSpinner /> <LoadingSpinner />
@ -134,12 +134,12 @@
on:mouseenter={() => (showAlbumsCount = true)} on:mouseenter={() => (showAlbumsCount = true)}
on:mouseleave={() => (showAlbumsCount = false)} on:mouseleave={() => (showAlbumsCount = false)}
> >
<InformationOutline size={18} color="#4250af" /> <InformationOutline size={18} color="#989a9f" />
{#if showAlbumsCount} {#if showAlbumsCount}
<div <div
transition:fade={{ duration: 200 }} transition:fade={{ duration: 200 }}
id="asset-count-info-detail" id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center" class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
> >
{#await getAlbumCount()} {#await getAlbumCount()}
<LoadingSpinner /> <LoadingSpinner />