Skip to content

Commit 14b0db1

Browse files
borsbors
committed
Auto merge of #2455 - Turbo87:main, r=locks
Adjust styling of the "main" section This PR slightly adjusts the styling of the "main" section of the page. Instead of having it in a box we extend it horizontally to the full width of the page. ### Before ![before](https://user-images.githubusercontent.com/141300/80312883-130cf480-87e8-11ea-9c6e-91dda52887c1.png) ### After ![after](https://user-images.githubusercontent.com/141300/80312884-156f4e80-87e8-11ea-88a1-e9d16e19051e.png) r? @locks
2 parents 5767422 + 93d707b commit 14b0db1

File tree

2 files changed

+135
-129
lines changed

2 files changed

+135
-129
lines changed

‎app/styles/application.module.css

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -64,20 +64,20 @@ noscript {
6464
padding: 10px 0;
6565
}
6666

67-
.application {
67+
.width-limit {
6868
width: 960px;
6969
@media only screen and (max-width: 960px) {
7070
width: 100%;
7171
}
7272
}
7373

7474
.header {
75-
color: white;
76-
position: relative;
77-
height: 100px;
78-
display: flex;
75+
composes: width-limit;
76+
77+
display: grid;
78+
grid-template-columns: auto auto 1fr auto;
7979
align-items: center;
80-
justify-content: space-between;
80+
color: white;
8181

8282
a {
8383
color: white; text-decoration: none;
@@ -118,9 +118,9 @@ input.search {
118118

119119
.mobile-search {
120120
display: none;
121-
margin-bottom: 10px;
122-
margin-left: 5px;
123-
margin-right: 5px;
121+
grid-row: 2;
122+
grid-column: span 4;
123+
margin: 0 10px 10px;
124124

125125
input.search {
126126
margin: 0;
@@ -192,19 +192,24 @@ input.search {
192192

193193
.main {
194194
display: flex;
195-
flex-direction: column;
196-
197-
margin-bottom: 10px;
195+
justify-content: center;
196+
width: 100%;
198197
background-color: var(--main-bg);
199-
padding: 15px;
200-
border-radius: 10px;
201-
box-shadow: 0px 0px 5px 2px #3b6837;
202-
border: 5px solid #62865f;
203198
color: var(--main-color);
204199
}
205200

201+
.inner-main {
202+
composes: width-limit;
203+
display: flex;
204+
flex-direction: column;
205+
margin: 15px;
206+
}
207+
206208
.after-main-links {
209+
composes: width-limit;
210+
207211
margin: 40px;
212+
text-align: center;
208213

209214
a { color: white; }
210215
a:hover { color: darken(white, 10%); }
@@ -214,6 +219,7 @@ input.search {
214219
.sep { display: none; }
215220
display: flex;
216221
flex-direction: column;
222+
align-items: center;
217223

218224
a {
219225
width: 50%;

‎app/templates/application.hbs

Lines changed: 113 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -2,107 +2,105 @@
22

33
{{title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
44

5-
<div local-class="application">
6-
<nav local-class="header">
7-
<LinkTo @route="index" @tabindex="-1">
8-
<img src="/assets/Cargo-Logo-Small.png" height="100" width="100" alt="Cargo Logo">
9-
</LinkTo>
10-
<LinkTo @route="index">
11-
<h1>
12-
crates.io
13-
<span local-class="subtitle">Rust Package Registry</span>
14-
</h1>
15-
</LinkTo>
16-
17-
<form local-class="desktop-search-form" action='/search' {{ action "search" on="submit" }} data-test-search-form>
18-
<input
19-
type="text"
20-
local-class="search"
21-
name="q"
22-
id="cargo-desktop-search"
23-
placeholder="Click or press 'S' to search..."
24-
value={{this.searchQuery}}
25-
oninput={{action (mut this.searchQuery) value="target.value"}}
26-
autocorrect="off"
27-
autocapitalize="off"
28-
autofocus="autofocus"
29-
spellcheck="false"
30-
required
31-
data-test-search-input
32-
>
33-
<label for="cargo-desktop-search" local-class="search-label">Search</label>
34-
</form>
35-
36-
<div local-class='nav'>
37-
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
38-
Browse All Crates
39-
</LinkTo>
40-
<span local-class="sep">|</span>
41-
<Dropdown as |dd|>
42-
<dd.Trigger local-class="dropdown-button">
43-
Docs
44-
</dd.Trigger>
5+
<header local-class="header">
6+
<LinkTo @route="index" @tabindex="-1">
7+
<img src="/assets/Cargo-Logo-Small.png" height="100" width="100" alt="Cargo Logo">
8+
</LinkTo>
9+
<LinkTo @route="index">
10+
<h1>
11+
crates.io
12+
<span local-class="subtitle">Rust Package Registry</span>
13+
</h1>
14+
</LinkTo>
4515

46-
<dd.Menu local-class="doc-links" as |menu|>
47-
<menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
48-
<menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
49-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
50-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
51-
<menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
52-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
53-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
54-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
55-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
56-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
57-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
58-
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
59-
<menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
60-
<menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
61-
</dd.Menu>
62-
</Dropdown>
63-
<span local-class="sep">|</span>
64-
{{#if this.session.currentUser}}
65-
<Dropdown data-test-user-menu as |dd|>
66-
<dd.Trigger local-class="dropdown-button" data-test-toggle>
67-
<UserAvatar @user={{this.session.currentUser}} @size="small" data-test-avatar />
68-
{{ this.session.currentUser.name }}
69-
</dd.Trigger>
16+
<form local-class="desktop-search-form" action='/search' {{ action "search" on="submit" }} data-test-search-form>
17+
<input
18+
type="text"
19+
local-class="search"
20+
name="q"
21+
id="cargo-desktop-search"
22+
placeholder="Click or press 'S' to search..."
23+
value={{this.searchQuery}}
24+
oninput={{action (mut this.searchQuery) value="target.value"}}
25+
autocorrect="off"
26+
autocapitalize="off"
27+
autofocus="autofocus"
28+
spellcheck="false"
29+
required
30+
data-test-search-input
31+
>
32+
<label for="cargo-desktop-search" local-class="search-label">Search</label>
33+
</form>
7034

71-
<dd.Menu local-class="current-user-links" as |menu|>
72-
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
73-
<menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
74-
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
75-
<menu.Item local-class="menu-item-with-separator"><LinkTo @route="logout">Sign Out</LinkTo></menu.Item>
76-
</dd.Menu>
77-
</Dropdown>
78-
{{else}}
79-
<LinkTo @route="login" data-test-login-link>
80-
{{svg-jar "lock"}}
81-
Log in with GitHub
82-
</LinkTo>
83-
{{/if}}
84-
</div>
35+
<nav local-class='nav'>
36+
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
37+
Browse All Crates
38+
</LinkTo>
39+
<span local-class="sep">|</span>
40+
<Dropdown as |dd|>
41+
<dd.Trigger local-class="dropdown-button">
42+
Docs
43+
</dd.Trigger>
8544

86-
<div local-class='menu'>
87-
<Dropdown as |dd|>
88-
<dd.Trigger local-class="dropdown-button">
89-
Menu
45+
<dd.Menu local-class="doc-links" as |menu|>
46+
<menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
47+
<menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
48+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
49+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
50+
<menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
51+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
52+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
53+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
54+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
55+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
56+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
57+
<menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
58+
<menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
59+
<menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
60+
</dd.Menu>
61+
</Dropdown>
62+
<span local-class="sep">|</span>
63+
{{#if this.session.currentUser}}
64+
<Dropdown data-test-user-menu as |dd|>
65+
<dd.Trigger local-class="dropdown-button" data-test-toggle>
66+
<UserAvatar @user={{this.session.currentUser}} @size="small" data-test-avatar />
67+
{{ this.session.currentUser.name }}
9068
</dd.Trigger>
69+
9170
<dd.Menu local-class="current-user-links" as |menu|>
92-
<menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
93-
{{#if this.session.currentUser}}
94-
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
95-
<menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
96-
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
97-
<menu.Item local-class="menu-item-with-separator"><LinkTo @route="logout">Sign Out</LinkTo></menu.Item>
98-
{{else}}
99-
<menu.Item><LinkTo @route="login">Log in with GitHub</LinkTo></menu.Item>
100-
{{/if}}
71+
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
72+
<menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
73+
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
74+
<menu.Item local-class="menu-item-with-separator"><LinkTo @route="logout">Sign Out</LinkTo></menu.Item>
10175
</dd.Menu>
10276
</Dropdown>
103-
</div>
77+
{{else}}
78+
<LinkTo @route="login" data-test-login-link>
79+
{{svg-jar "lock"}}
80+
Log in with GitHub
81+
</LinkTo>
82+
{{/if}}
10483
</nav>
10584

85+
<div local-class='menu'>
86+
<Dropdown as |dd|>
87+
<dd.Trigger local-class="dropdown-button">
88+
Menu
89+
</dd.Trigger>
90+
<dd.Menu local-class="current-user-links" as |menu|>
91+
<menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
92+
{{#if this.session.currentUser}}
93+
<menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
94+
<menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
95+
<menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
96+
<menu.Item local-class="menu-item-with-separator"><LinkTo @route="logout">Sign Out</LinkTo></menu.Item>
97+
{{else}}
98+
<menu.Item><LinkTo @route="login">Log in with GitHub</LinkTo></menu.Item>
99+
{{/if}}
100+
</dd.Menu>
101+
</Dropdown>
102+
</div>
103+
106104
<form local-class='mobile-search' action='/search' {{ action "search" on="submit" }} >
107105
<input
108106
type="text"
@@ -117,30 +115,32 @@
117115
>
118116
<label for="cargo-mobile-search" local-class="search-label">Search</label>
119117
</form>
118+
</header>
120119

121-
<main local-class="main">
120+
<main local-class="main">
121+
<div local-class="inner-main">
122122
<FlashMessage @message={{this.flashMessages.message}} />
123123

124124
{{outlet}}
125-
</main>
125+
</div>
126+
</main>
126127

127-
<footer local-class='after-main-links'>
128-
<a href='https://doc.rust-lang.org/cargo/getting-started/installation.html'>Install</a>
129-
<span local-class="sep">|</span>
130-
<a href='https://doc.rust-lang.org/cargo/'>Getting Started</a>
131-
<span local-class="sep">|</span>
132-
<a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
133-
<span local-class="sep">|</span>
134-
<a href='mailto:[email protected]'>Send us an email</a>
135-
<span local-class="sep">|</span>
136-
<a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
137-
<span local-class="sep">|</span>
138-
<a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
139-
<span local-class="sep">|</span>
140-
<LinkTo @route="policies">Policies</LinkTo>
141-
</footer>
128+
<footer local-class='after-main-links'>
129+
<a href='https://doc.rust-lang.org/cargo/getting-started/installation.html'>Install</a>
130+
<span local-class="sep">|</span>
131+
<a href='https://doc.rust-lang.org/cargo/'>Getting Started</a>
132+
<span local-class="sep">|</span>
133+
<a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
134+
<span local-class="sep">|</span>
135+
<a href='mailto:[email protected]'>Send us an email</a>
136+
<span local-class="sep">|</span>
137+
<a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
138+
<span local-class="sep">|</span>
139+
<a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
140+
<span local-class="sep">|</span>
141+
<LinkTo @route="policies">Policies</LinkTo>
142+
</footer>
142143

143-
<a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
144-
<img src='/assets/forkme.png' alt="Fork me on GitHub">
145-
</a>
146-
</div>
144+
<a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
145+
<img src='/assets/forkme.png' alt="Fork me on GitHub">
146+
</a>

0 commit comments

Comments
 (0)