helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

More responsive web frontend (#2245)

Browse source 
* 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 2023-04-15 03:41:52 +02:00 • committed by GitHub
parent 2179530084
commit 100866be37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 249 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

58
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -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}