Skip to content

Commit 17c0f76

Browse files
olegsklolegskl
committed
feat(webapp): full-width layout and design
1 parent 756fa1f commit 17c0f76

File tree

17 files changed

+217
-62
lines changed

17 files changed

+217
-62
lines changed

‎src/webapp/components/breadcrumbs/breadcrumbs.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
justify-content: flex-start;
44
}
55

6-
.breadcrumb {
6+
.breadcrumb,
7+
.breadcrumb-separator {
78
position: relative;
89
color: var(--textColor);
910
margin: 0 0.2rem 0 0.5rem;
@@ -16,7 +17,8 @@
1617
text-decoration: underline;
1718
}
1819

19-
.breadcrumb::before {
20+
.breadcrumb::before,
21+
.breadcrumb-separator::before {
2022
position: absolute;
2123
left: -0.6rem;
2224
color: var(--textSubColor);

‎src/webapp/components/breadcrumbs/breadcrumbs.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@ function generateBreadcrumb(name, path) {
77
}, [name]);
88
}
99

10+
function generateBreadcrumbSeparator() {
11+
return h('span', {className: 'breadcrumb-separator'}, ['...']);
12+
}
13+
1014
function generateBreadcrumbList(path) {
11-
return path.map((dir, index) => {
15+
const breadcrumbElements = path.map((dir, index) => {
1216
const href = path.slice(0, index + 1).join('/');
1317
return generateBreadcrumb(dir, href);
1418
});
19+
return breadcrumbElements.length > 3 ? [
20+
generateBreadcrumbSeparator(),
21+
...breadcrumbElements.slice(-3)
22+
] : breadcrumbElements;
1523
}
1624

1725
export default function breadcrumbs({location}) {

‎src/webapp/components/file/file.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
.file {
2-
margin: 0.5rem;
3-
width: 55rem;
2+
margin-top: 0.7rem;
3+
width: var(--width);
44
display: flex;
5-
font-size: 0.8rem;
5+
font-size: 1rem;
66
align-items: stretch;
7-
border: solid 1px var(--textSubColor);
7+
border: solid 1px var(--separatorColor);
8+
background: #fafafa;
89
}
910

1011
.line {
11-
height: 1rem;
12-
line-height: 1rem;
12+
height: 1.2rem;
13+
line-height: 1.2;
1314
overflow: visible;
1415
}
1516

@@ -30,14 +31,14 @@
3031
@extend .line;
3132
text-align: right;
3233
padding-right: 0.5rem;
33-
border-right: solid 1px var(--textSubColor);
34+
border-right: solid 1px var(--separatorColor);
3435
margin: 0;
3536
}
3637

3738
.line-count {
3839
@extend .line;
3940
padding: 0 0.5rem;
40-
border-right: solid 1px var(--textSubColor);
41+
border-right: solid 1px var(--separatorColor);
4142
margin: 0;
4243
text-align: right;
4344
background-color: rgba(189, 195, 199, 0.3);

‎src/webapp/components/filelist-header/filelist-header.css‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.filelist-header {
22
display: flex;
33
flex-direction: row;
4-
align-items: stretch;
4+
align-items: flex-end;
55
align-content: center;
6-
flex: 0 0 1.4rem;
7-
line-height: 1rem;
6+
flex: 0 0 2rem;
87
color: var(--textSubColor);
98
text-decoration: none;
10-
background-color: rgba(189, 195, 199, 0.3);
119
}
1210

1311
.filelist-header__name {
@@ -18,9 +16,20 @@
1816
}
1917

2018
.filelist-header__metric {
21-
flex: 0 0 9rem;
19+
flex: 0 0 5.5rem;
2220
padding: 0 0.5rem;
2321
font-size: 0.8rem;
2422
line-height: 1.4rem;
25-
border-left: solid 1px var(--textSubColor);
23+
}
24+
25+
@media (min-width: 1024px) {
26+
.filelist-header__metric {
27+
flex: 0 0 10rem;
28+
}
29+
}
30+
31+
@media (min-width: 1280px) {
32+
.filelist-header__metric {
33+
flex: 0 0 11rem;
34+
}
2635
}

‎src/webapp/components/filelist-item/filelist-item.css‎

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
.filelist-item {
22
display: flex;
33
flex-direction: row;
4-
align-items: stretch;
4+
align-items: center;
55
align-content: center;
6-
flex: 0 1 2rem;
7-
line-height: 1rem;
8-
border-top: solid 1px var(--textSubColor);
6+
flex: 0 1 2.4rem;
7+
border-top: solid 1px var(--separatorColor);
98
color: var(--textColor);
109
text-decoration: none;
10+
background: #fafafa;
11+
}
12+
13+
.filelist-item:first-child {
14+
border-top: none;
1115
}
1216

1317
.filelist-item:hover {
14-
background-color: #bdc3c7;
18+
background-color: rgba(0, 0, 0, 0.05);
1519
}
1620

1721
%filelist-item__cell {
1822
font-size: 0.9rem;
19-
padding: 0.5rem;
23+
padding: 0 0.5rem;
24+
height: 2.4rem;
25+
display: flex;
26+
align-items: center;
2027
}
2128

2229
.filelist-item__name {
@@ -27,29 +34,64 @@
2734
.filelist-item__metric {
2835
@extend %filelist-item__cell;
2936
display: flex;
30-
flex: 0 0 9rem;
37+
flex: 0 0 5.5rem;
3138
overflow: hidden;
3239
white-space: nowrap;
3340
font-size: 0.8rem;
34-
text-align: right;
35-
border-left: solid 1px var(--textSubColor);
41+
text-align: left;
42+
border-left: solid 1px var(--separatorColor);
43+
}
44+
45+
@media (min-width: 1024px) {
46+
.filelist-item__metric {
47+
flex: 0 0 10rem;
48+
}
49+
}
50+
51+
@media (min-width: 1280px) {
52+
.filelist-item__metric {
53+
flex: 0 0 11rem;
54+
}
3655
}
3756

3857
.filelist-item__metric--passed {
3958
@extend .filelist-item__metric;
40-
background-color: rgba(39, 174, 96, 0.3);
59+
}
60+
61+
.filelist-item__metric--passed::before {
62+
content: '';
63+
margin-right: 0.3rem;
64+
flex: 0 0 1rem;
65+
height: 1rem;
66+
background-color: rgba(39, 174, 96, 0.5);
67+
border-radius: 50%;
4168
}
4269

4370
.filelist-item__metric--failed {
4471
@extend .filelist-item__metric;
45-
background-color: rgba(231, 76, 60, 0.3);
72+
}
73+
74+
.filelist-item__metric--failed::before {
75+
content: '';
76+
margin-right: 0.3rem;
77+
flex: 0 0 1rem;
78+
height: 1rem;
79+
background-color: rgba(231, 76, 60, 0.5);
80+
border-radius: 50%;
4681
}
4782

4883
.filelist-item__metric__percentage {
4984
flex: 1;
5085
}
5186

5287
.filelist-item__metric__counts {
88+
display: none;
5389
flex: 1;
5490
color: var(--textSubColor);
5591
}
92+
93+
@media (min-width: 1024px) {
94+
.filelist-item__metric__counts {
95+
display: flex;
96+
}
97+
}

‎src/webapp/components/filelist/filelist.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
@import "../filelist-header/filelist-header";
22
@import "../filelist-item/filelist-item";
33

4+
.filelist-container {
5+
display: flex;
6+
flex-direction: column;
7+
width: var(--width);
8+
align-items: stretch;
9+
}
10+
411
.filelist {
5-
margin: 0.5rem;
6-
width: 55rem;
712
display: flex;
813
flex-direction: column;
914
align-items: stretch;
10-
border: solid 1px #999;
11-
box-sizing: border-box;
15+
border: solid 1px var(--separatorColor);
1216
}

‎src/webapp/components/filelist/filelist.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ function generateFilelist(tree, thresholds) {
1111

1212
export default function filelist(subtree, thresholds) {
1313
return h('div', {
14-
className: 'filelist'
14+
className: 'filelist-container'
1515
}, [
1616
filelistHeader(subtree),
17-
...generateFilelist(subtree, thresholds)
17+
h('div', {className: 'filelist'}, generateFilelist(subtree, thresholds))
1818
]);
1919
}

‎src/webapp/components/footer/footer.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
.footer {
22
margin: 0.5rem;
3+
width: var(--width);
34
white-space: pre-wrap;
45
display: flex;
5-
align-items: center;
6+
justify-content: center;
67
font-size: 0.8rem;
8+
color: var(--textSubColor);
9+
}
10+
11+
.footer-project-link,
12+
.footer-project-link:hover,
13+
.footer-project-link:active {
14+
color: var(--textSubColor);
715
}

‎src/webapp/components/footer/footer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import h from 'virtual-dom/h';
22

33
function projectLink() {
44
return h('a', {
5-
href: 'https://github.com/esnext-coverage'
5+
href: 'https://github.com/esnext-coverage',
6+
className: 'footer-project-link'
67
}, ['esnext-coverage']);
78
}
89

‎src/webapp/components/header/header.css‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,66 @@
11
.header {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
26
display: flex;
3-
flex-wrap: wrap;
4-
width: 55rem;
5-
margin: 0.5rem;
7+
font-size: 1.4rem;
68
font-weight: normal;
7-
font-size: 1.2rem;
9+
background-color: #fff;
10+
padding: 0.5rem 2rem;
11+
margin-bottom: 0.5rem;
12+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
13+
transform: translateZ(0);
814
}
915

10-
.breadcrumb-title {
11-
margin-right: 0.3rem;
16+
.header-logo {
17+
position: relative;
18+
flex: 0 0 3.75rem;
19+
height: 3.75rem;
20+
background: #f0db4f;
21+
}
22+
23+
.header-logo::before {
24+
position: absolute;
25+
right: 0.25rem;
26+
bottom: 0.6rem;
27+
font-size: 0.6rem;
28+
font-weight: bold;
29+
color: #323330;
30+
content: 'ESNEXT';
31+
}
32+
33+
.header-logo::after {
34+
position: absolute;
35+
font-size: 0.42rem;
36+
font-weight: bold;
37+
right: 0.27rem;
38+
bottom: 0.28rem;
39+
color: #323330;
40+
content: 'COVERAGE';
41+
}
42+
43+
.header-contents {
44+
display: flex;
45+
flex-direction: column;
46+
flex: auto;
47+
height: 3.75rem;
48+
padding-left: 1rem;
49+
}
50+
51+
.header-title-container {
52+
display: flex;
53+
flex: 0 0 1.875rem;
54+
line-height: 1.5;
55+
}
56+
57+
.header-search-container {
58+
display: flex;
59+
flex: 0 0 1.875rem;
60+
justify-content: stretch;
61+
}
62+
63+
.header-title {
64+
margin-right: 0.5rem;
65+
font-size: 1.4rem;
1266
}

0 commit comments

Comments
 (0)