mirror of
https://github.com/immich-app/immich.git
synced 2024-11-24 08:52:28 +02:00
More responsive web frontend (#2245)
* collapsable menu in web, more mobile friendly
* finished sidebar collapsing
* make navigation bar more responsive
* make search bar and admin button more responsive
* fix administration small button coloring
* fix upload button over opened search bar
* open search directly on small devices
* make admin sidebar more responsive
* add small edge to admin content
* server stats more responsive
* fix eslint errors
* server stats flex wrap
* Delete .env
* Revert change in hooks.server.ts
* Revert change in vite.config.js
* little clean up, replace {``} with ""
* remove package-lock.json in root folder
* revert upload button to linkbutton
* show extended sidebar also on focus
* combine changes in side-bar.svelte and
+layout.svelte to side-bar-section
* fix navigation-bar cog color in light theme
---------
Co-authored-by: Paul Paffe <paul.paffe@gmx.net>
This commit is contained in:
faupau
GitHub
parent
2179530084
commit
100866be37
@ -14,6 +14,14 @@
|
||||
usageByUser: []
|
||||
};
|
||||
|
||||
$: zeros = (value: number) => {
|
||||
const maxLength = 13;
|
||||
const valueLength = value.toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
|
||||
return '0'.repeat(zeroLength);
|
||||
};
|
||||
|
||||
$: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
|
||||
</script>
|
||||
|
||||
@ -21,11 +29,62 @@
|
||||
<div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
|
||||
|
||||
<div class="flex mt-5 justify-between">
|
||||
<div class="mt-5 justify-between lg:flex hidden">
|
||||
<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
|
||||
<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
|
||||
<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
|
||||
</div>
|
||||
<div class="mt-5 lg:hidden flex">
|
||||
<div
|
||||
class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
|
||||
>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<CameraIris size="25" />
|
||||
<p>PHOTOS</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<PlayCircle size="25" />
|
||||
<p>VIDEOS</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-7">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<Memory size="25" />
|
||||
<p>STORAGE</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl flex">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
|
||||
>
|
||||
<span class="text-center my-auto ml-2 text-base font-light text-gray-400"
|
||||
>{statsUsageUnit}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</header>
|
||||
|
||||
<main
|
||||
class="grid grid-cols-[250px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
|
||||
class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
|
||||
@ -11,6 +11,9 @@
|
||||
import ImmichLogo from '../immich-logo.svelte';
|
||||
import SearchBar from '../search-bar/search-bar.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import Magnify from 'svelte-material-icons/Magnify.svelte';
|
||||
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
|
||||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
export let user: UserResponseDto;
|
||||
export let shouldShowUploadButton = true;
|
||||
|
||||
@ -41,24 +44,34 @@
|
||||
|
||||
<section id="dashboard-navbar" class="fixed h-[4.25rem] w-screen z-[900] text-sm">
|
||||
<div
|
||||
class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="flex gap-2 mx-6 place-items-center"
|
||||
class="flex gap-2 md:mx-6 mx-4 place-items-center"
|
||||
href={AppRoute.PHOTOS}
|
||||
>
|
||||
<ImmichLogo height="35" width="35" />
|
||||
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
|
||||
<h1
|
||||
class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block hidden"
|
||||
>
|
||||
IMMICH
|
||||
</h1>
|
||||
</a>
|
||||
<div class="flex justify-between gap-16 pr-6">
|
||||
<div class="w-full max-w-5xl flex-1 pl-4">
|
||||
<div class="w-full max-w-5xl flex-1 pl-4 sm:block hidden">
|
||||
<SearchBar grayTheme={true} />
|
||||
</div>
|
||||
|
||||
<section class="flex gap-4 place-items-center">
|
||||
<section class="flex gap-4 place-items-center justify-end max-sm:w-full">
|
||||
<a href={AppRoute.SEARCH} id="search-button" class="sm:hidden pl-4">
|
||||
<IconButton title="Search">
|
||||
<div class="flex gap-2">
|
||||
<Magnify size="1.5em" />
|
||||
</div>
|
||||
</IconButton>
|
||||
</a>
|
||||
|
||||
<ThemeButton />
|
||||
|
||||
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
||||
@ -66,7 +79,7 @@
|
||||
<LinkButton on:click={() => dispatch('uploadClicked')}>
|
||||
<div class="flex gap-2">
|
||||
<TrayArrowUp size="20" />
|
||||
<span>Upload</span>
|
||||
<span class="md:block hidden">Upload</span>
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
@ -74,15 +87,32 @@
|
||||
|
||||
{#if user.isAdmin}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
||||
<LinkButton>
|
||||
<span
|
||||
<div class="sm:block hidden">
|
||||
<LinkButton>
|
||||
<span
|
||||
class={$page.url.pathname.includes('/admin')
|
||||
? 'text-immich-primary dark:text-immich-dark-primary underline item'
|
||||
: ''}
|
||||
>
|
||||
Administration
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div class="sm:hidden block">
|
||||
<IconButton title="Administration">
|
||||
<Cog
|
||||
size="1.5em"
|
||||
class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
|
||||
? 'text-immich-primary dark:text-immich-dark-primary'
|
||||
: ''}"
|
||||
/>
|
||||
</IconButton>
|
||||
<hr
|
||||
class={$page.url.pathname.includes('/admin')
|
||||
? 'text-immich-primary dark:text-immich-dark-primary underline'
|
||||
: ''}
|
||||
>
|
||||
Administration
|
||||
</span>
|
||||
</LinkButton>
|
||||
? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary'
|
||||
: 'hidden'}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
export let title: string;
|
||||
export let logo: typeof Icon;
|
||||
export let isSelected: boolean;
|
||||
export let isCollapsed: boolean;
|
||||
|
||||
let showMoreInformation = false;
|
||||
|
||||
@ -17,40 +18,43 @@
|
||||
<div
|
||||
on:click={onButtonClicked}
|
||||
on:keydown={onButtonClicked}
|
||||
class={`flex gap-4 justify-between place-items-center w-full px-5 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
|
||||
${
|
||||
isSelected
|
||||
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
|
||||
: ''
|
||||
}
|
||||
`}
|
||||
class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
|
||||
{isSelected
|
||||
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
|
||||
: ''}
|
||||
{isCollapsed ? 'pl-5' : 'px-5'}
|
||||
"
|
||||
>
|
||||
<div class="flex gap-4 place-items-center w-full">
|
||||
<svelte:component this={logo} size="1.5em" />
|
||||
<div class="flex gap-4 place-items-center w-full overflow-hidden">
|
||||
<svelte:component this={logo} size="1.5em" class="shrink-0" />
|
||||
<p class="font-medium text-sm">{title}</p>
|
||||
</div>
|
||||
|
||||
{#if $$slots.moreInformation}
|
||||
<div
|
||||
class="relative flex justify-center select-none cursor-default"
|
||||
on:mouseenter={() => (showMoreInformation = true)}
|
||||
on:mouseleave={() => (showMoreInformation = false)}
|
||||
>
|
||||
<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
|
||||
<InformationOutline />
|
||||
</div>
|
||||
|
||||
{#if showMoreInformation}
|
||||
<div class="absolute left-6 top-0 z-20">
|
||||
<div
|
||||
class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
|
||||
class:hidden={!showMoreInformation}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<slot name="moreInformation" />
|
||||
</div>
|
||||
<div
|
||||
class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}"
|
||||
>
|
||||
{#if $$slots.moreInformation && !isCollapsed}
|
||||
<div
|
||||
class="relative flex justify-center select-none cursor-default"
|
||||
on:mouseenter={() => (showMoreInformation = true)}
|
||||
on:mouseleave={() => (showMoreInformation = false)}
|
||||
>
|
||||
<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
|
||||
<InformationOutline />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showMoreInformation}
|
||||
<div class="absolute left-6 top-0 z-20">
|
||||
<div
|
||||
class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
|
||||
class:hidden={!showMoreInformation}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<slot name="moreInformation" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let isCollapsed = true;
|
||||
let innerWidth: number;
|
||||
|
||||
const handleResize = () => {
|
||||
if (innerWidth > 768) {
|
||||
isCollapsed = false;
|
||||
} else {
|
||||
isCollapsed = true;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
handleResize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={handleResize} bind:innerWidth />
|
||||
|
||||
<section
|
||||
id="sidebar"
|
||||
on:mouseover={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
|
||||
on:focus={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
|
||||
on:mouseleave={() => handleResize()}
|
||||
class="flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-[width] duration-200 z-10 {isCollapsed
|
||||
? 'w-[72px]'
|
||||
: 'pr-6 w-64 shadow-2xl md:shadow-none md:border-none border-r dark:border-r-immich-dark-gray'}"
|
||||
>
|
||||
<slot />
|
||||
</section>
|
||||
@ -12,6 +12,9 @@
|
||||
import StatusBox from '../status-box.svelte';
|
||||
import SideBarButton from './side-bar-button.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import SideBarSection from './side-bar-section.svelte';
|
||||
|
||||
let isCollapsed: boolean;
|
||||
|
||||
const getAssetCount = async () => {
|
||||
const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
|
||||
@ -71,7 +74,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<SideBarSection bind:isCollapsed>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
data-sveltekit-noscroll
|
||||
@ -82,6 +85,7 @@
|
||||
title="Photos"
|
||||
logo={ImageOutline}
|
||||
isSelected={$page.route.id === '/(user)/photos'}
|
||||
{isCollapsed}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getAssetCount()}
|
||||
@ -105,6 +109,7 @@
|
||||
title="Explore"
|
||||
logo={Magnify}
|
||||
isSelected={$page.route.id === '/(user)/explore'}
|
||||
{isCollapsed}
|
||||
/>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
|
||||
@ -112,6 +117,7 @@
|
||||
title="Sharing"
|
||||
logo={AccountMultipleOutline}
|
||||
isSelected={$page.route.id === '/(user)/sharing'}
|
||||
{isCollapsed}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getAlbumCount()}
|
||||
@ -125,14 +131,18 @@
|
||||
</SideBarButton>
|
||||
</a>
|
||||
|
||||
<div class="text-xs p-5 pb-2 dark:text-immich-dark-fg">
|
||||
<p>LIBRARY</p>
|
||||
<div
|
||||
class="text-xs md:pb-2 md:p-5 p-6 pb-[1.2rem] dark:text-immich-dark-fg transition-all duration-200"
|
||||
>
|
||||
<p class={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
|
||||
<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
|
||||
</div>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
|
||||
<SideBarButton
|
||||
title="Favorites"
|
||||
logo={StarOutline}
|
||||
isSelected={$page.route.id == '/(user)/favorites'}
|
||||
{isCollapsed}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getFavoriteCount()}
|
||||
@ -150,6 +160,7 @@
|
||||
title="Albums"
|
||||
logo={ImageAlbum}
|
||||
isSelected={$page.route.id === '/(user)/albums'}
|
||||
{isCollapsed}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getAlbumCount()}
|
||||
@ -167,6 +178,7 @@
|
||||
title="Archive"
|
||||
logo={ArchiveArrowDownOutline}
|
||||
isSelected={$page.route.id === '/(user)/archive'}
|
||||
{isCollapsed}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getArchivedAssetsCount()}
|
||||
@ -183,6 +195,6 @@
|
||||
|
||||
<!-- Status Box -->
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox />
|
||||
<StatusBox {isCollapsed} />
|
||||
</div>
|
||||
</section>
|
||||
</SideBarSection>
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
let serverInfo: ServerInfoResponseDto;
|
||||
let pingServerInterval: NodeJS.Timer;
|
||||
|
||||
export let isCollapsed: boolean;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data: version } = await api.serverInfoApi.getServerVersion();
|
||||
@ -51,27 +53,33 @@
|
||||
|
||||
<div class="dark:text-immich-dark-fg">
|
||||
<div class="storage-status grid grid-cols-[64px_auto]">
|
||||
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary">
|
||||
<div
|
||||
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
|
||||
? 'pb-[2.15rem]'
|
||||
: ''}"
|
||||
>
|
||||
<Cloud size={'24'} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
|
||||
{#if serverInfo}
|
||||
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
|
||||
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
|
||||
<div
|
||||
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
|
||||
style={`width: ${getStorageUsagePercentage()}%`}
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs">
|
||||
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
|
||||
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
|
||||
</p>
|
||||
{:else}
|
||||
<div class="mt-2">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{#if !isCollapsed}
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
|
||||
{#if serverInfo}
|
||||
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
|
||||
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
|
||||
<div
|
||||
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
|
||||
style="width: {getStorageUsagePercentage()}%"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs">
|
||||
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
|
||||
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
|
||||
</p>
|
||||
{:else}
|
||||
<div class="mt-2">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -79,28 +87,35 @@
|
||||
<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
<div class="server-status grid grid-cols-[64px_auto]">
|
||||
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary">
|
||||
<div
|
||||
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
|
||||
? 'pb-11'
|
||||
: ''}"
|
||||
>
|
||||
<Dns size={'24'} />
|
||||
</div>
|
||||
{#if !isCollapsed}
|
||||
<div class="text-xs ">
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
|
||||
|
||||
<div class="text-xs ">
|
||||
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Status</p>
|
||||
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Status</p>
|
||||
{#if isServerOk}
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
|
||||
{:else}
|
||||
<p class="font-medium text-red-500">Offline</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if isServerOk}
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
|
||||
{:else}
|
||||
<p class="font-medium text-red-500">Offline</p>
|
||||
{/if}
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Version</p>
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{serverVersion}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-items-center justify-between mt-2 ">
|
||||
<p>Version</p>
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">{serverVersion}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- <div>
|
||||
<hr class="ml-5 my-4" />
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { AppRoute } from '../../lib/constants';
|
||||
import type { LayoutData } from './$types';
|
||||
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
|
||||
|
||||
let isCollapsed: boolean;
|
||||
export let data: LayoutData;
|
||||
|
||||
// Circumvents the need to import the page store. Should be replaced by
|
||||
@ -40,36 +42,40 @@
|
||||
<NavigationBar user={data.user} />
|
||||
|
||||
<main>
|
||||
<section class="grid grid-cols-[250px_auto] pt-[72px] h-screen">
|
||||
<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col gap-1">
|
||||
<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
|
||||
<SideBarSection bind:isCollapsed>
|
||||
<SideBarButton
|
||||
title="Users"
|
||||
logo={AccountMultipleOutline}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
|
||||
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Jobs"
|
||||
logo={Sync}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_JOBS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_JOBS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Settings"
|
||||
logo={Cog}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Server Stats"
|
||||
logo={Server}
|
||||
isSelected={data.routeId === AppRoute.ADMIN_STATS}
|
||||
on:selected={() => goto(AppRoute.ADMIN_STATS)}
|
||||
{isCollapsed}
|
||||
/>
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox />
|
||||
<StatusBox {isCollapsed} />
|
||||
</div>
|
||||
</section>
|
||||
</SideBarSection>
|
||||
|
||||
<section class="overflow-y-auto immich-scrollbar ">
|
||||
<div id="setting-title" class="pt-10 w-full bg-immich-bg dark:bg-immich-dark-bg">
|
||||
@ -79,7 +85,7 @@
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<section id="setting-content" class="flex place-content-center">
|
||||
<section id="setting-content" class="flex place-content-center mx-2">
|
||||
<section class="w-[800px] pt-5 pb-28">
|
||||
<slot />
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user