Skip to content

Commit a7fb416

Browse files
yaphyaph
committed
Improve layout and design
1 parent 4ed5f12 commit a7fb416

File tree

7 files changed

+153
-27
lines changed

7 files changed

+153
-27
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@ Source files for [coderstats.net](http://coderstats.net/).
55
# Reference
66

77
* https://developer.github.com/v3/search/#search-users
8-
* https://jsfiddle.net/chrisvfritz/sbLgr0ad
9-
* https://github.com/GabrielBibiano/vue-github-profile/blob/master/GithubProfile.vue
8+
* https://help.github.com/en/articles/searching-users#search-only-users-or-organizations

‎content/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
noindex: 1
33
url: /
4-
title: CoderStats - View Statistics for Millions of GitHub Users
4+
title: CoderStats - View Statistics for Millions of GitHub Users and Organizations
55
template: front.html
66
created: 2017-09-22T22:02:05
77
---

‎src/scss/coder.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,8 @@
3232
stroke: $color2;
3333
}
3434

35-
.main {
36-
width: 88%;
37-
}
38-
3935
.sidebar {
40-
width: 12%;
41-
font-size: .9em;
36+
min-width: 200px;
4237
}
4338

4439
.sidebar a {

‎src/scss/style.scss‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,33 @@ img {
2727
}
2828

2929
.box-search {
30-
background-color: $color3;
31-
border: none;
30+
background-color: $color5;
3231
padding: 4em;
3332
}
33+
.box-search form {
34+
max-width: 1200px;
35+
margin: 0 auto;
36+
}
37+
.box-search input, .box-search button {
38+
font-size: 2rem;
39+
min-height: 4rem;
40+
}
41+
.box-search button {
42+
min-width: 12rem;
43+
}
3444

35-
.logo {
36-
background-image: url('/img/coderstats.png');
37-
background-repeat: no-repeat;
38-
padding-left: 50px;
45+
.brand-front {
46+
text-align: center;
47+
padding: 2rem 0;
48+
}
49+
.brand-front h1 {
50+
display: inline-block;
51+
font-size: 4rem;
52+
bottom: .3rem;
53+
position: relative;
54+
}
55+
.brand-front img {
56+
display: inline-block;
3957
}
4058

4159
.main {
@@ -46,6 +64,10 @@ img {
4664
margin: 1rem 0;
4765
}
4866

67+
.padb {
68+
padding: 0 0 1em 0;
69+
}
70+
4971
.padh {
5072
padding: 0 1em;
5173
}

‎static/img/coderstats.svg‎

Lines changed: 109 additions & 0 deletions
Loading

‎templates/coder.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,19 +85,19 @@ <h2 id="summary">Summary</h2>
8585
<div class="padh">
8686
<h2 id="rankings">Rankings</h2>
8787
<div class="row">
88-
<div v-if="languages.length > 1" class="col-3">
88+
<div v-if="languages.length > 1" class="col-6-m col-3-l">
8989
<h3>Languages</h3>
9090
<graph id="language-ranking" class="ct-major-third"></graph>
9191
</div>
92-
<div v-if="issues.length > 1" class="col-3">
92+
<div v-if="issues.length > 1" class="col-6-m col-3-l">
9393
<h3>Issues</h3>
9494
<graph id="issues-ranking" class="ct-major-third"></graph>
9595
</div>
96-
<div v-if="forks.length > 1" class="col-3">
96+
<div v-if="forks.length > 1" class="col-6-m col-3-l">
9797
<h3>Forks</h3>
9898
<graph id="forks-ranking" class="ct-major-third"></graph>
9999
</div>
100-
<div v-if="stars.length > 1" class="col-3">
100+
<div v-if="stars.length > 1" class="col-6-m col-3-l">
101101
<h3>Stars</h3>
102102
<graph id="stars-ranking" class="ct-major-third"></graph>
103103
</div>
@@ -140,10 +140,8 @@ <h2 id="repos">Repositories</h2>
140140
</table>
141141
<a href="#">↑</a>
142142
</div>
143-
144143
</div>
145144
</div>
146-
147145
</div>
148146
{% endraw %}
149147
{% endblock %}

‎templates/front.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22

33
{% block content %}
44
<div class="container-full main">
5-
<h1 class="logo">{{ title }}</h1>
5+
<div class="brand-front">
6+
<img src="/img/coderstats.svg">
7+
<h1>CoderStats</h1>
8+
</div>
69
<div class="box-search" id="search">
710
<form class="row" @submit.prevent>
811
<div class="col-10">
9-
<input class="field" id="username" type="text" placeholder="GitHub user name" v-model="username">
12+
<input class="field" id="username" type="text" placeholder="GitHub user name or organization" v-model="username">
1013
</div>
1114
<div class="col-2">
1215
<button @click="coder" class="button">Get Stats</button>
1316
</div>
1417
</form>
1518
</div>
16-
<div v-if="events" id="active-users">
19+
<div v-if="events" id="active-users" class="padb">
1720
<h2>Recently active users</h2>
1821
<div class="flex">
1922
<user-link
@@ -23,7 +26,7 @@ <h2>Recently active users</h2>
2326
></user-link>
2427
</div>
2528
</div>
26-
<div v-if="users" id="followed-users">
29+
<div v-if="users" id="followed-users" class="padb">
2730
<h2>Most followed users</h2>
2831
<div class="flex">
2932
<user-link
@@ -33,7 +36,7 @@ <h2>Most followed users</h2>
3336
></user-link>
3437
</div>
3538
</div>
36-
<div v-if="users" id="most-repos-users">
39+
<div v-if="users" id="most-repos-users" class="padb">
3740
<h2>Users with most repositories</h2>
3841
<div class="flex">
3942
<user-link
@@ -43,7 +46,7 @@ <h2>Users with most repositories</h2>
4346
></user-link>
4447
</div>
4548
</div>
46-
<div v-if="users" id="earliest-users">
49+
<div v-if="users" id="earliest-users" class="padb">
4750
<h2>Users with oldest accounts</h2>
4851
<div class="flex">
4952
<user-link

0 commit comments

Comments
 (0)