mirror of
https://github.com/immich-app/immich.git
synced 2025-12-09 06:58:21 -05:00
b970a40b4e
* make sidebar load more fluid use css before js kicks in added xs breakpoint in tailwind config * fix sidebar hr still showing if opened * make share tab not overflow on mobile * make user management tab responsive * make jobs panel responsive * fix format in tailwind config * fix full width on large screens use md breakpoint for w-[800px] * show accessible name for all screens * replace grid with flex-col * replace all xs with sm * remove isCollapsed completly using only tailwinds group feature and sm and md breakpoints * remove leftovers of isCollapsed and make the settings content less stretched * remove isCollapsed in layout and side-bar * fix code style --------- Co-authored-by: faupau03 <paul.paffe@gmx.net> Co-authored-by: Alex <alex.tran1502@gmail.com>
60 lines
2.2 KiB
Svelte
60 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
|
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let title: string;
|
|
export let logo: typeof Icon;
|
|
export let isSelected: boolean;
|
|
|
|
let showMoreInformation = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
const onButtonClicked = () => dispatch('selected');
|
|
</script>
|
|
|
|
<div
|
|
on:click={onButtonClicked}
|
|
on:keydown={onButtonClicked}
|
|
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'
|
|
: ''}
|
|
pl-5 group-hover:sm:px-5 md:px-5
|
|
"
|
|
>
|
|
<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
|
|
<svelte:component this={logo} size="1.5em" class="shrink-0" />
|
|
<p class="font-medium text-sm">{title}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
|
|
>
|
|
{#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>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|