Scroll for search results are now on the right of screen

This commit includes refactoring the code format to use consistent indentation, and updates the CSS classes to improve UI element styling. The changes were made in the src/lib/search.ts file and the src/routes/projects/[projectId]/search/+page.svelte file.

- Adjusted the indentation in src/lib/search.ts to use tabs consistently
- Changed the figure class from "mx-14 flex h-full flex-col gap-2" to "search-results flex h-full flex-col gap-2" in +page.svelte
- Updated the figcaption and ul elements to have consistent margins and padding in +page.svelte
This commit is contained in:
Ian Donahue 2023-03-23 16:22:43 +01:00
parent 39e0c1a8ff
commit b10518b14f
2 changed files with 14 additions and 14 deletions

View File

@ -1,18 +1,18 @@
import { invoke } from '@tauri-apps/api';
export type SearchResult = {
projectId: string;
sessionId: string;
filePath: string;
// index of the delta in the session.
index: number;
// contains the highlighted text snippets.
highlighted: string[];
projectId: string;
sessionId: string;
filePath: string;
// index of the delta in the session.
index: number;
// contains the highlighted text snippets.
highlighted: string[];
};
export const search = (params: {
projectId: string;
query: string;
limit?: number;
offset?: number;
projectId: string;
query: string;
limit?: number;
offset?: number;
}) => invoke<{ total: number; page: SearchResult[] }>('search', params);

View File

@ -52,7 +52,7 @@
);
</script>
<figure class="mx-14 flex h-full flex-col gap-2">
<figure class="search-results flex h-full flex-col gap-2">
{#if $searchState?.isLoading || $searchState?.isReloading}
<figcaption class="m-auto">
<p class="mb-2 text-xl text-[#D4D4D8]">Looking for "{$query}"...</p>
@ -62,7 +62,7 @@
<p class="mb-2 text-xl text-[#D4D4D8]">Error searching for "{$query}"</p>
</figcaption>
{:else if $searchState?.isLoaded}
<figcaption class="mb-10 mt-14">
<figcaption class="mx-14 mb-10 mt-14">
{#if $searchResults.total > 0}
<p class="mb-2 text-xl text-[#D4D4D8]">Results for "{$query}"</p>
<p class="text-lg text-[#717179]">{$searchResults.total} change instances</p>
@ -71,7 +71,7 @@
{/if}
</figcaption>
<ul class="flex-auto overflow-auto">
<ul class="px-14 flex-auto overflow-auto">
{#each $searchResults.page as { doc, deltas, filepath, highlight }}
{@const timestamp = deltas[deltas.length - 1].timestampMs}
<li class="mt-6">