mirror of
https://github.com/tcsenpai/pensieve.git
synced 2025-06-06 03:05:25 +00:00
feat(web): update footer location
This commit is contained in:
arkohut
parent
602d4fa955
commit
aa0974e037
@ -285,107 +285,134 @@
|
|||||||
|
|
||||||
<svelte:window on:keydown={handleKeydown} />
|
<svelte:window on:keydown={handleKeydown} />
|
||||||
|
|
||||||
<header
|
<!-- 添加一个最外层的容器来管理整体布局 -->
|
||||||
class="sticky top-0 z-10 transition-all duration-300"
|
<div class="min-h-screen flex flex-col">
|
||||||
bind:this={headerElement}
|
<!-- Header 部分 -->
|
||||||
>
|
<header
|
||||||
<div class="mx-auto max-w-screen-lg flex items-center justify-between p-4 transition-all duration-300"
|
class="sticky top-0 z-10 transition-all duration-300"
|
||||||
class:flex-col={!isScrolled}
|
bind:this={headerElement}
|
||||||
class:flex-row={isScrolled}
|
|
||||||
>
|
>
|
||||||
<Logo size={isScrolled ? 32 : 128} withBorder={!isScrolled} hasGap={!isScrolled} class_="transition-transform duration-300 ease-in-out mr-4" />
|
<div class="mx-auto max-w-screen-lg flex items-center justify-between p-4 transition-all duration-300"
|
||||||
<Input
|
class:flex-col={!isScrolled}
|
||||||
type="text"
|
class:flex-row={isScrolled}
|
||||||
class={inputClasses}
|
>
|
||||||
bind:value={searchString}
|
<Logo size={isScrolled ? 32 : 128} withBorder={!isScrolled} hasGap={!isScrolled} class_="transition-transform duration-300 ease-in-out mr-4" />
|
||||||
placeholder={$_('searchPlaceholder')}
|
<Input
|
||||||
on:keydown={handleEnterPress}
|
type="text"
|
||||||
autofocus
|
class={inputClasses}
|
||||||
/>
|
bind:value={searchString}
|
||||||
<div class="mx-auto max-w-screen-lg">
|
placeholder={$_('searchPlaceholder')}
|
||||||
<div class="flex space-x-2" class:mt-4={!isScrolled} class:ml-4={isScrolled}>
|
on:keydown={handleEnterPress}
|
||||||
<LibraryFilter bind:selectedLibraryIds={selectedLibraries} />
|
autofocus
|
||||||
<TimeFilter bind:start={startTimestamp} bind:end={endTimestamp} />
|
/>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- 添加一个动态调整高度的空白区域 -->
|
<!-- 添加一个动态调整高度的空白区域 -->
|
||||||
<div style="height: {isScrolled ? '100px' : '0px'}"></div>
|
<div style="height: {isScrolled ? '100px' : '0px'}"></div>
|
||||||
|
|
||||||
<div class="mx-auto flex flex-col sm:flex-row">
|
<!-- 主要内容区域 -->
|
||||||
<!-- Left panel for tags and created_date -->
|
<main class="flex-grow">
|
||||||
{#if searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0}
|
<div class="mx-auto flex flex-col sm:flex-row">
|
||||||
<div class="xl:w-1/7 lg:w-1/6 md:w-1/5 sm:w-full pr-4">
|
<!-- 左侧面板 -->
|
||||||
{#each searchResult.facet_counts as facet}
|
{#if searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0}
|
||||||
{#if facet.field_name === 'tags' || facet.field_name === 'created_date'}
|
<div class="xl:w-1/7 lg:w-1/6 md:w-1/5 sm:w-full pr-4">
|
||||||
<FacetFilter
|
{#each searchResult.facet_counts as facet}
|
||||||
{facet}
|
{#if facet.field_name === 'tags' || facet.field_name === 'created_date'}
|
||||||
selectedItems={facet.field_name === 'tags' ? selectedTags : selectedDates}
|
<FacetFilter
|
||||||
onItemChange={facet.field_name === 'tags' ? handleTagChange : handleDateChange}
|
{facet}
|
||||||
/>
|
selectedItems={facet.field_name === 'tags' ? selectedTags : selectedDates}
|
||||||
{/if}
|
onItemChange={facet.field_name === 'tags' ? handleTagChange : handleDateChange}
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Right panel for search results -->
|
|
||||||
<div class="{searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0 ? 'xl:w-6/7 lg:w-5/6 md:w-4/5' : 'w-full'}">
|
|
||||||
{#if isLoading}
|
|
||||||
<p class="text-center">{$_('loading')}</p>
|
|
||||||
{:else if searchResult && searchResult.hits.length > 0}
|
|
||||||
{#if searchResult['search_time_ms'] > 0}
|
|
||||||
<p class="search-summary mb-4 text-center">
|
|
||||||
{$_('searchSummary', { values: {
|
|
||||||
found: searchResult['found'].toLocaleString(),
|
|
||||||
outOf: searchResult['out_of'].toLocaleString(),
|
|
||||||
time: searchResult['search_time_ms']
|
|
||||||
}})}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
||||||
{#each searchResult.hits as hit, index}
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
||||||
<div
|
|
||||||
class="bg-white rounded-lg overflow-hidden border border-gray-300 relative"
|
|
||||||
on:click={() => openModal(index)}
|
|
||||||
>
|
|
||||||
<div class="px-4 pt-4">
|
|
||||||
<h2 class="line-clamp-2 h-12">
|
|
||||||
{getEntityTitle(hit.document)}
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-700 text-xs">
|
|
||||||
{formatDistanceToNow(new Date(hit.document.file_created_at * 1000), {
|
|
||||||
addSuffix: true
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<figure class="px-4 pt-4 mb-4 relative">
|
|
||||||
<img
|
|
||||||
class="w-full h-48 object-cover"
|
|
||||||
src={`${apiEndpoint}/files/${hit.document.filepath}`}
|
|
||||||
alt=""
|
|
||||||
/>
|
/>
|
||||||
{#if getAppName(hit.document) !== "unknown"}
|
{/if}
|
||||||
<div
|
{/each}
|
||||||
class="absolute bottom-2 left-6 bg-white bg-opacity-75 px-2 py-1 rounded-full text-xs font-semibold border border-gray-200 flex items-center space-x-2"
|
</div>
|
||||||
>
|
{/if}
|
||||||
<LucideIcon name={translateAppName(getAppName(hit.document)) || "Hexagon"} size={16} />
|
|
||||||
<span>{getAppName(hit.document)}</span>
|
<!-- 右侧面板 -->
|
||||||
|
<div class="{searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0 ? 'xl:w-6/7 lg:w-5/6 md:w-4/5' : 'w-full'}">
|
||||||
|
{#if isLoading}
|
||||||
|
<p class="text-center">{$_('loading')}</p>
|
||||||
|
{:else if searchResult && searchResult.hits.length > 0}
|
||||||
|
{#if searchResult['search_time_ms'] > 0}
|
||||||
|
<p class="search-summary mb-4 text-center">
|
||||||
|
{$_('searchSummary', { values: {
|
||||||
|
found: searchResult['found'].toLocaleString(),
|
||||||
|
outOf: searchResult['out_of'].toLocaleString(),
|
||||||
|
time: searchResult['search_time_ms']
|
||||||
|
}})}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
{#each searchResult.hits as hit, index}
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-lg overflow-hidden border border-gray-300 relative"
|
||||||
|
on:click={() => openModal(index)}
|
||||||
|
>
|
||||||
|
<div class="px-4 pt-4">
|
||||||
|
<h2 class="line-clamp-2 h-12">
|
||||||
|
{getEntityTitle(hit.document)}
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-700 text-xs">
|
||||||
|
{formatDistanceToNow(new Date(hit.document.file_created_at * 1000), {
|
||||||
|
addSuffix: true
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<figure class="px-4 pt-4 mb-4 relative">
|
||||||
</figure>
|
<img
|
||||||
|
class="w-full h-48 object-cover"
|
||||||
|
src={`${apiEndpoint}/files/${hit.document.filepath}`}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
{#if getAppName(hit.document) !== "unknown"}
|
||||||
|
<div
|
||||||
|
class="absolute bottom-2 left-6 bg-white bg-opacity-75 px-2 py-1 rounded-full text-xs font-semibold border border-gray-200 flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<LucideIcon name={translateAppName(getAppName(hit.document)) || "Hexagon"} size={16} />
|
||||||
|
<span>{getAppName(hit.document)}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{:else if searchString}
|
||||||
|
<p class="text-center">{$_('noResults')}</p>
|
||||||
|
{:else}
|
||||||
|
<p class="text-center"></p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{:else if searchString}
|
</div>
|
||||||
<p class="text-center">{$_('noResults')}</p>
|
</main>
|
||||||
{:else}
|
|
||||||
<p class="text-center"></p>
|
<!-- Footer -->
|
||||||
{/if}
|
<footer class="w-full mx-auto mt-8">
|
||||||
</div>
|
<div class="container mx-auto">
|
||||||
|
<div class="border-t border-slate-900/5 py-10 text-center">
|
||||||
|
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('slogan')}</p>
|
||||||
|
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('copyright')}</p>
|
||||||
|
<div class="mt-2 flex justify-center items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
|
||||||
|
<a href="https://github.com/arkohut/memos"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="hover:text-slate-900 transition-colors">
|
||||||
|
<Github size={16} />
|
||||||
|
</a>
|
||||||
|
<div class="h-4 w-px bg-slate-500/20" />
|
||||||
|
<LanguageSwitcher />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if searchResult && searchResult.hits.length && showModal}
|
{#if searchResult && searchResult.hits.length && showModal}
|
||||||
@ -408,17 +435,3 @@
|
|||||||
openModal((selectedImage - 1 + searchResult.hits.length) % searchResult.hits.length)}
|
openModal((selectedImage - 1 + searchResult.hits.length) % searchResult.hits.length)}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<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">{$_('slogan')}</p>
|
|
||||||
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('copyright')}</p>
|
|
||||||
<div class="mt-2 flex justify-center items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
|
|
||||||
<a href="https://github.com/arkohut/memos" target="_blank" rel="noopener noreferrer">
|
|
||||||
<Github size={16} />
|
|
||||||
</a>
|
|
||||||
<div class="h-4 w-px bg-slate-500/20" />
|
|
||||||
<LanguageSwitcher />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user