Skip to content
This repository was archived by the owner on May 7, 2021. It is now read-only.

Commit 80d33db

Browse files
mucho613mucho613
committed
WIP: CSSでの実装
1 parent f85bf91 commit 80d33db

File tree

5 files changed

+212
-16
lines changed

5 files changed

+212
-16
lines changed

‎src/api/contributions_collection/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import api from '@/api';
2+
import getHeader from '@/api/utils/get-header';
3+
4+
export default {
5+
async getContributionsCollection(sessionID) {
6+
let option = null;
7+
if (sessionID) {
8+
option = getHeader(sessionID);
9+
}
10+
const contributionsCollectionData = (await api.client.get('/contribution_collections', option)).data;
11+
return contributionsCollectionData;
12+
},
13+
};

‎src/components/GitHubContributionGraph.vue

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<div class="container">
3+
<div class="wrapper">
4+
<div class="contributions-graph">
5+
<div class="user"
6+
v-for="(user, index) in
7+
contributionsCollection.contribution_collections.slice(0, displayUsersNumber)"
8+
v-bind:key="user.name"
9+
v-bind:style="{ transform: 'rotateY(' + 360 / displayUsersNumber * index + 'deg)' }">
10+
<div class="user-info" v-bind:style=
11+
"{ 'animation-delay': -60 / displayUsersNumber * index + 's' }">
12+
<img v-bind:src="user.user.icon_url">
13+
<dl>
14+
<dt>USER NAME</dt>
15+
<dd class="user-name">{{ user.user.github_user_name }}</dd>
16+
<dt>TOTAL CONTRIBUTIONS</dt>
17+
<dd class="total-contributions">{{ user.total_count }}</dd>
18+
</dl>
19+
</div>
20+
<div class="graph" v-bind:style=
21+
"{ stroke: 'hsl(' + 360 / displayUsersNumber * index + ', 70%, 45%)' }">
22+
<svg viewbox="0 0 25 300" width="25" height="300">
23+
<line x1=0 v-bind:y1="300 - (dayIndex * 5 + 2)"
24+
v-bind:x2="item.count" v-bind:y2="300 - (dayIndex * 5 + 2)"
25+
stroke-width="4" v-bind:opacity="item.count / 5"
26+
v-for="(item, dayIndex) in user.days"
27+
v-bind:key="item.date"></line>
28+
</svg>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script>
37+
import { mapState, mapActions } from 'vuex';
38+
39+
export default {
40+
name: 'GitHubContributionsGraph',
41+
props: ['displayUsersNumber'],
42+
computed: mapState(
43+
'contributionsCollection', ['contributionsCollection'],
44+
),
45+
methods: {
46+
...mapActions(
47+
'contributionsCollection', ['getContributionsCollection'],
48+
),
49+
},
50+
async created() {
51+
this.getContributionsCollection();
52+
},
53+
};
54+
</script>
55+
56+
<style scoped>
57+
@keyframes rotate {
58+
from { transform: rotateY(0deg); }
59+
to { transform: rotateY(360deg); }
60+
}
61+
@keyframes fukan {
62+
from { transform: rotateX(0deg); }
63+
to { transform: rotateX(-30deg); }
64+
}
65+
@keyframes dash {
66+
from { stroke-dashoffset: 50; }
67+
to { stroke-dashoffset: 0; }
68+
}
69+
.container {
70+
perspective: 1000px;
71+
}
72+
.wrapper {
73+
font-family: 'Barlow';
74+
font-weight: bold;
75+
height: 700px;
76+
animation: fukan 10s ease-in-out;
77+
transform-style: preserve-3d;
78+
width: 60%;
79+
margin: 100px auto;
80+
transform: rotateX(-30deg);
81+
}
82+
dl {
83+
letter-spacing: 1px;
84+
}
85+
dt {
86+
font-size: 0.7em;
87+
line-height: 1px;
88+
}
89+
.user {
90+
width: 50%;
91+
margin-left: 50%;
92+
position: absolute;
93+
transform-origin: 0;
94+
transform-style: preserve-3d;
95+
}
96+
.user-info {
97+
margin-left: 70%;
98+
animation: rotate 60s infinite reverse linear;
99+
border-top: 1px solid black;
100+
padding-top: 20px;
101+
font-size: 16px;
102+
}
103+
.user-info img {
104+
width: 64px;
105+
height: 64px;
106+
object-fit: contain;
107+
position: absolute;
108+
left: -85px;
109+
top: 16px;
110+
border: 1px solid black;
111+
}
112+
.user-name, .total-contributions{
113+
font-size: 3em;
114+
}
115+
.contributions-graph {
116+
animation: rotate 60s infinite linear;
117+
transform-style: preserve-3d;
118+
}
119+
.graph {
120+
transform-style: preserve-3d;
121+
padding-top: 20px;
122+
}
123+
svg {
124+
width: 100%;
125+
transform-origin: top left;
126+
transform: scale(30, 2);
127+
}
128+
svg line {
129+
stroke-dasharray: 50;
130+
animation: dash 10s ease-in-out;
131+
}
132+
@media screen and (max-width: 480px) {
133+
.user-info {
134+
font-size: 6px;
135+
}
136+
}
137+
</style>

