Skip to content

Commit e6ba8c1

Browse files
dj-nitehawkdj-nitehawk
committed
css improvements
1 parent c97c234 commit e6ba8c1

File tree

4 files changed

+113
-112
lines changed

4 files changed

+113
-112
lines changed

‎src/app.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ nav ul li a {
210210

211211
#main-sidebar nav .h-6.bg-white {
212212
background: transparent !important;
213+
height: 0;
213214
}
214215

215216
/* main section */
@@ -358,4 +359,8 @@ pre code {
358359

359360
#popover-1>div>div.px-4.pt-2\.5.pb-6.-mt-\[2\.5rem\]>section:nth-child(3) {
360361
display: none;
362+
}
363+
364+
.sl-overlay {
365+
opacity: 0.85 !important;
361366
}

‎src/lib/search/client/components/SearchBox.svelte

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
<div
2-
class="cursor-pointer w-full items-center rounded-sm border border-gray-divider bg-gray-elevate py-2.5 px-3 text-[15px] shadow-sm flex gap-x-2"
3-
on:click>
4-
<div class="flex-1 flex items-center">
5-
<svg width="20" height="20" class="search-icon" viewBox="0 0 20 20">
6-
<path
7-
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
8-
stroke="currentColor"
9-
fill="none"
10-
fill-rule="evenodd"
11-
stroke-linecap="round"
12-
stroke-linejoin="round"
13-
/>
14-
</svg>
15-
<span>Search</span>
16-
</div>
2+
class="cursor-pointer w-full items-center rounded-sm border border-gray-divider bg-gray-elevate py-2.5 px-3 text-[15px] shadow-sm flex gap-x-2"
3+
on:click
4+
>
5+
<div class="flex-1 flex items-center">
6+
<svg width="20" height="20" class="search-icon" viewBox="0 0 20 20">
7+
<path
8+
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
9+
stroke="currentColor"
10+
fill="none"
11+
fill-rule="evenodd"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
/>
15+
</svg>
16+
<span>Search</span>
17+
</div>
1718

18-
<span class="flex space-x-0.5 font-semibold">
19-
<span>⌘</span>
20-
<span>K</span>
21-
</span>
19+
<span class="flex space-x-0.5 font-semibold">
20+
<span>⌘</span>
21+
<span>K</span>
22+
</span>
2223
</div>
2324

2425
<style>
25-
.search-icon {
26-
margin-top: -0.25rem;
27-
margin-right: 0.5rem;
28-
stroke-width: 1.6;
29-
}
30-
</style>
26+
.search-icon {
27+
margin-top: -0.25rem;
28+
margin-right: 0.5rem;
29+
stroke-width: 1.6;
30+
}
31+
</style>

‎src/lib/search/client/components/SearchModal.svelte

Lines changed: 67 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,84 @@
11
<script lang="ts">
2-
import SvelteSpotlight from 'svelte-spotlight/SvelteSpotlight.svelte';
3-
import { createEventDispatcher } from 'svelte';
4-
import type { SearchResult } from '../../types';
2+
import SvelteSpotlight from 'svelte-spotlight/SvelteSpotlight.svelte';
3+
import { createEventDispatcher } from 'svelte';
4+
import type { SearchResult } from '../../types';
55
6-
export let query = "";
7-
export let results : SearchResult[] = [];
8-
export let isOpen = false;
6+
export let query = '';
7+
export let results: SearchResult[] = [];
8+
export let isOpen = false;
99
10-
const dispatch = createEventDispatcher();
10+
const dispatch = createEventDispatcher();
1111
12-
$: onOpenChange(isOpen);
13-
$: onQueryChange(query);
12+
$: onOpenChange(isOpen);
13+
$: onQueryChange(query);
1414
15-
function onOpenChange(newIsOpen: boolean) {
16-
dispatch('openchange', { newIsOpen })
17-
}
15+
function onOpenChange(newIsOpen: boolean) {
16+
dispatch('openchange', { newIsOpen });
17+
}
1818
19-
function onQueryChange(newQuery: string) {
20-
dispatch('querychange', { newQuery });
21-
}
19+
function onQueryChange(newQuery: string) {
20+
dispatch('querychange', { newQuery });
21+
}
2222
23-
function escape(text: string) {
24-
return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
25-
}
23+
function escape(text: string) {
24+
return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
25+
}
2626
27-
function excerpt(content: string, query: string) {
28-
const index = content.toLowerCase().indexOf(query.toLowerCase());
29-
if (index === -1) {
30-
return content.slice(0, 100);
31-
}
27+
function excerpt(content: string, query: string) {
28+
const index = content.toLowerCase().indexOf(query.toLowerCase());
29+
if (index === -1) {
30+
return content.slice(0, 100);
31+
}
3232
33-
const prefix = index > 20
34-
? `...${content.slice(index - 15, index)}`
35-
: content.slice(0, index);
33+
const prefix = index > 20 ? `...${content.slice(index - 15, index)}` : content.slice(0, index);
3634
37-
const suffix = content.slice(
38-
index + query.length,
39-
index + query.length + (80 - (prefix.length + query.length))
40-
);
35+
const suffix = content.slice(
36+
index + query.length,
37+
index + query.length + (80 - (prefix.length + query.length))
38+
);
4139
42-
return (
43-
escape(prefix) +
44-
`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
45-
escape(suffix)
46-
);
40+
return (
41+
escape(prefix) +
42+
`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
43+
escape(suffix)
44+
);
45+
}
4746
48-
}
49-
50-
function onKeyboardSelect(event: CustomEvent<SearchResult>) {
51-
dispatch('select', { href: event.detail.href });
52-
}
47+
function onKeyboardSelect(event: CustomEvent<SearchResult>) {
48+
dispatch('select', { href: event.detail.href });
49+
}
5350
</script>
5451

