Skip to content

Commit 20de336

Browse files
borsbors
committed
Auto merge of #3248 - Turbo87:header, r=pichfl
Extract and reuse `CrateHeader` component This PR extracts a `CrateHeader` component from the crate details page, and then adds it to the version list and reverse dependencies page, to unify their look a little bit more: <img width="1034" alt="Bildschirmfoto 2021-02-07 um 14 21 50" src="https://user-images.githubusercontent.com/141300/107147729-ea598400-694f-11eb-9548-7bd357ba93b0.png">
2 parents 083c5fa + e34f772 commit 20de336

File tree

7 files changed

+100
-87
lines changed

7 files changed

+100
-87
lines changed

‎app/components/crate-header.hbs

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<PageHeader local-class="header" data-test-heading>
2+
<div local-class="header-row">
3+
<div local-class="heading">
4+
{{svg-jar "crate" local-class="crate-icon"}}
5+
<h1 data-test-crate-name>{{@crate.name}}</h1>
6+
{{#if @version}}
7+
<h2 data-test-crate-version>{{@version.num}}</h2>
8+
{{/if}}
9+
</div>
10+
11+
{{#if this.session.currentUser}}
12+
<FollowButton @crate={{@crate}}/>
13+
{{/if}}
14+
</div>
15+
16+
<ul local-class="quick-links">
17+
{{#if @crate.homepage}}
18+
<li><a href="{{@crate.homepage}}">Homepage</a></li>
19+
{{/if}}
20+
{{#if @crate.wiki}}
21+
<li><a href="{{@crate.wiki}}">Wiki</a></li>
22+
{{/if}}
23+
{{#if @crate.mailing_list}}
24+
<li><a href="{{@crate.mailing_list}}">Mailing list</a></li>
25+
{{/if}}
26+
{{#if this.documentationLink}}
27+
<li><a href="{{this.documentationLink}}" data-test-docs-link>Documentation</a></li>
28+
{{/if}}
29+
{{#if @crate.repository}}
30+
<li><a href="{{@crate.repository}}">Repository</a></li>
31+
{{/if}}
32+
</ul>
33+
</PageHeader>

‎app/components/crate-header.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { inject as service } from '@ember/service';
2+
import Component from '@glimmer/component';
3+
4+
export default class CrateHeader extends Component {
5+
@service session;
6+
7+
get documentationLink() {
8+
return this.args.version?.documentationLink ?? this.args.crate.documentation;
9+
}
10+
}

‎app/components/crate-header.module.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.header {
2+
padding-top: 30px;
3+
padding-bottom: 30px;
4+
}
5+
6+
.header-row {
7+
display: flex;
8+
justify-content: space-between;
9+
padding-bottom: 10px;
10+
}
11+
12+
.heading {
13+
display: flex;
14+
align-items: center;
15+
16+
h1, h2 {
17+
margin: 0;
18+
padding: 0;
19+
}
20+
21+
h2 {
22+
color: var(--main-color-light);
23+
margin-left: 10px;
24+
}
25+
}
26+
27+
.crate-icon {
28+
flex-shrink: 0;
29+
margin-right: 10px;
30+
width: 32px;
31+
height: 32px;
32+
}
33+
34+
.quick-links {
35+
display: flex;
36+
flex-direction: row;
37+
flex-wrap: wrap;
38+
39+
font-size: 80%;
40+
list-style-type: none;
41+
margin: 1em 0 0 0;
42+
padding: 0;
43+
44+
45+
li {
46+
margin-right: 1em;
47+
48+
&:last-child {
49+
margin-right: 0;
50+
}
51+
}
52+
}

‎app/styles/crate/version.module.css

-53
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,3 @@
1-
div.header {
2-
padding-top: 30px;
3-
padding-bottom: 30px;
4-
}
5-
6-
.header-row {
7-
display: flex;
8-
justify-content: space-between;
9-
padding-bottom: 10px;
10-
}
11-
12-
.heading {
13-
display: flex;
14-
align-items: center;
15-
16-
h1, h2 {
17-
margin: 0;
18-
padding: 0;
19-
}
20-
21-
h2 {
22-
color: var(--main-color-light);
23-
margin-left: 10px;
24-
}
25-
}
26-
27-
.crate-icon {
28-
flex-shrink: 0;
29-
margin-right: 10px;
30-
width: 32px;
31-
height: 32px;
32-
}
33-
34-
.quick-links {
35-
display: flex;
36-
flex-direction: row;
37-
flex-wrap: wrap;
38-
39-
font-size: 80%;
40-
list-style-type: none;
41-
margin: 1em 0 0 0;
42-
padding: 0;
43-
44-
45-
li {
46-
margin-right: 1em;
47-
48-
&:last-child {
49-
margin-right: 0;
50-
}
51-
}
52-
}
53-
541
.crate-info {
552
display: flex;
563
flex-direction: column;

‎app/templates/crate/reverse-dependencies.hbs

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<CrateHeader @crate={{this.crate}} />
2+
13
<div local-class="back-link">
24
<LinkTo @route="crate" @model={{this.crate.id}}>&#11013; Back to {{ this.crate.name }}</LinkTo>
35
</div>

‎app/templates/crate/version.hbs

+1-34
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,6 @@
11
{{page-title this.crate.name}}
22

3-
<PageHeader local-class="header" data-test-heading>
4-
<div local-class="header-row">
5-
<div local-class="heading">
6-
{{svg-jar "crate" local-class='crate-icon'}}
7-
<h1 data-test-crate-name>{{ this.crate.name }}</h1>
8-
<h2 data-test-crate-version>{{ this.currentVersion.num }}</h2>
9-
{{#if this.isOwner }}
10-
{{!-- <YankButton @version={{this.currentVersion}} @tan={{true}} /> --}}
11-
{{/if}}
12-
</div>
13-
14-
{{#if this.session.currentUser}}
15-
<FollowButton @crate={{this.crate}}/>
16-
{{/if}}
17-
</div>
18-
19-
<ul local-class="quick-links">
20-
{{#if this.crate.homepage}}
21-
<li><a href="{{this.crate.homepage}}">Homepage</a></li>
22-
{{/if}}
23-
{{#if this.crate.wiki}}
24-
<li><a href="{{this.crate.wiki}}">Wiki</a></li>
25-
{{/if}}
26-
{{#if this.crate.mailing_list}}
27-
<li><a href="{{this.crate.mailing_list}}">Mailing list</a></li>
28-
{{/if}}
29-
{{#if this.currentVersion.documentationLink}}
30-
<li><a href="{{this.currentVersion.documentationLink}}" data-test-docs-link>Documentation</a></li>
31-
{{/if}}
32-
{{#if this.crate.repository}}
33-
<li><a href="{{this.crate.repository}}">Repository</a></li>
34-
{{/if}}
35-
</ul>
36-
</PageHeader>
3+
<CrateHeader @crate={{this.crate}} @version={{this.currentVersion}} />
374

385
<div local-class='crate-info'>
396
<div local-class="docs">

‎app/templates/crate/versions.hbs

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<CrateHeader @crate={{this.model}} />
2+
13
<LinkTo @route="crate" @model={{this.model}} local-class="back-link">&#11013; Back to Main Page</LinkTo>
24

35
<span local-class="page-description" data-test-page-description>

0 commit comments

Comments
 (0)