Skip to content

Commit 26c9be2

Browse files
borsbors
committed
Auto merge of #3421 - Turbo87:rev-deps, r=pichfl
Improve reverse dependency list styling ### Before <img width="1113" alt="Bildschirmfoto 2021-03-18 um 15 54 45" src="https://user-images.githubusercontent.com/141300/111646894-55756080-8802-11eb-8980-3806de71d4df.png"> ### After <img width="1120" alt="Bildschirmfoto 2021-03-18 um 15 54 31" src="https://user-images.githubusercontent.com/141300/111646950-602ff580-8802-11eb-9899-94d20518dd6f.png">
2 parents e5171ce + fcef0e5 commit 26c9be2

File tree

5 files changed

+127
-47
lines changed

5 files changed

+127
-47
lines changed

‎app/components/rev-dep-row.hbs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div local-class="row {{if this.focused "focused"}}" ...attributes>
2+
<div local-class="left">
3+
<LinkTo
4+
@route="crate"
5+
@model={{@dependency.version.crateName}}
6+
local-class="link"
7+
data-test-crate-name
8+
{{on "focusin" (fn this.setFocused true)}}
9+
{{on "focusout" (fn this.setFocused false)}}
10+
>
11+
{{@dependency.version.crateName}}
12+
</LinkTo>
13+
<span local-class="range">
14+
depends on {{@dependency.req}}
15+
</span>
16+
</div>
17+
<div local-class="downloads">
18+
{{svg-jar "download-arrow" local-class="download-icon"}}
19+
{{format-num @dependency.downloads}}
20+
</div>
21+
</div>

‎app/components/rev-dep-row.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { action } from '@ember/object';
2+
import Component from '@glimmer/component';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
export default class VersionRow extends Component {
6+
@tracked focused = false;
7+
8+
@action setFocused(value) {
9+
this.focused = value;
10+
}
11+
}

‎app/components/rev-dep-row.module.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.row {
2+
--hover-bg-color: hsl(217, 37%, 98%);
3+
--crate-color: var(--grey700);
4+
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
5+
6+
display: flex;
7+
align-items: center;
8+
justify-content: space-between;
9+
flex-wrap: wrap;
10+
position: relative;
11+
font-size: 18px;
12+
padding: 15px 25px;
13+
background-color: white;
14+
border-radius: 5px;
15+
box-shadow: var(--shadow);
16+
transition: all 300ms;
17+
18+
&:hover, &.focused {
19+
background-color: var(--hover-bg-color);
20+
transition: all 0ms;
21+
}
22+
23+
&.focused {
24+
box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
25+
}
26+
27+
@media only screen and (max-width: 550px) {
28+
display: block
29+
}
30+
}
31+
32+
.left {
33+
overflow: hidden;
34+
text-overflow: ellipsis;
35+
}
36+
37+
.link {
38+
color: var(--crate-color);
39+
font-weight: 500;
40+
margin-right: 15px;
41+
outline: none;
42+
43+
&:hover {
44+
color: var(--crate-color);
45+
}
46+
47+
&::after {
48+
content: '';
49+
position: absolute;
50+
left: 0;
51+
top: 0;
52+
right: 0;
53+
bottom: 0;
54+
}
55+
}
56+
57+
.range {
58+
color: var(--grey600);
59+
text-transform: uppercase;
60+
letter-spacing: .7px;
61+
font-size: 13px;
62+
}
63+
64+
.downloads {
65+
display: flex;
66+
align-items: center;
67+
color: var(--grey600);
68+
font-size: 16px;
69+
font-weight: 500;
70+
font-variant: tabular-nums;
71+
72+
@media only screen and (max-width: 550px) {
73+
margin-top: 5px;
74+
}
75+
}
76+
77+
.download-icon {
78+
width: auto;
79+
height: 16px;
80+
flex-shrink: 0;
81+
margin-right: 7px;
82+
}

‎app/styles/crate/reverse-dependencies.module.css

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,17 @@
77
}
88

99
.list {
10-
background-color: white;
11-
padding: 0 20px;
12-
margin-bottom: 20px;
13-
}
14-
15-
.row {
16-
border-bottom: 2px solid var(--gray-border);
17-
padding: 20px 0;
18-
display: flex;
19-
justify-content: space-between;
20-
flex-wrap: wrap;
21-
22-
&:last-of-type {
23-
border: none;
10+
list-style: none;
11+
margin: 0 0 20px;
12+
padding: 0;
13+
14+
li {
15+
&:not(:first-child) {
16+
margin-top: 10px;
17+
}
2418
}
2519
}
2620

27-
.stats {
28-
width: 25%;
29-
color: var(--main-color-light);
30-
}
31-
32-
.downloads {
33-
display: flex;
34-
align-items: center;
35-
padding-bottom: 5px;
36-
}
37-
38-
.download-icon {
39-
color: #b13b89;
40-
}
41-
42-
.rev-dep-downloads {
43-
padding-left: 7px
44-
}
45-
4621
.no-results {
4722
text-align: center;
4823
margin: 20px;

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

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,13 @@
1010
/>
1111
</div>
1212

13-
<div local-class="list" data-test-list>
13+
<ul local-class="list" data-test-list>
1414
{{#each this.model as |dependency index|}}
15-
<div local-class="row" data-test-row={{index}}>
16-
<div>
17-
<LinkTo @route="crate" @model={{dependency.version.crateName}} data-test-crate-name>
18-
{{dependency.version.crateName}}
19-
</LinkTo>
20-
requires {{dependency.req}}
21-
</div>
22-
<div local-class="stats downloads">
23-
{{svg-jar "download-arrow" local-class="download-icon"}}
24-
<span local-class="rev-dep-downloads">{{ format-num dependency.downloads }}</span>
25-
</div>
26-
</div>
15+
<li local-class="row">
16+
<RevDepRow @dependency={{dependency}} data-test-row={{index}} />
17+
</li>
2718
{{/each}}
28-
</div>
19+
</ul>
2920

3021
<Pagination @pagination={{this.pagination}} />
3122
{{else}}

0 commit comments

Comments
 (0)