Skip to content

Commit ca6b989

Browse files
yaphyaph
committed
Improve coder page responsiveness
Make repo table full width
1 parent 806c647 commit ca6b989

File tree

5 files changed

+65
-59
lines changed

5 files changed

+65
-59
lines changed

‎src/js/coder.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const DEV = 1;
1+
const DEV = 0;
22

33
let bar_options = {
44
axisX: { onlyInteger: true },

‎src/scss/coder.scss‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@import 'nav';
33
@import 'table';
44

5-
#coder {
6-
background-color: $color4;
5+
body {
6+
background-color: #fff;
77
}
88

99
.box-stat {
@@ -28,16 +28,14 @@
2828
margin-right: 1px;
2929
}
3030

31-
.ct-series-a .ct-bar {
32-
stroke: $color2;
31+
.chart {
32+
min-width: 400px;
3333
}
3434

35-
.sidebar {
36-
min-width: 250px;
37-
width: 12em;
35+
.ct-series-a .ct-bar {
36+
stroke: $color2;
3837
}
3938

40-
.sidebar a {
41-
color: inherit;
42-
text-decoration: none;
39+
.meta {
40+
background-color: $color4;
4341
}

‎src/scss/style.scss‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $base-link-hover-color: #0000ff;
2222
@import 'blockquote';
2323

2424
body {
25-
background-color: $color5;
25+
background-color: #fff;
2626
}
2727

2828
a {
@@ -33,6 +33,7 @@ a {
3333
footer {
3434
text-align: center;
3535
font-size: .9em;
36+
background-color: $color5;
3637
}
3738

3839
img {
@@ -78,15 +79,21 @@ img {
7879
}
7980

8081
.padb {
81-
padding: 0 0 1em 0;
82+
padding-bottom: 1em;
83+
}
84+
85+
.padt {
86+
padding-top: 1em;
8287
}
8388

8489
.padh {
85-
padding: 0 1em;
90+
padding-left: 1em;
91+
padding-right: 1em;
8692
}
8793

8894
.padv {
89-
padding: 1em 0;
95+
padding-top: 1em;
96+
padding-bottom: 1em;
9097
}
9198

9299
.user {

‎templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<body>
1515
{% block content %}{% endblock %}
1616

17-
<footer class="container padv">
17+
<footer class="container-full padv">
1818
<p><a href="/">CoderStats</a> is a free service that displays statistics for coders with public Git repositories on GitHub.<br>
1919
<a href="https://github.com/coderstats/coderstats.net">Source Code</a> •
2020
<a href="https://chrome.google.com/webstore/detail/necogepejonacpphmlmcagmbjaogpbng">Chrome Extension</a> • <a href="https://addons.mozilla.org/en-US/firefox/addon/coderstats/">Firefox Add-on</a> • <a href="https://teespring.com/stores/codershirts" title="T-Shirts, hoodies, mugs and stickers for coders">CoderShirts Store</a>

‎templates/coder.html‎

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
{% raw %}
2323
<div id="coder">
2424
<div v-if="user" class="row">
25-
<div class="col-12 col-2-xl col-2-l col-4-m">
25+
<div class="col-12 col-2-xl col-2-l col-4-m meta">
2626
<div class="padh">
2727
<header>
2828
<h3>{{ user.name }}</h3>
@@ -40,7 +40,7 @@ <h3>{{ user.name }}</h3>
4040
{{ user.name }} has not pushed changes to enough public repositories to show any interesting data here.
4141
</div>
4242
<div v-else class="col-12 col-10-xl col-10-l col-8-m no-padding main">
43-
<div class="flex boxes">
43+
<div class="flex flex-wrap boxes">
4444
<div class="box-stat" title="The number of loaded repositories this user has pushed to.">
4545
<i class="fa fa-code" aria-hidden="true"></i> Pushed to repos
4646
<h4>{{ repos_pushed.length }}</h4>
@@ -87,63 +87,64 @@ <h2 id="summary">Summary</h2>
8787
<div class="padh">
8888
<h2 id="rankings">Rankings</h2>
8989
<div class="row">
90-
<div v-if="languages.length > 1" class="col-6-m col-3-l">
90+
<div v-if="languages.length > 1" class="col-12 col-3-xl col-6-l col-6-m">
9191
<h3>Languages</h3>
9292
<graph id="language-ranking" class="ct-major-third"></graph>
9393
</div>
94-
<div v-if="issues.length > 1" class="col-6-m col-3-l">
94+
<div v-if="issues.length > 1" class="col-12 col-3-xl col-6-l col-6-m">
9595
<h3>Issues</h3>
9696
<graph id="issues-ranking" class="ct-major-third"></graph>
9797
</div>
98-
<div v-if="forks.length > 1" class="col-6-m col-3-l">
98+
<div v-if="forks.length > 1" class="col-12 col-3-xl col-6-l col-6-m">
9999
<h3>Forks</h3>
100100
<graph id="forks-ranking" class="ct-major-third"></graph>
101101
</div>
102-
<div v-if="stars.length > 1" class="col-6-m col-3-l">
102+
<div v-if="stars.length > 1" class="col-12 col-3-xl col-6-l col-6-m">
103103
<h3>Stars</h3>
104104
<graph id="stars-ranking" class="ct-major-third"></graph>
105105
</div>
106106
</div>
107107
</div>
108-
109-
<div class="padh">
110-
<h2 id="repos">Repositories</h2>
111-
<table v-if="repos_pushed">
112-
<thead>
113-
<tr>
114-
<th>#</th>
115-
<th @click="sortBy('name', 'string')" :class="{ active: sort_key == 'name' }">Name <span class="arrow" :class="order('name')"></span></th>
116-
<th @click="sortBy('language', 'string')" :class="{ active: sort_key == 'language' }">Language <span class="arrow" :class="order('language')"></span></th>
117-
<th class="text-right" @click="sortBy('created_at')" :class="{ active: sort_key == 'created_at' }">Created at <span class="arrow" :class="order('created_at')"></span></th>
118-
<th class="text-right" @click="sortBy('pushed_at')" :class="{ active: sort_key == 'pushed_at' }">Pushed at <span class="arrow" :class="order('pushed_at')"></span></th>
119-
<th class="text-right" @click="sortBy('open_issues_count')" :class="{ active: sort_key == 'open_issues_count' }">Issues <span class="arrow" :class="order('open_issues_count')"></span></th>
120-
<th class="text-right" @click="sortBy('forks_count')" :class="{ active: sort_key == 'forks_count' }">Forks <span class="arrow" :class="order('forks_count')"></span></th>
121-
<th class="text-right" @click="sortBy('watchers_count')" :class="{ active: sort_key == 'watchers_count' }">Stars <span class="arrow" :class="order('watchers_count')"></span></th>
122-
<th class="text-right" @click="sortBy('size')" :class="{ active: sort_key == 'size' }">Size <span class="arrow" :class="order('size')"></span></th>
123-
</tr>
124-
</thead>
125-
<tbody>
126-
<tr v-for="(repo, idx) in repos_pushed" :title="repo.description">
127-
<td>{{ idx + 1}}</td>
128-
<td>
129-
<strong><a v-bind:href="repo.html_url">{{ repo.name }}</a></strong>
130-
<i v-if="repo.fork" class="fa fa-code-fork" aria-hidden="true" title="Forked Repository"></i>
131-
<i v-if="repo.archived" class="fa fa-archive" aria-hidden="true" title="Archived Repository"></i>
132-
</td>
133-
<td>{{ repo.language }}</td>
134-
<td class="text-right">{{ repo.created_at | formatDate }}</td>
135-
<td class="text-right">{{ repo.pushed_at | formatDate }}</td>
136-
<td class="text-right">{{ repo.open_issues_count }}</td>
137-
<td class="text-right">{{ repo.forks_count }}</td>
138-
<td class="text-right">{{ repo.watchers_count }}</td>
139-
<td class="text-right">{{ repo.size }}</td>
140-
</tr>
141-
</tbody>
142-
</table>
143-
<a href="#">↑</a>
144-
</div>
145108
</div>
146109
</div>
110+
111+
<div v-if="repos_pushed" class="padh padv">
112+
<h2 id="repos">Repositories</h2>
113+
<table>
114+
<thead>
115+
<tr>
116+
<th>#</th>
117+
<th @click="sortBy('name', 'string')" :class="{ active: sort_key == 'name' }">Name <span class="arrow" :class="order('name')"></span></th>
118+
<th @click="sortBy('language', 'string')" :class="{ active: sort_key == 'language' }">Language <span class="arrow" :class="order('language')"></span></th>
119+
<th class="text-right" @click="sortBy('created_at')" :class="{ active: sort_key == 'created_at' }">Created at <span class="arrow" :class="order('created_at')"></span></th>
120+
<th class="text-right" @click="sortBy('pushed_at')" :class="{ active: sort_key == 'pushed_at' }">Pushed at <span class="arrow" :class="order('pushed_at')"></span></th>
121+
<th class="text-right" @click="sortBy('open_issues_count')" :class="{ active: sort_key == 'open_issues_count' }">Issues <span class="arrow" :class="order('open_issues_count')"></span></th>
122+
<th class="text-right" @click="sortBy('forks_count')" :class="{ active: sort_key == 'forks_count' }">Forks <span class="arrow" :class="order('forks_count')"></span></th>
123+
<th class="text-right" @click="sortBy('watchers_count')" :class="{ active: sort_key == 'watchers_count' }">Stars <span class="arrow" :class="order('watchers_count')"></span></th>
124+
<th class="text-right" @click="sortBy('size')" :class="{ active: sort_key == 'size' }">Size <span class="arrow" :class="order('size')"></span></th>
125+
</tr>
126+
</thead>
127+
<tbody>
128+
<tr v-for="(repo, idx) in repos_pushed" :title="repo.description">
129+
<td>{{ idx + 1}}</td>
130+
<td>
131+
<strong><a v-bind:href="repo.html_url">{{ repo.name }}</a></strong>
132+
<i v-if="repo.fork" class="fa fa-code-fork" aria-hidden="true" title="Forked Repository"></i>
133+
<i v-if="repo.archived" class="fa fa-archive" aria-hidden="true" title="Archived Repository"></i>
134+
</td>
135+
<td>{{ repo.language }}</td>
136+
<td class="text-right">{{ repo.created_at | formatDate }}</td>
137+
<td class="text-right">{{ repo.pushed_at | formatDate }}</td>
138+
<td class="text-right">{{ repo.open_issues_count }}</td>
139+
<td class="text-right">{{ repo.forks_count }}</td>
140+
<td class="text-right">{{ repo.watchers_count }}</td>
141+
<td class="text-right">{{ repo.size }}</td>
142+
</tr>
143+
</tbody>
144+
</table>
145+
<a href="#">↑</a>
146+
</div>
147+
147148
</div>
148149
{% endraw %}
149150
{% endblock %}

0 commit comments

Comments
 (0)