‎src/store/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import memberIntroduction from './modules/memberIntroduction';
1212
import editUser from './modules/editUser';
1313
import invitation from './modules/invitation';
1414
import ui from './modules/ui';
15+
import contributionsCollection from './modules/githubContributionsCollection';
1516

1617
Vue.use(Vuex);
1718

@@ -29,6 +30,7 @@ export default new Vuex.Store({
2930
editUser,
3031
invitation,
3132
ui,
33+
contributionsCollection,
3234
},
3335
plugins: [
3436
createPersistedState({

‎src/store/modules/githubContributionsCollection/index.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import ContributionsCollectionClient from '@/api/contributions_collection';
2+
3+
export default {
4+
namespaced: true,
5+
state: {
6+
contributionsCollection: null,
7+
},
8+
/* eslint-disable no-param-reassign */
9+
mutations: {
10+
setContributionsCollection(state, contributionsCollection) {
11+
state.contributionsCollection = contributionsCollection;
12+
},
13+
},
14+
/* eslint-enable no-param-reassign */
15+
actions: {
16+
async getContributionsCollection({ commit, dispatch }, sessionID) {
17+
try {
18+
commit('setContributionsCollection', await ContributionsCollectionClient.getContributionsCollection(sessionID));
19+
} catch (e) {
20+
dispatch('criticalError/createError', e, { root: true });
21+
}
22+
},
23+
},
24+
};

‎src/views/Home.vue

+36-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
<template>
22
<div class="home">
3-
<section>
4-
<h2>部員募集中!</h2>
5-
<p>
6-
久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
7-
興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
8-
</p>
9-
</section>
3+
<div class="overlay">
4+
<section>
5+
<h2>部員募集中!</h2>
6+
<p>
7+
久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
8+
興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
9+
</p>
10+
</section>
1011

11-
<section class="achievements-list">
12-
<h2>戦歴</h2>
13-
<div>
14-
<AchievementsList/>
15-
</div>
16-
</section>
12+
<section class="achievements-list">
13+
<h2>戦歴</h2>
14+
<div>
15+
<AchievementsList/>
16+
</div>
17+
</section>
18+
19+
<section class="member-list">
20+
<h2>部員一覧</h2>
21+
<div>
22+
<publicMemberList includeLeftUser/>
23+
</div>
24+
</section>
25+
</div>
1726

18-
<section class="member-list">
19-
<h2>部員一覧</h2>
27+
<section class="github-contributions-graph">
2028
<div>
21-
<publicMemberList includeLeftUser/>
29+
<GitHubContributionGraph displayUsersNumber="5"/>
2230
</div>
2331
</section>
2432
</div>
@@ -27,6 +35,7 @@
2735
<script>
2836
import AchievementsList from '@/components/AchievementsList.vue';
2937
import publicMemberList from '@/components/PublicMemberList.vue';
38+
import GitHubContributionGraph from '@/components/GitHubContributionGraph.vue';
3039
3140
export default {
3241
name: 'home',
@@ -37,6 +46,7 @@ export default {
3746
components: {
3847
AchievementsList,
3948
publicMemberList,
49+
GitHubContributionGraph,
4050
},
4151
};
4252
</script>
@@ -61,6 +71,16 @@ export default {
6171
margin-right: 30px;
6272
}
6373
74+
.github-contributions-graph {
75+
position: fixed;
76+
top: 0;
77+
left: 0;
78+
right: 0;
79+
overflow: hidden;
80+
opacity: 0.5;
81+
z-index: -1;
82+
}
83+
6484
section {
6585
margin: 40px 0;
6686
}

0 commit comments

Comments
 (0)