Skip to content

Commit dc18552

Browse files
borsbors
committed
Auto merge of #2303 - Turbo87:dashboard, r=locks
dashboard: Migrate to CSS modules r? @locks
2 parents 7bb4dd6 + a813e0e commit dc18552

File tree

10 files changed

+225
-170
lines changed

10 files changed

+225
-170
lines changed

‎app/components/crate-downloads-list.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<ul>
1+
<ul local-class="list">
22
{{#each @crates as |crate|}}
3-
<li>
4-
<LinkTo @route="crate" @model={{crate.id}} class="name">
3+
<li local-class="row">
4+
<LinkTo @route="crate" @model={{crate.id}} local-class="link">
55
{{ crate.name }} ({{ crate.max_version }})
6-
<div class='right'>
6+
<div>
77
{{svg-jar "download-clear-back"}}
88
{{ format-num crate.downloads }}
99
</div>

‎app/components/crate-downloads-list.module.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.list {
2+
list-style: none;
3+
padding: 0;
4+
}
5+
6+
.row {
7+
margin: 8px 0;
8+
}
9+
10+
.link {
11+
color: #525252;
12+
background-color: #edebdd;
13+
font-size: 90%;
14+
padding: 20px 10px;
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
}

‎app/styles/app.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ $link-color: rgb(0, 172, 91);
1010

1111
@import "buttons";
1212

13-
@import "home";
1413
@import "crate";
15-
@import "dashboard";
1614
@import "me";
1715

1816
@import "modules";

‎app/styles/dashboard.module.scss

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.stats {
2+
margin-left: auto;
3+
padding: 10px;
4+
5+
span { margin-left: 10px; }
6+
.num {
7+
font-size: 30px;
8+
font-weight: bold;
9+
}
10+
.downloads {
11+
display: flex;
12+
align-items: center;
13+
}
14+
15+
.label {
16+
color: $main-color-light;
17+
font-size: 80%;
18+
}
19+
}
20+
21+
.my-info {
22+
display: flex;
23+
24+
@media only screen and (max-width: 750px) {
25+
flex-direction: column;
26+
}
27+
}
28+
29+
.my-crate-lists {
30+
flex-direction: column;
31+
flex-grow: 2;
32+
margin-right: 20px;
33+
34+
.header {
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
39+
h2 {
40+
font-size: 105%;
41+
line-height: 20px;
42+
}
43+
}
44+
45+
@media only screen and (max-width: 750px) {
46+
order: 1;
47+
margin-right: 0;
48+
}
49+
}
50+
51+
.my-crates-link,
52+
.followed-crates-link {
53+
color: $main-color-light;
54+
text-decoration: underline;
55+
font-size: 90%;
56+
font-weight: normal;
57+
58+
&:hover {
59+
color: darken($main-color-light, 10%);
60+
}
61+
}
62+
63+
.my-feed {
64+
flex-grow: 5;
65+
h2 { font-size: 105%; }
66+
67+
@media only screen and (max-width: 750px) {
68+
order: 0;
69+
}
70+
}
71+
72+
.feed {
73+
background: white;
74+
padding: 0 20px;
75+
}
76+
77+
.feed-list {
78+
margin: 0;
79+
padding: 0;
80+
}
81+
82+
.feed-row {
83+
display: flex;
84+
align-items: baseline;
85+
padding: 20px 0;
86+
border-bottom: 2px solid $gray-border;
87+
88+
&:last-of-type {
89+
border: none;
90+
}
91+
92+
.version {
93+
color: $main-color-light;
94+
font-size: 80%;
95+
}
96+
97+
.date {
98+
flex-grow: 1;
99+
text-align: right;
100+
color: $main-color-light;
101+
font-size: 80%;
102+
}
103+
}
104+
105+
.info {
106+
display: flex;
107+
align-items: baseline;
108+
justify-content: space-between;
109+
110+
span { padding-left: 10px; }
111+
112+
.date { flex-grow: 2; text-align: right; }
113+
}
114+
115+
.load-more {
116+
$bg: rgb(219, 217, 207);
117+
text-align: center;
118+
width: 100%;
119+
padding: 10px;
120+
outline: 0;
121+
border: 0;
122+
margin-bottom: 20px;
123+
background-color: $bg;
124+
color: white;
125+
&:hover, &:focus { background-color: darken($bg, 10%); }
126+
}

‎app/styles/dashboard.scss

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎app/styles/home.scss

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎app/styles/index.module.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
}
5959

6060
.lists {
61+
display: flex;
6162
flex-wrap: wrap;
6263
justify-content: left;
6364

@@ -72,4 +73,42 @@
7273
width: 100%;
7374
}
7475
}
76+
77+
h2 {
78+
font-size: 105%;
79+
line-height: 20px;
80+
}
81+
82+
> section[aria-busy="true"] > h2::after {
83+
content: '';
84+
background-image: url('/assets/ajax-loader.gif');
85+
display: inline-block;
86+
height: 16px;
87+
width: 16px;
88+
}
89+
90+
ul, ol { list-style: none; padding: 0; }
91+
li { margin: 8px 0; }
92+
93+
li a {
94+
width: 100%;
95+
color: lighten($main-color, 10%);
96+
text-decoration: none;
97+
background-color: $main-bg-dark;
98+
font-size: 90%;
99+
padding: 20px 10px;
100+
display: flex;
101+
justify-content: space-between;
102+
align-items: center;
103+
104+
&:hover { background-color: darken($main-bg-dark, 5%); }
105+
106+
span {
107+
overflow: hidden;
108+
text-overflow: ellipsis;
109+
white-space: nowrap;
110+
}
111+
112+
img { vertical-align: middle; }
113+
}
75114
}

‎app/styles/me.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -260,18 +260,3 @@
260260
}
261261
}
262262
}
263-
264-
#stats {
265-
margin-left: auto;
266-
padding: 10px;
267-
268-
span { margin-left: 10px; }
269-
.num {
270-
font-size: 30px;
271-
font-weight: bold;
272-
}
273-
.downloads {
274-
display: flex;
275-
align-items: center;
276-
}
277-
}

0 commit comments

Comments
 (0)