Skip to content

Commit 006d562

Browse files
Turbo87Turbo87
committed
Extract SearchForm component
1 parent e4ef88e commit 006d562

File tree

6 files changed

+121
-106
lines changed

6 files changed

+121
-106
lines changed

‎app/components/header.hbs

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,7 @@
55
<h1>crates.io</h1>
66
</LinkTo>
77

8-
<form local-class="search-form" action='/search' role="search" {{on "submit" (prevent-default this.search)}} data-test-search-form>
9-
{{! template-lint-disable require-input-label}}
10-
{{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}
11-
<input
12-
type="text"
13-
local-class="search-input-lg"
14-
name="q"
15-
id="cargo-desktop-search"
16-
placeholder="Click or press 'S' to search..."
17-
value={{this.header.searchValue}}
18-
oninput={{this.updateSearchValue}}
19-
autocorrect="off"
20-
autocapitalize="off"
21-
autofocus="autofocus"
22-
spellcheck="false"
23-
required
24-
aria-label="Search"
25-
data-test-search-input
26-
>
27-
28-
{{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
29-
<input
30-
type="text"
31-
local-class="search-input-sm"
32-
name="q"
33-
placeholder="Search"
34-
value={{this.header.searchValue}}
35-
oninput={{this.updateSearchValue}}
36-
autocorrect="off"
37-
required
38-
aria-label="Search"
39-
>
40-
41-
{{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
42-
<button type="submit" local-class="submit-button">Submit</button>
43-
44-
{{on-key 's' (focus '#cargo-desktop-search')}}
45-
{{on-key 'S' (focus '#cargo-desktop-search')}}
46-
{{on-key 'shift+s' (focus '#cargo-desktop-search')}}
47-
</form>
8+
<SearchForm local-class="search-form" />
489

4910
<nav local-class='nav'>
5011
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>

‎app/components/header.js

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
1-
import { action } from '@ember/object';
21
import { inject as service } from '@ember/service';
32
import Component from '@glimmer/component';
43

54
export default class Header extends Component {
6-
@service header;
7-
@service router;
85
@service session;
9-
10-
@action updateSearchValue(event) {
11-
let { value } = event.target;
12-
this.header.searchValue = value;
13-
}
14-
15-
@action search() {
16-
this.router.transitionTo('search', {
17-
queryParams: {
18-
q: this.header.searchValue,
19-
page: 1,
20-
},
21-
});
22-
}
236
}

‎app/components/header.module.css

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -54,55 +54,6 @@
5454

5555
.search-form {
5656
grid-area: search;
57-
display: flex;
58-
}
59-
60-
.search-input {
61-
font-size: 90%;
62-
border: none;
63-
color: black;
64-
width: 100%;
65-
padding: 5px 5px 5px 25px;
66-
background-color: white;
67-
background-image: url('/assets/search.png');
68-
background-repeat: no-repeat;
69-
background-position: 6px 6px;
70-
background-size: 14px 15px;
71-
border-radius: 15px;
72-
box-shadow: none;
73-
transition: box-shadow 150ms;
74-
75-
&:focus {
76-
outline: none;
77-
box-shadow: 0 0 0 4px var(--yellow500);
78-
}
79-
}
80-
81-
.search-input-lg {
82-
composes: search-input;
83-
margin-left: 16px;
84-
margin-right: 16px;
85-
86-
@media only screen and (max-width: 820px) {
87-
display: none;
88-
}
89-
}
90-
91-
.search-input-sm {
92-
composes: search-input;
93-
display: none;
94-
margin: 10px 0;
95-
96-
@media only screen and (max-width: 820px) {
97-
display: unset;
98-
}
99-
}
100-
101-
.submit-button {
102-
position: absolute;
103-
visibility: hidden;
104-
width: 0;
105-
height: 0;
10657
}
10758

10859
.sep {

‎app/components/search-form.hbs

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<form
2+
local-class="form"
3+
action="/search"
4+
role="search"
5+
data-test-search-form
6+
...attributes
7+
{{on "submit" (prevent-default this.search)}}
8+
>
9+
{{! template-lint-disable require-input-label}}
10+
{{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}
11+
<input
12+
type="text"
13+
local-class="input-lg"
14+
name="q"
15+
id="cargo-desktop-search"
16+
placeholder="Click or press 'S' to search..."
17+
value={{this.header.searchValue}}
18+
oninput={{this.updateSearchValue}}
19+
autocorrect="off"
20+
autocapitalize="off"
21+
autofocus="autofocus"
22+
spellcheck="false"
23+
required
24+
aria-label="Search"
25+
data-test-search-input
26+
>
27+
28+
{{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
29+
<input
30+
type="text"
31+
local-class="input-sm"
32+
name="q"
33+
placeholder="Search"
34+
value={{this.header.searchValue}}
35+
oninput={{this.updateSearchValue}}
36+
autocorrect="off"
37+
required
38+
aria-label="Search"
39+
>
40+
41+
{{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
42+
<button type="submit" local-class="submit-button">Submit</button>
43+
44+
{{on-key 's' (focus '#cargo-desktop-search')}}
45+
{{on-key 'S' (focus '#cargo-desktop-search')}}
46+
{{on-key 'shift+s' (focus '#cargo-desktop-search')}}
47+
</form>

‎app/components/search-form.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { action } from '@ember/object';
2+
import { inject as service } from '@ember/service';
3+
import Component from '@glimmer/component';
4+
5+
export default class Header extends Component {
6+
@service header;
7+
@service router;
8+
9+
@action updateSearchValue(event) {
10+
let { value } = event.target;
11+
this.header.searchValue = value;
12+
}
13+
14+
@action search() {
15+
this.router.transitionTo('search', {
16+
queryParams: {
17+
q: this.header.searchValue,
18+
page: 1,
19+
},
20+
});
21+
}
22+
}

‎app/components/search-form.module.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.form {
2+
display: flex;
3+
}
4+
5+
.input {
6+
font-size: 90%;
7+
border: none;
8+
color: black;
9+
width: 100%;
10+
padding: 5px 5px 5px 25px;
11+
background-color: white;
12+
background-image: url('/assets/search.png');
13+
background-repeat: no-repeat;
14+
background-position: 6px 6px;
15+
background-size: 14px 15px;
16+
border-radius: 15px;
17+
box-shadow: none;
18+
transition: box-shadow 150ms;
19+
20+
&:focus {
21+
outline: none;
22+
box-shadow: 0 0 0 4px var(--yellow500);
23+
}
24+
}
25+
26+
.input-lg {
27+
composes: input;
28+
margin-left: 16px;
29+
margin-right: 16px;
30+
31+
@media only screen and (max-width: 820px) {
32+
display: none;
33+
}
34+
}
35+
36+
.input-sm {
37+
composes: input;
38+
display: none;
39+
margin: 10px 0;
40+
41+
@media only screen and (max-width: 820px) {
42+
display: unset;
43+
}
44+
}
45+
46+
.submit-button {
47+
position: absolute;
48+
visibility: hidden;
49+
width: 0;
50+
height: 0;
51+
}

0 commit comments

Comments
 (0)