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

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

66
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View file

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