5552
<SvelteSpotlight
56-
{results}
57-
bind:query
58-
bind:isOpen
59-
modalClass={'w-[600px] max-w-[90%] bg-feDarkBlue-600 shadow-lg rounded-lg'}
60-
headerClass={'py-3 px-10 border-b-2 border-gray-500 border-b-solid'}
61-
inputClass="text-gray-50 focus:outline-none bg-transparent"
62-
contentClass="py-3 [&_li]:py-2"
63-
resultIdKey="href"
64-
on:select={(event) => {
65-
onKeyboardSelect(event);
66-
}}
53+
{results}
54+
bind:query
55+
bind:isOpen
56+
modalClass={'w-[600px] max-w-[90%] bg-feDarkBlue-600 shadow-lg rounded-lg'}
57+
headerClass={'py-3 px-10 border-b-2 border-gray-500 border-b-solid'}
58+
inputClass="text-gray-50 focus:outline-none bg-transparent"
59+
contentClass="py-3 [&_li]:py-2"
60+
resultIdKey="href"
61+
on:select={(event) => {
62+
onKeyboardSelect(event);
63+
}}
6764
>
68-
<div
69-
slot="result"
70-
let:selected
71-
let:result
72-
class={`[&_mark]:bg-feLightBlue-600 cursor-pointer hover:bg-feDarkBlue-800 text-sm w-full ${selected ? "bg-feDarkBlue-500" : ''} `}
73-
>
74-
<a href={result.href}
75-
class="ml-10"
76-
on:click={_ => dispatch('select', { href: result.href })}
77-
>
78-
<strong>{@html excerpt(result.title, query)}</strong>
79-
{#if result.content}
80-
<div class="mx-10 text-slate-500 text-sm truncate">{@html excerpt(result.content, query)}</div>
81-
{/if}
82-
</a>
83-
</div>
65+
<div
66+
slot="result"
67+
let:selected
68+
let:result
69+
class={`[&_mark]:bg-feLightBlue-600 cursor-pointer hover:bg-feDarkBlue-800 text-sm w-full ${
70+
selected ? 'bg-feDarkBlue-500' : ''
71+
} `}
72+
>
73+
<a href={result.href} class="ml-10" on:click={(_) => dispatch('select', { href: result.href })}>
74+
<strong>{@html excerpt(result.title, query)}</strong>
75+
{#if result.content}
76+
<div class="mx-10 text-slate-500 text-sm truncate">
77+
{@html excerpt(result.content, query)}
78+
</div>
79+
{/if}
80+
</a>
81+
</div>
8482

85-
<div slot="noResults" class="ml-10 text-slate-500 text-sm">
86-
No results...
87-
</div>
88-
</SvelteSpotlight>
83+
<div slot="noResults" class="ml-10 text-slate-500 text-sm">No results...</div>
84+
</SvelteSpotlight>

‎src/routes/__layout-kit-docs.svelte

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101

102102
<KitDocs {meta}>
103103
<KitDocsLayout {navbar} {sidebar} search>
104-
<SearchBox on:click={() => searchStore.toggleOpen() } slot="search"/>
104+
<SearchBox on:click={() => searchStore.toggleOpen()} slot="search" />
105105
<div class="logo flex gap-4 items-center" slot="navbar-left">
106106
<div class="max-w-[185px] min-w-[185px]">
107107
<Button href="/">
@@ -128,21 +128,20 @@
128128
</div>
129129
</footer>
130130
</KitDocsLayout>
131-
<SearchModal
132-
isOpen={$searchStore.isOpen}
133-
query={$searchStore.query}
134-
results={$searchStore.results}
135-
on:openchange={({ detail: { newIsOpen } }) => {
136-
if (newIsOpen) {
137-
searchStore.open();
138-
}
139-
else {
140-
searchStore.close();
141-
}
142-
}}
143-
on:querychange={({ detail: { newQuery }}) => searchStore.search(newQuery)}
144-
on:select={({ detail: { href } }) => navigate(href)}
145-
/>
131+
<SearchModal
132+
isOpen={$searchStore.isOpen}
133+
query={$searchStore.query}
134+
results={$searchStore.results}
135+
on:openchange={({ detail: { newIsOpen } }) => {
136+
if (newIsOpen) {
137+
searchStore.open();
138+
} else {
139+
searchStore.close();
140+
}
141+
}}
142+
on:querychange={({ detail: { newQuery } }) => searchStore.search(newQuery)}
143+
on:select={({ detail: { href } }) => navigate(href)}
144+
/>
146145
</KitDocs>
147146

148147
<style>

0 commit comments

Comments
 (0)