Skip to content

Commit 578d9f4

Browse files
borsbors
committed
Auto merge of #2311 - Turbo87:crate-row, r=locks
Use CSS module for `CrateRow` component r? @locks
2 parents 2ae2f27 + 0e92cce commit 578d9f4

File tree

12 files changed

+121
-48
lines changed

12 files changed

+121
-48
lines changed

‎app/components/crate-badge.hbs

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<span class="vers" ...attributes>
2-
<img
3-
src="https://img.shields.io/badge/crates.io-v{{ this.version }}-{{ this.color }}.svg?longCache=true"
4-
alt="{{ this.crate.max_version }}"
5-
title="{{ this.crate.name }}’s current version badge"
6-
data-test-version-badge>
7-
8-
</span>
1+
<img
2+
src="https://img.shields.io/badge/crates.io-v{{ this.version }}-{{ this.color }}.svg?longCache=true"
3+
alt="{{ this.crate.max_version }}"
4+
title="{{ this.crate.name }}’s current version badge"
5+
data-test-version-badge
6+
...attributes
7+
>

‎app/components/crate-row.hbs

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
1-
<div class="crate row" data-test-crate-row ...attributes>
2-
<div class='desc'>
3-
<div class='info'>
4-
<LinkTo @route="crate" @model={{this.crate.id}} data-test-crate-link>{{ this.crate.name }}</LinkTo>
1+
<div local-class="crate-row" data-test-crate-row ...attributes>
2+
<div local-class="description-box">
3+
<div>
4+
<LinkTo
5+
@route="crate"
6+
@model={{this.crate.id}}
7+
local-class="name"
8+
data-test-crate-link
9+
>
10+
{{ this.crate.name }}
11+
</LinkTo>
512
<CrateTomlCopy @copyText={{this.crateTomlText}} @inline={{true}} />
6-
<CrateBadge @crate={{this.crate}} />
13+
<CrateBadge @crate={{this.crate}} local-class="version-badge" />
714
{{#each this.crate.annotated_badges as |badge|}}
815
{{#let (component badge.component_name) as |Badge|}}
916
<Badge @badge={{badge}} data-test-badge={{badge.badge_type}} />
1017
{{/let}}
1118
{{/each}}
1219
</div>
13-
<div class='summary' data-test-description>
14-
<span class='small'>
15-
{{ truncate-text this.crate.description }}
16-
</span>
20+
<div local-class="description" data-test-description>
21+
{{ truncate-text this.crate.description }}
1722
</div>
1823
</div>
19-
<div class='stats'>
20-
<div class='downloads' data-test-downloads>
24+
<div local-class='stats'>
25+
<div local-class='downloads' data-test-downloads>
2126
{{svg-jar "download"}}
22-
<span class='num'><abbr title="Total number of downloads">All-Time:</abbr> {{ format-num this.crate.downloads }}</span>
27+
<span><abbr title="Total number of downloads">All-Time:</abbr> {{ format-num this.crate.downloads }}</span>
2328
</div>
24-
<div class="recent-downloads" data-test-recent-downloads>
29+
<div local-class="recent-downloads" data-test-recent-downloads>
2530
{{svg-jar "download"}}
26-
<span class='num'><abbr title="Downloads in the last 90 days">Recent:</abbr> {{ format-num this.crate.recent_downloads }}</span>
31+
<span><abbr title="Downloads in the last 90 days">Recent:</abbr> {{ format-num this.crate.recent_downloads }}</span>
2732
</div>
28-
<div class="updated-at" >
33+
<div local-class="updated-at" >
2934
{{svg-jar "latest-updates" height="32" width="32"}}
3035
<span>
3136
<abbr title="The last time crate was updated">Updated:</abbr>
@@ -35,18 +40,16 @@
3540
</span>
3641
</div>
3742
</div>
38-
<div class="quick-links">
39-
<ul>
40-
{{#if this.crate.homepage}}
41-
<li><a href="{{this.crate.homepage}}">Homepage</a></li>
42-
{{/if}}
43-
{{#if this.crate.documentation}}
44-
<li><a href="{{this.crate.documentation}}">Documentation</a></li>
45-
{{/if}}
46-
{{#if this.crate.repository}}
47-
<li><a href="{{this.crate.repository}}">Repository</a></li>
48-
{{/if}}
49-
</ul>
50-
</div>
43+
<ul local-class="quick-links">
44+
{{#if this.crate.homepage}}
45+
<li><a href="{{this.crate.homepage}}">Homepage</a></li>
46+
{{/if}}
47+
{{#if this.crate.documentation}}
48+
<li><a href="{{this.crate.documentation}}">Documentation</a></li>
49+
{{/if}}
50+
{{#if this.crate.repository}}
51+
<li><a href="{{this.crate.repository}}">Repository</a></li>
52+
{{/if}}
53+
</ul>
5154

5255
</div>

‎app/components/crate-row.module.scss

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.crate-row {
2+
display: flex;
3+
flex-wrap: wrap;
4+
}
5+
6+
.description-box {
7+
padding-top: 5px;
8+
display: flex;
9+
flex-direction: column;
10+
width: 75%;
11+
}
12+
13+
.name {
14+
color: $main-color;
15+
font-weight: bold;
16+
text-decoration: none;
17+
font-size: 120%;
18+
}
19+
20+
.version-badge {
21+
margin-left: 10px;
22+
}
23+
24+
.description {
25+
margin-top: 8px;
26+
color: $main-color-light;
27+
font-size: 80%;
28+
}
29+
30+
.stats {
31+
width: 25%;
32+
color: $main-color-light;
33+
}
34+
35+
.downloads {
36+
display: flex;
37+
align-items: center;
38+
padding-bottom: 5px;
39+
}
40+
41+
.recent-downloads {
42+
display: flex;
43+
align-items: center;
44+
}
45+
46+
.updated-at {
47+
padding-top: 5px;
48+
display: flex;
49+
align-items: center;
50+
51+
svg {
52+
padding: 10px;
53+
}
54+
}
55+
56+
ul.quick-links {
57+
display: flex;
58+
flex-direction: row;
59+
flex-wrap: wrap;
60+
61+
font-size: 80%;
62+
list-style-type: none;
63+
margin: 1em 0 0 0;
64+
padding: 0;
65+
66+
67+
li {
68+
margin-right: 1em;
69+
70+
&:last-child {
71+
margin-right: 0;
72+
}
73+
}
74+
}

‎app/styles/crate.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,6 @@
125125
text-decoration: none;
126126
font-size: 120%;
127127
}
128-
.vers {
129-
margin-left: 10px;
130-
}
131128

132129
.stats {
133130
width: 25%;

‎app/templates/category/index.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989

9090
<div class='white-rows'>
9191
{{#each this.model as |crate|}}
92-
<CrateRow @crate={{crate}} />
92+
<CrateRow @crate={{crate}} class="row" />
9393
{{/each}}
9494
</div>
9595

‎app/templates/crates.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777

7878
<div class='white-rows'>
7979
{{#each this.model as |crate index|}}
80-
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />
80+
<CrateRow @crate={{crate}} class="row" data-test-crate-row={{index}} />
8181
{{/each}}
8282
</div>
8383

‎app/templates/keyword/index.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
<div class='white-rows'>
5959
{{#each this.model as |crate|}}
60-
<CrateRow @crate={{crate}} />
60+
<CrateRow @crate={{crate}} class="row" />
6161
{{/each}}
6262
</div>
6363

‎app/templates/me/crates.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858

5959
<div class='white-rows'>
6060
{{#each this.model as |crate|}}
61-
<CrateRow @crate={{crate}} />
61+
<CrateRow @crate={{crate}} class="row" />
6262
{{/each}}
6363
</div>
6464

‎app/templates/me/following.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

4242
<div class='white-rows'>
4343
{{#each this.model as |crate|}}
44-
<CrateRow @crate={{crate}} />
44+
<CrateRow @crate={{crate}} class="row" />
4545
{{/each}}
4646
</div>
4747

‎app/templates/search.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,11 @@
7474
<LinkTo @route="crate" @model={{crate}}>
7575
<h1>Exact Match</h1>
7676
</LinkTo>
77-
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />
77+
<CrateRow @crate={{crate}} class="row" data-test-crate-row={{index}} />
7878
</div>
7979
{{else}}
8080
<div>
81-
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />
81+
<CrateRow @crate={{crate}} class="row" data-test-crate-row={{index}} />
8282
</div>
8383
{{/if}}
8484
{{/each}}

‎app/templates/team.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272

7373
<div class='white-rows'>
7474
{{#each this.model.crates as |crate|}}
75-
<CrateRow @crate={{crate}} />
75+
<CrateRow @crate={{crate}} class="row" />
7676
{{/each}}
7777
</div>
7878

‎app/templates/user.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363

6464
<div class='white-rows'>
6565
{{#each this.model.crates as |crate|}}
66-
<CrateRow @crate={{crate}} />
66+
<CrateRow @crate={{crate}} class="row" />
6767
{{/each}}
6868
</div>
6969

0 commit comments

Comments
 (0)