Skip to content

Commit e54459c

Browse files
Turbo87Turbo87
committed
Header: Use full width and mobile-first styling
1 parent b920c92 commit e54459c

File tree

3 files changed

+183
-189
lines changed

3 files changed

+183
-189
lines changed

‎.template-lintrc.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22

33
module.exports = {
44
extends: ['octane', 'a11y'],
5-
6-
pending: [{ moduleId: 'app/components/header', only: ['no-duplicate-landmark-elements'] }],
75
};

‎app/components/header.hbs‎

Lines changed: 132 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,143 @@
11
<header local-class="header">
2-
<div local-class="header-inner">
3-
<LinkTo @route="index" local-class="index-link">
4-
<img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
5-
<h1>crates.io</h1>
6-
</LinkTo>
7-
8-
<form local-class="desktop-search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
9-
<input
10-
type="text"
11-
local-class="search"
12-
name="q"
13-
id="cargo-desktop-search"
14-
placeholder="Click or press 'S' to search..."
15-
value={{this.header.searchValue}}
16-
oninput={{this.updateSearchValue}}
17-
autocorrect="off"
18-
autocapitalize="off"
19-
autofocus="autofocus"
20-
spellcheck="false"
21-
required
22-
data-test-search-input
23-
>
24-
<label for="cargo-desktop-search" local-class="search-label">Search</label>
25-
{{on-key 's' (focus '#cargo-desktop-search')}}
26-
{{on-key 'S' (focus '#cargo-desktop-search')}}
27-
{{on-key 'shift+s' (focus '#cargo-desktop-search')}}
28-
</form>
2+
<LinkTo @route="index" local-class="index-link">
3+
<img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
4+
<h1>crates.io</h1>
5+
</LinkTo>
296

30-
<nav local-class='nav'>
31-
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
32-
Browse All Crates
33-
</LinkTo>
34-
<span local-class="sep">|</span>
35-
<Dropdown as |dd|>
36-
<dd.Trigger local-class="dropdown-button">
37-
Docs
38-
</dd.Trigger>
7+
<form local-class="search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
8+
<input
9+
type="text"
10+
local-class="search"
11+
name="q"
12+
id="cargo-desktop-search"
13+
placeholder="Click or press 'S' to search..."
14+
value={{this.header.searchValue}}
15+
oninput={{this.updateSearchValue}}
16+
autocorrect="off"
17+
autocapitalize="off"
18+
spellcheck="false"
19+
required
20+
data-test-search-input
21+
>
22+
<label for="cargo-desktop-search" local-class="search-label">Search</label>
23+
{{on-key 's' (focus '#cargo-desktop-search')}}
24+
{{on-key 'S' (focus '#cargo-desktop-search')}}
25+
{{on-key 'shift+s' (focus '#cargo-desktop-search')}}
26+
</form>
3927

