Skip to content

Commit 2b37310

Browse files
verhovskyverhovsky
committed
Make page a single chart
1 parent d89fdb6 commit 2b37310

File tree

3 files changed

+180
-290
lines changed

3 files changed

+180
-290
lines changed

‎index.html‎

Lines changed: 11 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
66

77
<title>Tabs or Spaces</title>
8-
<meta name="description" content="Top Github repos have been analysed to understand which whitespace types are most common in different programming languages">
8+
<meta name="description" content="Top GitHub repos were analysed to understand which whitespace types are most common in different programming languages">
99
<meta name="author" content="Uku Pattak">
1010

1111
<link rel="shortcut icon" href="web/fav.png" type="image/png">
@@ -18,76 +18,27 @@
1818
<body>
1919
<header>
2020
<div class="pure-g">
21-
<div class="pure-u-1-3">
22-
<h1 class="tabs">\t</h1>
23-
</div>
24-
<div class="pure-u-1-3"></div>
25-
<div class="pure-u-1-3">
26-
<h1 class="spaces">\s</h1>
27-
</div>
28-
29-
<div class="pure-u-1-3 long-title">
30-
<h2>Tabs</h2>
31-
</div>
32-
<div class="pure-u-1-3 vs">
33-
<h2>or</h2>
34-
</div>
35-
<div class="pure-u-1-3 long-title">
36-
<h2>Spaces</h2>
37-
</div>
21+
<h1>
22+
<span class="tabs">Tabs</span> or <span class="spaces">Spaces</span>
23+
</h1>
3824
</div>
39-
<h3>The Top Starred repositories in Github have been analysed to understand which are the most common whitespace types in different programming languages.</h3>
25+
<h3>The Top Starred repositories on <a href="https://github.com">GitHub</a> were analysed in 2017 to understand which are the most common whitespace types in different programming languages.</h3>
4026
</header>
4127

4228
<main>
43-
<section id="charts">
44-
<div class="loading" v-bind:class="{ 'hide': languages}">
45-
<i class="fa fa-refresh fa-spin"></i>
46-
</div>
47-
<div class="chart" v-for="language in languages | orderBy 'name'" v-bind:class="{ 'show': languages}">
48-
<h2>
49-
<a href="https://github.com/search?l={{ encodeURIComponent(language.name) }}&q=stars%3A%3E1&s=stars&type=Repositories" target="_blank">
50-
{{ language.name }}
51-
</a>
52-
</h2>
53-
<h3>
54-
Analysed <span class="amount">{{ language.analysedReposAmount }}</span> repositories
55-
</h3>
56-
57-
<canvas id="{{ language.name }}Chart" width="300" height="300"></canvas>
58-
</div>
59-
</section>
60-
61-
<section class="legend">
62-
<div class="tab-1">
63-
<i class="fa fa-circle"></i> Tabs
64-
</div>
65-
<div class="spaces-2">
66-
<i class="fa fa-circle"></i> 2 Spaces
67-
</div>
68-
<div class="spaces-3">
69-
<i class="fa fa-circle"></i> 3 Spaces
70-
</div>
71-
<div class="spaces-4">
72-
<i class="fa fa-circle"></i> 4 Spaces
73-
</div>
74-
<div class="spaces-8">
75-
<i class="fa fa-circle"></i> 8 Spaces
76-
</div>
77-
<iframe src="https://ghbtns.com/github-btn.html?user=ukupat&amp;repo=tabs-or-spaces&amp;type=star&amp;count=true&amp" frameborder="0" scrolling="0" width="100px" height="30px"></iframe>
78-
</section>
29+
<div class="chart">
30+
<canvas id="Chart" height="1100"></canvas>
31+
</div>
7932
</main>
8033

8134
<footer>
8235
<iframe src="https://ghbtns.com/github-btn.html?user=ukupat&amp;repo=tabs-or-spaces&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="140px" height="30px"></iframe>
83-
<a href="https://github.com/ukupat/tabs-or-spaces/issues/new" target="_blank">Require an analysis for a new language</a>
36+
<a href="https://github.com/ukupat/tabs-or-spaces/issues/new" target="_blank">Request an analysis for a new language</a>
8437
<a href="https://github.com/ukupat" target="_blank">Check out the author</a>
85-
<a href="https://github.com/ukupat/tabs-or-spaces" target="_blank">Review the source code</a>
38+
<a href="https://github.com/ukupat/tabs-or-spaces" target="_blank">View the source code</a>
8639
</footer>
8740

