Skip to content

Commit dd46526

Browse files
Turbo87Turbo87
authored
Revert "Use full page width for Header and Footer components"
1 parent db6cf5d commit dd46526

File tree

4 files changed

+192
-186
lines changed

4 files changed

+192
-186
lines changed

‎.template-lintrc.js

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

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

‎app/components/footer.module.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
}
1212

1313
.after-main-links {
14+
composes: width-limit from '../styles/application.module.css';
15+
1416
margin: 40px;
1517
text-align: center;
1618

‎app/components/header.hbs

Lines changed: 149 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,161 @@
11
<header local-class="header">
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>
6-
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>
27-
28-
<nav local-class='nav'>
29-
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
30-
Browse All Crates
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>
316
</LinkTo>
32-
<span local-class="sep">|</span>
33-
<Dropdown as |dd|>
34-
<dd.Trigger local-class="dropdown-button">
35-
Docs
36-
</dd.Trigger>
377

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-
</nav>
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>
5629

57-
<div local-class="login">
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 }}
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
6338
</dd.Trigger>
6439

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>
102+
103+
<div local-class='menu'>
104+
<Dropdown as |dd|>
105+
<dd.Trigger local-class="dropdown-button">
106+
Menu
107+
</dd.Trigger>
65108
<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>
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}}
83142
</dd.Menu>
84143
</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-
</div>
144+
</div>
102145

103-
<div local-class='menu'>
104-
<Dropdown as |dd|>
105-
<dd.Trigger local-class="dropdown-button">
106-
Menu
107-
</dd.Trigger>
108-
<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}}
142-
</dd.Menu>
143-
</Dropdown>
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
157+
>
158+
<label for="cargo-mobile-search" local-class="search-label">Search</label>
159+
</form>
144160
</div>
145161
</header>

0 commit comments

Comments
 (0)