mirror of
https://github.com/immich-app/immich.git
synced 2025-07-09 03:04:16 -04:00
fix: more z-index issue (#18598)
* fix: search suggestion * fix: play icon lay on top of the search bar
This commit is contained in:
parent
911c877e72
commit
4743a085f1
@ -55,35 +55,6 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="absolute end-0 top-0 z-1 flex place-items-center gap-1 text-xs font-medium text-white">
|
|
||||||
{#if showTime}
|
|
||||||
<span class="pt-2">
|
|
||||||
{#if remainingSeconds < 60}
|
|
||||||
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
|
|
||||||
{:else if remainingSeconds < 3600}
|
|
||||||
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('mm:ss')}
|
|
||||||
{:else}
|
|
||||||
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('h:mm:ss')}
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<span class="pe-2 pt-2" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}>
|
|
||||||
{#if enablePlayback}
|
|
||||||
{#if loading}
|
|
||||||
<LoadingSpinner />
|
|
||||||
{:else if error}
|
|
||||||
<Icon path={mdiAlertCircleOutline} size="24" class="text-red-600" />
|
|
||||||
{:else}
|
|
||||||
<Icon path={pauseIcon} size="24" />
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
<Icon path={playIcon} size="24" />
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if enablePlayback}
|
{#if enablePlayback}
|
||||||
<video
|
<video
|
||||||
bind:this={player}
|
bind:this={player}
|
||||||
@ -114,3 +85,32 @@
|
|||||||
}}
|
}}
|
||||||
></video>
|
></video>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
|
||||||
|
{#if showTime}
|
||||||
|
<span class="pt-2">
|
||||||
|
{#if remainingSeconds < 60}
|
||||||
|
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
|
||||||
|
{:else if remainingSeconds < 3600}
|
||||||
|
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('mm:ss')}
|
||||||
|
{:else}
|
||||||
|
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('h:mm:ss')}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<span class="pe-2 pt-2" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}>
|
||||||
|
{#if enablePlayback}
|
||||||
|
{#if loading}
|
||||||
|
<LoadingSpinner />
|
||||||
|
{:else if error}
|
||||||
|
<Icon path={mdiAlertCircleOutline} size="24" class="text-red-600" />
|
||||||
|
{:else}
|
||||||
|
<Icon path={pauseIcon} size="24" />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<Icon path={playIcon} size="24" />
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
@ -52,7 +52,7 @@
|
|||||||
|
|
||||||
<svelte:window bind:innerWidth />
|
<svelte:window bind:innerWidth />
|
||||||
|
|
||||||
<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm overflow-hidden">
|
<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm">
|
||||||
<SkipLink text={$t('skip_to_content')} />
|
<SkipLink text={$t('skip_to_content')} />
|
||||||
<div
|
<div
|
||||||
class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
|
class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
|
||||||
|
@ -214,7 +214,7 @@
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="w-full relative" use:focusOutside={{ onFocusOut }} tabindex="-1">
|
<div class="w-full relative z-2" use:focusOutside={{ onFocusOut }} tabindex="-1">
|
||||||
<form
|
<form
|
||||||
draggable="false"
|
draggable="false"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import { searchStore } from '$lib/stores/search.svelte';
|
import { searchStore } from '$lib/stores/search.svelte';
|
||||||
import { mdiMagnify, mdiClose } from '@mdi/js';
|
import { mdiClose, mdiMagnify } from '@mdi/js';
|
||||||
import { fly } from 'svelte/transition';
|
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
import { fly } from 'svelte/transition';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
id: string;
|
id: string;
|
||||||
@ -95,7 +95,7 @@
|
|||||||
{#if isOpen && isSearchSuggestions}
|
{#if isOpen && isSearchSuggestions}
|
||||||
<div
|
<div
|
||||||
transition:fly={{ y: 25, duration: 150 }}
|
transition:fly={{ y: 25, duration: 150 }}
|
||||||
class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
|
class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300 z-1"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
||||||
<p class="py-2" aria-hidden={true}>{$t('recent_searches').toUpperCase()}</p>
|
<p class="py-2" aria-hidden={true}>{$t('recent_searches').toUpperCase()}</p>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user