88-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
89-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.min.js"></script>
90-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
41+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9142
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
9243
<script src="web/index.js"></script>
9344

‎web/index.css‎

Lines changed: 21 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,51 @@
11
header {
2-
width: 400px;
2+
width: 95%;
33
margin: 0 auto;
4-
margin-top: 50px;
5-
margin-bottom: 100px;
6-
text-align: center;
7-
}
8-
@media (max-width: 400px) {
9-
header {
10-
width: 95%;
11-
}
124
}
135
main {
14-
width: 300px;
6+
width: 95%;
157
margin: 0 auto;
168
}
17-
.chart {
18-
display: none;
19-
margin: 60px 0 100px 0;
20-
text-align: center;
21-
}
22-
.chart.show {
23-
display: block;
24-
}
25-
.loading.hide {
26-
display: none;
27-
}
28-
main h2 {
29-
text-transform: uppercase;
30-
}
31-
main h2 a {
32-
color: inherit;
33-
text-decoration: none;
34-
}
35-
main h2 a:hover {
36-
transition: .25s;
37-
color: #19ac70;
38-
}
39-
main h3 {
40-
margin-bottom: 40px;
41-
color: #666;
42-
font-weight: 300;
43-
}
44-
main h3 .amount {
45-
font-weight: 600;
46-
}
479
header h1 {
4810
margin: 0;
4911
margin-bottom: 5px;
50-
font-size: 160px;
12+
color: #666;
13+
font-size: 120px;
5114
font-weight: 300;
15+
text-align: center;
5216
}
53-
header h1.spaces {
17+
header h1 span.spaces {
5418
color: #19ac70;
19+
font-weight: 500;
5520
}
56-
header h1.tabs {
21+
header h1 span.tabs {
5722
color: #a27eae;
23+
font-weight: 500;
5824
}
5925
header h3 {
60-
position: relative;
6126
bottom: 45px;
6227
font-size: 15px;
63-
font-weight: 300;
28+
font-weight: 400;
6429
color: #666;
6530
line-height: 23px;
6631
}
67-
.long-title h2 {
68-
font-size: 20px;
69-
font-weight: 300;
70-
color: #999;
71-
}
72-
.vs h2 {
73-
position: relative;
74-
bottom: 50px;
75-
font-size: 40px;
76-
font-weight: 500;
77-
}
78-
@media (max-width: 400px) {
79-
header h1 {
80-
font-size: 130px;
81-
}
8232

83-
header .vs h2 {
84-
font-size: 25px;
85-
}
86-
87-
header h3 {
88-
bottom: 10px;
33+
@media (max-width: 850px) {
34+
header h1 {
35+
font-size: 75px;
8936
}
9037
}
91-
.loading {
92-
text-align: center;
93-
color: #eee;
94-
}
95-
.loading i {
96-
font-size: 100px;
97-
}
98-
.legend {
99-
position: fixed;
100-
right: 40px;
101-
bottom: 20px;
102-
color: #999;
103-
font-size: 14px;
104-
}
105-
@media (max-width: 600px) {
106-
.legend {
107-
display: none;
38+
@media (max-width: 520px) {
39+
header h1 {
40+
font-size: 65px;
10841
}
10942
}
110-
.legend div {
111-
margin-bottom: 7px;
112-
}
113-
.legend i {
114-
margin-right: 7px;
115-
}
116-
.legend .tab-1 {
117-
color: #a27eae;
118-
}
119-
.legend .spaces-2 {
120-
color: #19ac70;
121-
}
122-
.legend .spaces-3 {
123-
color: #08784a;
124-
}
125-
.legend .spaces-4 {
126-
color: #6b9f97;
127-
}
128-
.legend .spaces-8 {
129-
color: #96d3ca;
130-
}
131-
.legend iframe {
132-
margin-top: 20px;
43+
@media (max-width: 420px) {
44+
header h1 {
45+
font-size: 55px;
46+
}
13347
}
48+
13449
footer {
13550
margin: 50px 0 30px 0;
13651
text-align: center;

0 commit comments

Comments
 (0)