Skip to content

Commit d686e46

Browse files
sebastiankrllsebastiankrll
committed
Add search highlighting
Closes #65
1 parent 003ca90 commit d686e46

7 files changed

Lines changed: 313 additions & 200 deletions

File tree

‎apps/api/src/services/db.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ async function searchPilots(where: Prisma.PilotWhereInput) {
5555
select: {
5656
id: true,
5757
callsign: true,
58+
cid: true,
59+
name: true,
5860
flight_plan: true,
5961
aircraft: true,
6062
live: true,
@@ -75,6 +77,8 @@ async function searchPilots(where: Prisma.PilotWhereInput) {
7577
distinct: ["callsign"],
7678
select: {
7779
id: true,
80+
cid: true,
81+
name: true,
7882
callsign: true,
7983
flight_plan: true,
8084
aircraft: true,

‎apps/web/components/Header/Header.css‎

Lines changed: 0 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -98,144 +98,3 @@ header {
9898
#header-nav:hover use {
9999
color: var(--color-green);
100100
}
101-
102-
#header-search-wrapper {
103-
background-color: var(--color-bg);
104-
height: 2rem;
105-
display: flex;
106-
justify-content: center;
107-
align-items: center;
108-
padding: 0rem 10px;
109-
border: 1px solid var(--color-border);
110-
margin-left: auto;
111-
width: 18rem;
112-
position: relative;
113-
gap: 10px;
114-
}
115-
116-
#header-search {
117-
border: none;
118-
height: 100%;
119-
box-sizing: border-box;
120-
background-color: transparent;
121-
color: var(--color-light-text);
122-
outline: none;
123-
width: 100%;
124-
font-size: var(--font-size-normal);
125-
transform: translateY(1px);
126-
}
127-
128-
#header-search::placeholder {
129-
color: var(--color-light-text);
130-
}
131-
132-
#header-search-clear {
133-
height: 16px;
134-
width: 16px;
135-
}
136-
137-
#header-search-clear:hover use {
138-
color: var(--color-red);
139-
}
140-
141-
#header-search-results {
142-
position: absolute;
143-
top: 36px;
144-
max-height: 500px;
145-
overflow-y: auto;
146-
background-color: var(--color-bg);
147-
border: 1px solid var(--color-border);
148-
box-shadow: var(--box-shadow);
149-
z-index: 9999;
150-
width: 100%;
151-
}
152-
153-
#header-search-placeholder {
154-
display: flex;
155-
flex-flow: column;
156-
gap: 10px;
157-
padding: 4px;
158-
font-size: var(--font-size-normal);
159-
}
160-
161-
.header-search-separator {
162-
background-color: var(--color-dark-grey);
163-
padding: 4px;
164-
text-transform: uppercase;
165-
display: flex;
166-
align-items: center;
167-
justify-content: space-between;
168-
font-size: var(--font-size-small);
169-
}
170-
171-
.search-item {
172-
display: flex;
173-
gap: 6px;
174-
padding: 4px;
175-
box-sizing: border-box;
176-
width: 100%;
177-
overflow: hidden;
178-
}
179-
180-
.search-item:hover {
181-
background-color: var(--color-hover);
182-
}
183-
184-
.search-icon {
185-
display: flex;
186-
align-items: center;
187-
justify-content: center;
188-
height: 40px;
189-
aspect-ratio: 1 / 1;
190-
background-color: var(--color-bg);
191-
border: 1px solid var(--color-border);
192-
box-sizing: border-box;
193-
}
194-
195-
.search-icon p,
196-
.search-icon span {
197-
font-weight: var(--font-weight-bold);
198-
font-size: 1.2rem;
199-
}
200-
201-
.search-info {
202-
display: flex;
203-
flex-direction: column;
204-
justify-content: space-between;
205-
align-items: start;
206-
padding: 2px 0;
207-
flex: 1 1 0%;
208-
overflow: hidden;
209-
}
210-
211-
.search-info.pilot {
212-
display: grid;
213-
grid-template-columns: 1fr auto;
214-
align-items: center;
215-
gap: 4px;
216-
}
217-
218-
.search-title {
219-
font-size: var(--font-size-normal);
220-
font-weight: var(--font-weight-bold);
221-
text-overflow: ellipsis;
222-
white-space: nowrap;
223-
overflow: hidden;
224-
max-width: 100%;
225-
text-align: left;
226-
}
227-
228-
.search-tags {
229-
display: flex;
230-
gap: 6px;
231-
font-size: var(--font-size-small);
232-
align-items: center;
233-
}
234-
235-
.search-tags span {
236-
color: white;
237-
}
238-
239-
.search-tags span.bg {
240-
padding: 0px 2px;
241-
}

