Skip to content

Commit a1c52a5

Browse files
josevalimjosevalim
committed
Fixes to search page
1 parent f932370 commit a1c52a5

File tree

2 files changed

+100
-119
lines changed

2 files changed

+100
-119
lines changed

‎src/hexdocs/view/home.gleam‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -289,13 +289,13 @@ fn autocomplete(model: Model) {
289289
}
290290

291291
fn empty_package_autocomplete() {
292-
html.div([attribute.class("py-2 px-4 text-md text-red-800")], [
292+
html.div([attribute.class("py-2 px-4 text-md text-red-700")], [
293293
html.text("No packages found"),
294294
])
295295
}
296296

297297
fn empty_versions_autocomplete() {
298-
html.div([attribute.class("py-2 px-4 text-md text-red-800")], [
298+
html.div([attribute.class("py-2 px-4 text-md text-red-700")], [
299299
html.text("No versions found"),
300300
])
301301
}

‎src/hexdocs/view/search.gleam‎

Lines changed: 98 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ pub fn search(model: Model) {
2020
html.div(
2121
[
2222
class(
23-
"fixed top-[22px] right-4 z-50 flex-col items-end gap-4 hidden 2xl:flex dark:text-white",
23+
"fixed top-[28px] right-4 z-50 flex-col items-end gap-4 hidden 2xl:flex dark:text-white",
2424
),
2525
],
2626
[hexdocs_logo()],
@@ -50,18 +50,6 @@ pub fn search(model: Model) {
5050
],
5151
),
5252
hexdocs_logo(),
53-
html.button([class("p-2"), event.on_click(msg.UserToggledDarkMode)], [
54-
html.i(
55-
[
56-
class("theme-icon text-xl text-slate-700 dark:text-slate-300"),
57-
class(case model.dark_mode.mode {
58-
msg.Dark -> "ri-sun-line"
59-
msg.Light -> "ri-moon-line"
60-
}),
61-
],
62-
[],
63-
),
64-
]),
6553
],
6654
),
6755
html.div(
@@ -78,7 +66,7 @@ pub fn search(model: Model) {
7866
],
7967
[
8068
html.div([class("p-5")], [
81-
html.div([class("flex justify-between items-center mt-2")], [
69+
html.div([class("flex justify-between items-center md:mt-2")], [
8270
html.h2(
8371
[
8472
class(
@@ -107,86 +95,89 @@ pub fn search(model: Model) {
10795
html.form(
10896
[event.on_submit(fn(_) { msg.UserSubmittedPackagesFilter })],
10997
[
110-
html.div([class("mt-4 flex gap-2")], [
111-
html.div(
112-
[
113-
class(
114-
"flex-grow bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 relative",
115-
),
116-
],
117-
[
118-
html.input([
119-
attribute.id("search-package-input"),
98+
html.div(
99+
[class("mt-4 flex gap-2 text-slate-700 dark:text-slate-300")],
100+
[
101+
html.div(
102+
[
120103
class(
121-
"search-input w-full h-10 bg-transparent px-10 text-slate-800 dark:text-slate-200 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500",
122-
),
123-
attribute.placeholder("Package Name"),
124-
attribute.type_("text"),
125-
attribute.value(
126-
model.search_packages_filter_input_displayed,
104+
"flex-grow bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 relative",
127105
),
128-
event.on_input(msg.UserEditedPackagesFilterInput),
129-
event.on_focus(msg.UserFocusedPackagesFilterInput),
130-
event.on_click(msg.None) |> event.stop_propagation,
131-
event.advanced(
132-
"keydown",
133-
on_arrow_up_down(model.Package),
134-
),
135-
]),
136-
html.i(
137-
[
106+
],
107+
[
108+
html.input([
109+
attribute.id("search-package-input"),
138110
class(
139-
"ri-search-2-line absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-500 dark:text-slate-400 text-lg",
111+
"search-input w-full h-10 bg-transparent px-10 text-slate-800 dark:text-slate-200 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500",
140112
),
141-
],
142-
[],
143-
),
144-
autocomplete(
145-
model,
146-
model.Package,
147-
model.AutocompleteOnPackage,
148-
),
149-
],
150-
),
151-
html.div(
152-
[
153-
class(
154-
"w-20 bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 relative",
155-
),
156-
],
157-
[
158-
html.input([
159-
attribute.id("search-version-input"),
160-
class(
161-
"search-input w-full h-10 bg-transparent px-2 text-slate-800 dark:text-slate-200 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-[0.2]",
162-
),
163-
attribute.placeholder("ver"),
164-
attribute.type_("text"),
165-
attribute.value(
166-
model.search_packages_filter_version_input_displayed,
167-
),
168-
attribute.disabled(
169-
!list.contains(
170-
model.packages,
113+
attribute.placeholder("Package Name"),
114+
attribute.type_("text"),
115+
attribute.value(
171116
model.search_packages_filter_input_displayed,
172117
),
118+
event.on_input(msg.UserEditedPackagesFilterInput),
119+
event.on_focus(msg.UserFocusedPackagesFilterInput),
120+
event.on_click(msg.None) |> event.stop_propagation,
121+
event.advanced(
122+
"keydown",
123+
on_arrow_up_down(model.Package),
124+
),
125+
]),
126+
html.i(
127+
[
128+
class(
129+
"ri-search-2-line absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-500 dark:text-slate-400 text-lg",
130+
),
131+
],
132+
[],
173133
),
174-
event.on_input(msg.UserEditedPackagesFilterVersion),
175-
event.on_focus(msg.UserFocusedPackagesFilterVersion),
176-
event.on_click(msg.None) |> event.stop_propagation,
177-
event.advanced(
178-
"keydown",
179-
on_arrow_up_down(model.Version),
134+
autocomplete(
135+
model,
136+
model.Package,
137+
model.AutocompleteOnPackage,
180138
),
181-
]),
182-
autocomplete(
183-
model,
184-
model.Version,
185-
model.AutocompleteOnVersion,
186-
),
187-
],
188-
),
189-
]),
139+
],
140+
),
141+
html.div(
142+
[
143+
class(
144+
"w-20 bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 relative",
145+
),
146+
],
147+
[
148+
html.input([
149+
attribute.id("search-version-input"),
150+
class(
151+
"search-input w-full h-10 bg-transparent px-2 text-slate-800 dark:text-slate-200 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-[0.2]",
152+
),
153+
attribute.placeholder("ver"),
154+
attribute.type_("text"),
155+
attribute.value(
156+
model.search_packages_filter_version_input_displayed,
157+
),
158+
attribute.disabled(
159+
!list.contains(
160+
model.packages,
161+
model.search_packages_filter_input_displayed,
162+
),
163+
),
164+
event.on_input(msg.UserEditedPackagesFilterVersion),
165+
event.on_focus(msg.UserFocusedPackagesFilterVersion),
166+
event.on_click(msg.None) |> event.stop_propagation,
167+
event.advanced(
168+
"keydown",
169+
on_arrow_up_down(model.Version),
170+
),
171+
]),
172+
autocomplete(
173+
model,
174+
model.Version,
175+
model.AutocompleteOnVersion,
176+
),
177+
],
178+
),
179+
],
180+
),
190181
html.div([class("mt-4 flex gap-2")], [
191182
html.button(
192183
[
@@ -201,37 +192,28 @@ pub fn search(model: Model) {
201192
]),
202193
],
203194
),
204-
html.button(
205-
[
206-
event.on_click(msg.UserClickedShare),
207-
class(
208-
"w-10 h-10 bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 flex items-center justify-center cursor-pointer",
209-
),
210-
],
211-
[
212-
html.i(
213-
[
214-
class(
215-
"ri-share-forward-line text-slate-500 dark:text-slate-400 text-lg",
216-
),
217-
],
218-
[],
219-
),
220-
],
221-
),
222195
]),
223196
],
224197
),
225198
html.hr([class("mt-6 border-slate-200 dark:border-slate-700")]),
226199
case list.is_empty(model.search_packages_filters) {
227200
True -> {
228-
html.div([class("text-slate-950 dark:text-slate-50 pt-4")], [
229-
html.text("No package selected, searching all packages"),
201+
html.div([class("text-slate-700 dark:text-slate-300 pt-4")], [
202+
html.text(
203+
"No package selected, searching all packages and all versions.",
204+
),
230205
])
231206
}
232207
False -> {
233208
element.fragment({
234-
use filter <- list.map(model.search_packages_filters)
209+
let sorted_filters =
210+
list.sort(model.search_packages_filters, fn(a, b) {
211+
let #(package_a, _version_a) = a
212+
let #(package_b, _version_b) = b
213+
string.compare(package_a, package_b)
214+
})
215+
216+
use filter <- list.map(sorted_filters)
235217
let #(package, version) = filter
236218
html.div([class("flex justify-between items-center mt-4")], [
237219
html.div(
@@ -240,7 +222,7 @@ pub fn search(model: Model) {
240222
html.div(
241223
[
242224
class(
243-
"self-stretch justify-start text-gray-950 dark:text-slate-50 text-lg font-semibold leading-none",
225+
"self-stretch justify-start text-gray-950 dark:text-slate-50 text-md font-semibold leading-none",
244226
),
245227
],
246228
[html.text(package)],
@@ -369,7 +351,7 @@ fn autocomplete(
369351
html.div(
370352
[
371353
class(
372-
"absolute top-14 w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden",
354+
"absolute z-10 top-14 w-full min-w-[120px] bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden",
373355
),
374356
],
375357
[
@@ -405,7 +387,9 @@ fn autocomplete(
405387
}
406388

407389
fn empty_autocomplete() {
408-
html.text("No packages found")
390+
html.div([attribute.class("py-2 px-4 text-md text-red-700")], [
391+
html.text("No packages found"),
392+
])
409393
}
410394

411395
fn on_select_package(package: String) {
@@ -417,7 +401,7 @@ fn on_select_package(package: String) {
417401
fn hexdocs_logo() {
418402
html.a([class("flex items-center gap-2"), attribute.href("/")], [
419403
html.img([
420-
class("w-auto h-10"),
404+
class("w-auto h-6"),
421405
attribute.alt("HexDocs Logo"),
422406
attribute.src("/images/hexdocs-logo.svg"),
423407
]),
@@ -440,12 +424,9 @@ fn hexdocs_logo() {
440424

441425
fn trash_button(filter: #(String, String)) {
442426
let on_delete = event.on_click(msg.UserDeletedPackagesFilter(filter))
443-
html.div(
444-
[class("w-5 h-5 relative overflow-hidden cursor-pointer"), on_delete],
445-
[
446-
sidebar_icon("ri-delete-bin-5-fill"),
447-
],
448-
)
427+
html.div([class("h-5 relative overflow-hidden cursor-pointer"), on_delete], [
428+
sidebar_icon("ri-delete-bin-5-fill"),
429+
])
449430
}
450431

451432
fn result_card(model: Model, result: hexdocs.TypeSense) {

0 commit comments

Comments
 (0)