Skip to content

Commit 9a5faad

Browse files
bjohansebasbjohansebas
authored
style: enhance layout and styling (#43)
* style: enhance layout and styling for issues and users sections Signed-off-by: Sebastian Beltran <[email protected]> * style: improve layout and structure for main and project list components Signed-off-by: Sebastian Beltran <[email protected]> * style: add responsive layout for main index on small screens Signed-off-by: Sebastian Beltran <[email protected]> --------- Signed-off-by: Sebastian Beltran <[email protected]>
1 parent 2c41f03 commit 9a5faad

File tree

5 files changed

+170
-114
lines changed

5 files changed

+170
-114
lines changed

‎template/css/index.css‎

Lines changed: 66 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,63 @@
11
@import './normalize.css';
22
@import './normalize-content.css';
33

4+
body {
5+
background-color: rgb(249, 250, 251);
6+
}
7+
8+
main {
9+
width: 100vw;
10+
max-width: 100vw;
11+
padding: 1.5rem;
12+
}
13+
14+
#main-index {
15+
display: grid;
16+
gap: 1.5rem;
17+
grid-template-areas: "issues issues users";
18+
}
19+
20+
.issues-list {
21+
grid-area: issues;
22+
display: flex;
23+
gap: 1.5rem;
24+
flex-direction: column;
25+
26+
a {
27+
color: rgb(113, 113, 122);
28+
}
29+
30+
h1 {
31+
margin-bottom: 0;
32+
color: rgb(9, 9, 11);
33+
}
34+
35+
ul {
36+
li {
37+
border: 1px solid #ddd;
38+
border-radius: .5rem;
39+
display: flex;
40+
flex-direction: column;
41+
gap: 0.5rem;
42+
padding: 1rem;
43+
}
44+
}
45+
46+
.issue-title {
47+
font-weight: 600;
48+
color: rgb(9, 9, 11);
49+
}
50+
}
51+
.users-list {
52+
grid-area: users;
53+
}
54+
455
.users-list li {
556
display: flex;
657
align-items: center;
758

859
a {
9-
display: flex;
60+
display: flex;
1061
align-items: center;
1162
}
1263
}
@@ -27,24 +78,24 @@
2778

2879
.issues-list,
2980
.users-list {
30-
min-width: 20rem;
31-
padding-left: 1rem;
32-
padding-bottom: 1rem;
81+
background-color: #fff;
82+
border-radius: .5rem;
83+
height: 100%;
84+
padding: 1.5rem;
85+
font-size: 13px;
3386

3487
ul {
35-
list-style: circle;
88+
list-style: none;
3689
padding: 0;
3790
margin: 0;
38-
39-
li {
40-
padding: .25rem 0;
41-
}
91+
display: flex;
92+
gap: 1.5rem;
93+
flex-direction: column;
4294
}
4395
}
4496

45-
.project-link {
46-
display: inline-block;
47-
padding: .3rem;
48-
background: #efefef;
49-
border: .01rem solid #ddd;
50-
}
97+
@media screen and (max-width: 690px) {
98+
#main-index {
99+
grid-template-areas: "issues" "users";
100+
}
101+
}