‎apps/web/components/Header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import Search from "./Search";
3+
import Search from "../Search/Search";
44
import "./Header.css";
55
import Image from "next/image";
66
import { useSession } from "next-auth/react";

‎apps/web/components/Search/Search.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
#header-search-wrapper {
2+
background-color: var(--color-bg);
3+
height: 2rem;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
padding: 0rem 10px;
8+
border: 1px solid var(--color-border);
9+
margin-left: auto;
10+
width: 18rem;
11+
position: relative;
12+
gap: 10px;
13+
}
14+
15+
#header-search {
16+
border: none;
17+
height: 100%;
18+
box-sizing: border-box;
19+
background-color: transparent;
20+
color: var(--color-light-text);
21+
outline: none;
22+
width: 100%;
23+
font-size: var(--font-size-normal);
24+
transform: translateY(1px);
25+
}
26+
27+
#header-search::placeholder {
28+
color: var(--color-light-text);
29+
}
30+
31+
#header-search-clear {
32+
height: 16px;
33+
width: 16px;
34+
}
35+
36+
#header-search-clear:hover use {
37+
color: var(--color-red);
38+
}
39+
40+
#header-search-results {
41+
position: absolute;
42+
top: 36px;
43+
max-height: 500px;
44+
overflow-y: auto;
45+
background-color: var(--color-bg);
46+
border: 1px solid var(--color-border);
47+
box-shadow: var(--box-shadow);
48+
z-index: 9999;
49+
width: 100%;
50+
}
51+
52+
#header-search-placeholder {
53+
display: flex;
54+
flex-flow: column;
55+
gap: 10px;
56+
padding: 4px;
57+
font-size: var(--font-size-normal);
58+
}
59+
60+
.header-search-separator {
61+
background-color: var(--color-dark-grey);
62+
padding: 4px;
63+
text-transform: uppercase;
64+
display: flex;
65+
align-items: center;
66+
justify-content: space-between;
67+
font-size: var(--font-size-small);
68+
}
69+
70+
.search-history-item {
71+
display: flex;
72+
gap: 6px;
73+
padding: 4px;
74+
box-sizing: border-box;
75+
width: 100%;
76+
overflow: hidden;
77+
align-items: center;
78+
font-size: var(--font-size-normal);
79+
line-height: var(--font-size-normal);
80+
}
81+
82+
.search-item {
83+
display: grid;
84+
grid-template-columns: min-content auto;
85+
grid-template-rows: 1fr auto;
86+
gap: 0px 6px;
87+
padding: 4px;
88+
box-sizing: border-box;
89+
width: 100%;
90+
overflow: hidden;
91+
}
92+
93+
.search-item:hover,
94+
.search-history-item:hover {
95+
background-color: var(--color-hover);
96+
}
97+
98+
.search-extra {
99+
font-size: var(--font-size-small);
100+
grid-area: 2 / 1 / 3 / 3;
101+
display: flex;
102+
justify-content: start;
103+
align-items: center;
104+
gap: 4px;
105+
margin-top: 4px;
106+
}
107+
108+
.search-icon {
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
height: 40px;
113+
aspect-ratio: 1 / 1;
114+
background-color: var(--color-bg);
115+
border: 1px solid var(--color-border);
116+
box-sizing: border-box;
117+
}
118+
119+
.search-icon p,
120+
.search-icon span {
121+
font-weight: var(--font-weight-bold);
122+
font-size: 1.2rem;
123+
}
124+
125+
.search-info {
126+
display: flex;
127+
flex-direction: column;
128+
justify-content: space-between;
129+
align-items: start;
130+
padding: 2px 0;
131+
flex: 1 1 0%;
132+
overflow: hidden;
133+
}
134+
135+
.search-info.pilot {
136+
display: grid;
137+
grid-template-columns: 1fr auto;
138+
align-items: center;
139+
gap: 4px;
140+
}
141+
142+
.search-title {
143+
font-size: var(--font-size-normal);
144+
text-overflow: ellipsis;
145+
white-space: nowrap;
146+
overflow: hidden;
147+
max-width: 100%;
148+
text-align: left;
149+
}
150+
151+
.search-tags {
152+
display: flex;
153+
gap: 6px;
154+
font-size: var(--font-size-small);
155+
align-items: center;
156+
}
157+
158+
.search-tags span {
159+
color: white;
160+
}
161+
162+
.search-tags span.bg {
163+
padding: 0px 2px;
164+
}

0 commit comments

Comments
 (0)