40-
<dd.Menu local-class="doc-links" as |menu|>
41-
<menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
42-
<menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
43-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
44-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
45-
<menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
46-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
47-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
48-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
49-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
50-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
51-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
52-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
53-
<menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
54-
<menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
55-
</dd.Menu>
56-
</Dropdown>
57-
<span local-class="sep">|</span>
58-
{{#if this.session.currentUser}}
59-
<Dropdown data-test-user-menu as |dd|>
60-
<dd.Trigger local-class="dropdown-button" data-test-toggle>
61-
<UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
62-
{{ this.session.currentUser.name }}
63-
</dd.Trigger>
64-
65-
<dd.Menu local-class="current-user-links" as |menu|>
66-
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
67-
<menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
68-
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
69-
<menu.Item local-class="menu-item-with-separator">
70-
<button
71-
type="button"
72-
disabled={{this.session.logoutTask.isRunning}}
73-
local-class="logout-menu-item"
74-
data-test-logout-button
75-
{{on "click" (perform this.session.logoutTask)}}
76-
>
77-
{{#if this.session.logoutTask.isRunning}}
78-
<LoadingSpinner local-class="spinner"/>
79-
{{/if}}
80-
Sign Out
81-
</button>
82-
</menu.Item>
83-
</dd.Menu>
84-
</Dropdown>
85-
{{else}}
86-
<button
87-
type="button"
88-
disabled={{this.session.loginTask.isRunning}}
89-
local-class="login-button"
90-
data-test-login-button
91-
{{on "click" (perform this.session.loginTask)}}
92-
>
93-
{{#if this.session.loginTask.isRunning}}
94-
<LoadingSpinner local-class="spinner"/>
95-
{{else}}
96-
{{svg-jar "lock" local-class="login-icon"}}
97-
{{/if}}
98-
Log in with GitHub
99-
</button>
100-
{{/if}}
101-
</nav>
28+
<nav local-class='nav'>
29+
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
30+
Browse All Crates
31+
</LinkTo>
32+
<span local-class="sep">|</span>
33+
<Dropdown as |dd|>
34+
<dd.Trigger local-class="dropdown-button">
35+
Docs
36+
</dd.Trigger>
10237

103-
<div local-class='menu'>
104-
<Dropdown as |dd|>
105-
<dd.Trigger local-class="dropdown-button">
106-
Menu
38+
<dd.Menu local-class="doc-links" as |menu|>
39+
<menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
40+
<menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
41+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
42+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
43+
<menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
44+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
45+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
46+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
47+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
48+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
49+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
50+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
51+
<menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
52+
<menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
53+
</dd.Menu>
54+
</Dropdown>
55+
<span local-class="sep">|</span>
56+
{{#if this.session.currentUser}}
57+
<Dropdown data-test-user-menu as |dd|>
58+
<dd.Trigger local-class="dropdown-button" data-test-toggle>
59+
<UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
60+
{{ this.session.currentUser.name }}
10761
</dd.Trigger>
62+
10863
<dd.Menu local-class="current-user-links" as |menu|>
109-
<menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
110-
{{#if this.session.currentUser}}
111-
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
112-
<menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
113-
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
114-
<menu.Item local-class="menu-item-with-separator">
115-
<button
116-
type="button"
117-
disabled={{this.session.logoutTask.isRunning}}
118-
local-class="logout-menu-item"
119-
{{on "click" (perform this.session.logoutTask)}}
120-
>
121-
{{#if this.session.logoutTask.isRunning}}
122-
<LoadingSpinner local-class="spinner"/>
123-
{{/if}}
124-
Sign Out
125-
</button>
126-
</menu.Item>
127-
{{else}}
128-
<menu.Item>
129-
<button
130-
type="button"
131-
disabled={{this.session.loginTask.isRunning}}
132-
local-class="login-menu-item"
133-
{{on "click" (perform this.session.loginTask)}}
134-
>
135-
{{#if this.session.loginTask.isRunning}}
136-
<LoadingSpinner local-class="spinner"/>
137-
{{/if}}
138-
Log in with GitHub
139-
</button>
140-
</menu.Item>
141-
{{/if}}
64+
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
65+
<menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
66+
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
67+
<menu.Item local-class="menu-item-with-separator">
68+
<button
69+
type="button"
70+
disabled={{this.session.logoutTask.isRunning}}
71+
local-class="logout-menu-item"
72+
data-test-logout-button
73+
{{on "click" (perform this.session.logoutTask)}}
74+
>
75+
{{#if this.session.logoutTask.isRunning}}
76+
<LoadingSpinner local-class="spinner"/>
77+
{{/if}}
78+
Sign Out
79+
</button>
80+
</menu.Item>
14281
</dd.Menu>
14382
</Dropdown>
144-
</div>
145-
146-
<form local-class='mobile-search' action='/search' {{on "submit" (prevent-default this.search)}}>
147-
<input
148-
type="text"
149-
local-class="search"
150-
name="q"
151-
id="cargo-mobile-search"
152-
placeholder="Search"
153-
value={{this.header.searchValue}}
154-
oninput={{this.updateSearchValue}}
155-
autocorrect="off"
156-
required
83+
{{else}}
84+
<button
85+
type="button"
86+
disabled={{this.session.loginTask.isRunning}}
87+
local-class="login-button"
88+
data-test-login-button
89+
{{on "click" (perform this.session.loginTask)}}
15790
>
158-
<label for="cargo-mobile-search" local-class="search-label">Search</label>
159-
</form>
91+
{{#if this.session.loginTask.isRunning}}
92+
<LoadingSpinner local-class="spinner"/>
93+
{{else}}
94+
{{svg-jar "lock" local-class="login-icon"}}
95+
{{/if}}
96+
Log in with GitHub
97+
</button>
98+
{{/if}}
99+
</nav>
100+
101+
<div local-class='menu'>
102+
<Dropdown as |dd|>
103+
<dd.Trigger local-class="dropdown-button">
104+
Menu
105+
</dd.Trigger>
106+
<dd.Menu local-class="current-user-links" as |menu|>
107+
<menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
108+
{{#if this.session.currentUser}}
109+
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
110+
<menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
111+
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
112+
<menu.Item local-class="menu-item-with-separator">
113+
<button
114+
type="button"
115+
disabled={{this.session.logoutTask.isRunning}}
116+
local-class="logout-menu-item"
117+
{{on "click" (perform this.session.logoutTask)}}
118+
>
119+
{{#if this.session.logoutTask.isRunning}}
120+
<LoadingSpinner local-class="spinner"/>
121+
{{/if}}
122+
Sign Out
123+
</button>
124+
</menu.Item>
125+
{{else}}
126+
<menu.Item>
127+
<button
128+
type="button"
129+
disabled={{this.session.loginTask.isRunning}}
130+
local-class="login-menu-item"
131+
{{on "click" (perform this.session.loginTask)}}
132+
>
133+
{{#if this.session.loginTask.isRunning}}
134+
<LoadingSpinner local-class="spinner"/>
135+
{{/if}}
136+
Log in with GitHub
137+
</button>
138+
</menu.Item>
139+
{{/if}}
140+
</dd.Menu>
141+
</Dropdown>
160142
</div>
161143
</header>

0 commit comments

Comments
 (0)