tcsenpai/pensieve
1
0
Fork 0
mirror of https://github.com/tcsenpai/pensieve.git synced 2025-06-06 03:05:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add sticky header with logo

Browse Source
This commit is contained in:
arkohut 2024-10-11 10:01:46 +08:00
parent cfda9fb543
commit d624651790
2 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/Figure.svelte
View File

@ -89,7 +89,7 @@
}
</script>
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-40" id="my-modal">
<div
class="relative top-10 mx-auto px-16 py-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
>

72
web/src/routes/+page.svelte
View File

@ -6,6 +6,8 @@
import { PUBLIC_API_ENDPOINT } from '$env/static/public';
import FacetFilter from '$lib/components/FacetFilter.svelte';
import { formatDistanceToNow } from 'date-fns';
import Logo from '$lib/components/Logo.svelte';
import { onMount } from 'svelte';
let searchString = '';
/**
@ -50,6 +52,30 @@
let facetCounts: Facet[] | null = null;
let isScrolled = false;
let headerElement: HTMLElement;
// 添加一个计算属性来生成输入框的类名
$: inputClasses = `w-full p-2 text-lg border-gray-500 transition-all duration-300 ${
!isScrolled ? 'mt-4' : ''
}`;
onMount(() => {
const handleScroll = () => {
if (window.scrollY > 200) {
isScrolled = true;
} else if (isScrolled && window.scrollY < 50) {
isScrolled = false;
}
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
});
async function searchItems(
query: string,
start: number,
@ -219,18 +245,32 @@
<svelte:window on:keydown={handleKeydown} />
<div class="mx-auto my-4 max-w-screen-lg">
<Input
type="text"
class="w-full my-4 p-2 text-lg border-gray-500"
bind:value={searchString}
placeholder="Type to search..."
/>
<div class="flex space-x-2">
<LibraryFilter bind:selectedLibraryIds={selectedLibraries} />
<TimeFilter bind:start={startTimestamp} bind:end={endTimestamp} />
<header
class="sticky top-0 z-10 transition-all duration-300"
bind:this={headerElement}
>
<div class="mx-auto max-w-screen-lg flex items-center justify-between p-4 transition-all duration-300"
class:flex-col={!isScrolled}
class:flex-row={isScrolled}
>
<Logo size={isScrolled ? 48 : 128} withBorder={!isScrolled} class_="transition-transform duration-300 ease-in-out mr-4" />
<Input
type="text"
class={inputClasses}
bind:value={searchString}
placeholder="Type to search..."
/>
<div class="mx-auto max-w-screen-lg">
<div class="flex space-x-2" class:mt-4={!isScrolled} class:ml-4={isScrolled}>
<LibraryFilter bind:selectedLibraryIds={selectedLibraries} />
<TimeFilter bind:start={startTimestamp} bind:end={endTimestamp} />
</div>
</div>
</div>
</div>
</header>
<!-- 添加一个动态调整高度的空白区域 -->
<div style="height: {isScrolled ? '50px' : '0px'}"></div>
<div class="mx-auto flex flex-col sm:flex-row">
<!-- Left panel for tags and created_date -->
@ -302,7 +342,7 @@
{:else if searchString}
<p class="text-center">No results found.</p>
{:else}
<p class="text-center">Type something to start searching...</p>
<p class="text-center"></p>
{/if}
</div>
</div>
@ -327,13 +367,13 @@
/>
{/if}
<footer class="mx-auto mt-32 w-full container">
<footer class="mx-auto mt-32 w-full container text-center">
<div class="border-t border-slate-900/5 py-10">
<p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
<div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
<p class="mt-2 text-sm leading-6 text-slate-500">© 2024 Arkohut Qinini. All rights reserved.</p>
<div class="mt-2 flex justify-center items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
<a href="/privacy-policy">Privacy policy</a>
<div class="h-4 w-px bg-slate-500/20" />
<a href="/changelog">Changelog</a>
</div>
</div>
</footer>
</footer>