‎template/css/page.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@
33
header {
44
display: flex;
55
align-items: center;
6-
position: fixed;
6+
position: sticky;
77
top: 0;
88
left: 0;
99
width: 100%;
1010
min-height: 2.75rem;
11-
background-image: linear-gradient(#fafafa, #f0f0f0);
12-
background-repeat: repeat-x;
13-
border-bottom: 1px solid #ddd;
11+
background: #fff;
12+
border-bottom: 1px solid rgb(228, 228, 231);
1413
padding: 0 1rem;
1514

1615
.logo {
@@ -52,6 +51,4 @@ header {
5251
}
5352
}
5453

55-
main {
56-
padding: 4.75rem 2rem 2rem;
57-
}
54+

‎template/css/project-list.css‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
11
@import './normalize-content.css';
22

3+
main {
4+
width: 100vw;
5+
max-width: 100vw;
6+
padding: 1.5rem;
7+
}
8+
39
.project-list {
10+
background-color: #fff;
11+
border-inline: 1px solid #ddd;
412
width: 100%;
513
border-spacing: 0;
614
border-collapse: collapse;
715

8-
td {
9-
padding: .5rem;
16+
tr {
1017
border-top: 1px solid #ddd;
11-
border-bottom: 1px solid #fff;
18+
border-bottom: 1px solid #ddd;
1219
}
13-
tr:nth-child(even) td {
14-
background: #f9f9f9;
20+
21+
td {
22+
padding: .5rem;
1523
}
24+
1625
tr td:nth-child(1) {
1726
min-width: 8rem;
1827
max-width: 12rem;

‎template/js/index.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,13 @@ require('nighthawk')({
5454

5555
render(html`
5656
<statusboard-page .config="${config}">
57-
<style>
58-
main { display: flex; }
59-
main section { padding: 0 1rem; }
60-
</style>
61-
<main>
62-
<section>
57+
<main id="main-index">
58+
<section class="issues-list">
6359
<h1><a href="${config.baseUrl}/issues">Top Issues</a></h1>
6460
6561
${res.locals.issues.map(([tag, issues]) => {
6662
return html`
67-
<div class="issues-list">
63+
<div>
6864
<h3><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h3>
6965
<ul>
7066
${issues.map((issue) => {
@@ -74,7 +70,7 @@ require('nighthawk')({
7470
<a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
7571
/ <a href="https://www.github.com/${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
7672
</span>
77-
: <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
73+
<a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
7874
</li>
7975
`
8076
})}
@@ -118,18 +114,17 @@ require('nighthawk')({
118114
<statusboard-page .config="${config}">
119115
<main>
120116
${res.locals.issues.map(([tag, issues]) => html`
121-
<section>
117+
<section class="issues-list">
122118
<h1><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h1>
123-
124-
<div class="issues-list">
119+
<div >
125120
<ul>
126121
${issues.map((issue) => html`
127122
<li>
128123
<span class="project-link">
129124
<a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
130125
/ <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
131126
</span>
132-
: <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
127+
<a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
133128
</li>
134129
`)}
135130
</ul>
@@ -146,19 +141,21 @@ require('nighthawk')({
146141
}, null)
147142
render(html`
148143
<statusboard-page .config="${config}">
149-
<h1>Issues: ${req.params.label}</h1>
150144
<div class="issues-list">
151-
<ul>
152-
${issues.map((issue) => html`
153-
<li>
154-
<span class="project-link">
155-
<a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
156-
/ <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
157-
</span>
158-
: <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
159-
</li>
160-
`)}
161-
</ul>
145+
<h1>Issues: ${req.params.label}</h1>
146+
<div>
147+
<ul>
148+
${issues.map((issue) => html`
149+
<li>
150+
<span class="project-link">
151+
<a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
152+
/ <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
153+
</span>
154+
<a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
155+
</li>
156+
`)}
157+
</ul>
158+
</div>
162159
</div>
163160
</statusboard-page>
164161
`, document.body)

‎template/js/project-list.js‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,73 +13,75 @@ class ProjectList extends LitElement {
1313
render () {
1414
return html`
1515
<link rel="stylesheet" href="${this.config.files.css.projectList}" />
16-
<h2>Projects</h2>
17-
<table class="project-list">
18-
${this.projects.map((project) => html`
19-
<tr>
20-
<td>
21-
<a href="https://www.github.com/${project.repoOwner}" target="_blank">${project.repoOwner}</a>
22-
/ <a href="${(project.repoDetails && project.repoDetails.url) || `https://www.github.com/${project.repoOwner}/${project.repoName}`}" target="_blank">${project.repoName}</a>
23-
</td>
24-
<td title="Stars">
25-
<a href="https://npmjs.org/package/${project.packageName}">
26-
<img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
27-
</a>
28-
</td>
29-
<td title="Watchers">
30-
<a href="https://www.github.com/${project.repo}">
31-
<img src="https://badgen.net/github/watchers/${project.repo}" />
32-
</a>
33-
</td>
34-
<td title="Issues">
35-
<a href="https://www.github.com/${project.repo}">
36-
<img src="https://badgen.net/github/open-issues/${project.repo}" />
37-
</a>
38-
</td>
39-
<td title="PRs">
40-
<a href="https://www.github.com/${project.repo}">
41-
<img src="https://badgen.net/github/open-prs/${project.repo}" />
42-
</a>
43-
</td>
44-
<td title="commits">
45-
<a href="https://www.github.com/${project.repo}">
46-
<img src="https://badgen.net/github/commits/${project.repo}" />
47-
</a>
48-
</td>
49-
<td title="License">
50-
<a href="https://www.github.com/${project.repo}">
51-
<img src="https://badgen.net/github/license/${project.repo}" />
52-
</a>
53-
</td>
54-
<td title="Contributors">
55-
<a href="https://www.github.com/${project.repo}">
56-
<img src="https://badgen.net/github/contributors/${project.repo}" />
57-
</a>
58-
</td>
59-
<td>
60-
${project.packageJson && (html`
16+
<main>
17+
<h2>Projects</h2>
18+
<table class="project-list">
19+
${this.projects.map((project) => html`
20+
<tr>
21+
<td>
22+
<a href="https://www.github.com/${project.repoOwner}" target="_blank">${project.repoOwner}</a>
23+
/ <a href="${(project.repoDetails && project.repoDetails.url) || `https://www.github.com/${project.repoOwner}/${project.repoName}`}" target="_blank">${project.repoName}</a>
24+
</td>
25+
<td title="Stars">
6126
<a href="https://npmjs.org/package/${project.packageName}">
62-
<img src="https://badgen.net/npm/v/${project.packageName}" />
27+
<img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
6328
</a>
64-
`)}
65-
</td>
66-
<td>
67-
${project.packageJson && (html`
68-
<a href="https://npmjs.org/package/${project.packageName}">
69-
<img src="https://badgen.net/npm/dm/${project.packageName}" />
29+
</td>
30+
<td title="Watchers">
31+
<a href="https://www.github.com/${project.repo}">
32+
<img src="https://badgen.net/github/watchers/${project.repo}" />
33+
</a>
34+
</td>
35+
<td title="Issues">
36+
<a href="https://www.github.com/${project.repo}">
37+
<img src="https://badgen.net/github/open-issues/${project.repo}" />
38+
</a>
39+
</td>
40+
<td title="PRs">
41+
<a href="https://www.github.com/${project.repo}">
42+
<img src="https://badgen.net/github/open-prs/${project.repo}" />
43+
</a>
44+
</td>
45+
<td title="commits">
46+
<a href="https://www.github.com/${project.repo}">
47+
<img src="https://badgen.net/github/commits/${project.repo}" />
48+
</a>
49+
</td>
50+
<td title="License">
51+
<a href="https://www.github.com/${project.repo}">
52+
<img src="https://badgen.net/github/license/${project.repo}" />
7053
</a>
71-
`)}
72-
</td>
73-
<td>
74-
${project.travis && (html`
75-
<a href="https://travis-ci.org/${project.repo}">
76-
<img src="https://badgen.net/travis/${project.repo}" />
54+
</td>
55+
<td title="Contributors">
56+
<a href="https://www.github.com/${project.repo}">
57+
<img src="https://badgen.net/github/contributors/${project.repo}" />
7758
</a>
78-
`)}
79-
</td>
80-
</tr>
81-
`)}
82-
</table>
59+
</td>
60+
<td>
61+
${project.packageJson && (html`
62+
<a href="https://npmjs.org/package/${project.packageName}">
63+
<img src="https://badgen.net/npm/v/${project.packageName}" />
64+
</a>
65+
`)}
66+
</td>
67+
<td>
68+
${project.packageJson && (html`
69+
<a href="https://npmjs.org/package/${project.packageName}">
70+
<img src="https://badgen.net/npm/dm/${project.packageName}" />
71+
</a>
72+
`)}
73+
</td>
74+
<td>
75+
${project.travis && (html`
76+
<a href="https://travis-ci.org/${project.repo}">
77+
<img src="https://badgen.net/travis/${project.repo}" />
78+
</a>
79+
`)}
80+
</td>
81+
</tr>
82+
`)}
83+
</table>
84+
</main>
8385
`
8486
}
8587
}

0 commit comments

Comments
 (0)