Skip to content

Commit 600a76b

Browse files
ArielMAJArielMAJ
authored
Merge pull request #50 from ArielMAJ/feat/#43/buttons
Feat/#43/buttons
2 parents 9d454c2 + fd05901 commit 600a76b

10 files changed

Lines changed: 4359 additions & 4257 deletions

File tree

‎Makefile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ install:
2222
pre-commit:
2323
$(MAKE_API) pre-commit
2424

25-
patch: pre-commit
25+
patch:
2626
$(MAKE_API) patch
2727
$(MAKE_VUE_FRONT) patch
2828

29-
minor: pre-commit
29+
minor:
3030
$(MAKE_API) minor
3131
$(MAKE_VUE_FRONT) minor

‎api/poetry.lock‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎api/pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "api"
3-
version = "0.5.2"
3+
version = "0.6.0"
44
description = ""
55
authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
66
readme = "README.md"

‎api/src/constants.py‎

Lines changed: 4183 additions & 4183 deletions
Large diffs are not rendered by default.

‎vue-front/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "GitHub_Viz",
3-
"version": "0.5.2",
3+
"version": "0.6.0",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",
@@ -17,6 +17,7 @@
1717
"devDependencies": {
1818
"@babel/core": "^7.12.16",
1919
"@babel/eslint-parser": "^7.12.16",
20+
"@mdi/font": "^7.3.67",
2021
"@vue/cli-plugin-babel": "~5.0.0",
2122
"@vue/cli-plugin-eslint": "~5.0.0",
2223
"@vue/cli-service": "~5.0.0",

‎vue-front/public/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/vuetify@3.4.8/dist/vuetify-labs.css"
11+
/>
812
<title>GitHub Visualization</title>
913
</head>
1014
<body>

‎vue-front/src/App.vue‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,15 @@
88
hint="Write a GitHub username and press enter to visualize their account information"
99
placeholder="ArielMAJ"
1010
clearable
11+
clear-icon="mdi-close-circle"
1112
type="text"
1213
variant="solo-filled"
1314
:rules="[rules.required]"
1415
@keyup.enter="search"
16+
@click:clear="cardOpen = false"
1517
>
1618
</v-text-field>
1719
</v-responsive>
18-
<!-- <v-btn
19-
class="white--text"
20-
color="primary"
21-
@click="cardOpen = !cardOpen"
22-
>Open Repository Visualization
23-
</v-btn> -->
24-
<!-- <PieChartModal
25-
v-if="cardOpen"
26-
:username="this.username"
27-
:reload-watcher="this.reloadCount"
28-
/> -->
2920
<UserCard
3021
:username="this.username"
3122
:reload-watcher="this.reloadCount"
@@ -62,10 +53,10 @@ export default {
6253
},
6354
watch: {
6455
username: _.debounce(function () {
65-
if (this.username === "" || this.username === null) {
66-
this.cardOpen = false;
56+
if (this.username !== "" && this.username !== null) {
57+
this.search();
6758
}
68-
}, 2000),
59+
}, 1500),
6960
},
7061
};
7162
</script>
@@ -76,7 +67,6 @@ export default {
7667
-webkit-font-smoothing: antialiased;
7768
-moz-osx-font-smoothing: grayscale;
7869
text-align: center;
79-
color: rgb(4, 162, 4);
8070
background-color: black;
8171
min-height: 100vh;
8272
min-width: 100vw;

‎vue-front/src/components/UserCard.vue‎

Lines changed: 149 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,109 @@
11
<template>
22
<v-responsive>
33
<Loading v-if="this.userData === null" loadingComponentChoice="Dots" />
4-
<v-card v-else class="card">
5-
<div>
6-
<img
7-
:src="this.userData.avatar_url"
8-
:alt="this.userData.name"
9-
class="avatar"
10-
/>
11-
</div>
12-
<div class="user-info">
13-
<h2>{{ this.userData.name }}</h2>
14-
<p>{{ this.userData.bio }}</p>
15-
<ul>
16-
<li><strong>Followers </strong> : {{ this.userData.followers }}</li>
17-
<li><strong>Following </strong> : {{ this.userData.following }}</li>
18-
<li>
19-
<strong>Repositories </strong> : {{ this.userData.public_repos }}
20-
</li>
21-
</ul>
22-
<ul class="second-desc">
23-
<li v-if="this.userData.twitter_username">
24-
<strong>Twitter</strong> : {{ this.userData.twitter_username }}
25-
</li>
26-
<li v-if="this.userData.location">
27-
<strong>Location</strong> : {{ this.userData.location }}
28-
</li>
29-
</ul>
30-
<ul>
31-
<!-- make date look normal -->
32-
<li v-if="this.userData.created_at">
33-
<strong>Created</strong> : {{ this.userData.created_at }}
34-
</li>
4+
<div v-else class="flex-row">
5+
<div class="card">
6+
<div class="flex-column no-wrap">
7+
<img
8+
:src="this.userData.avatar_url"
9+
:alt="this.userData.name"
10+
class="avatar"
11+
/>
3512
<v-btn
36-
class="margin-left"
13+
variant="plain"
3714
v-if="this.userData.blog"
3815
:href="this.userData.blog"
16+
target="_blank"
3917
>Visit Blog</v-btn
4018
>
41-
</ul>
42-
<Loading v-if="this.userRepos === null" loadingComponentChoice="Dots" />
43-
<div v-else class="repos">
44-
<a
45-
v-for="repo in this.userRepos"
46-
:key="repo.id"
47-
:href="repo.html_url"
19+
</div>
20+
<div class="user-info">
21+
<h2>{{ this.userData.name }}</h2>
22+
<p class="margin-bottom">{{ this.userData.bio }}</p>
23+
<ul class="margin-bottom">
24+
<li><strong>Followers </strong> : {{ this.userData.followers }}</li>
25+
<li><strong>Following </strong> : {{ this.userData.following }}</li>
26+
<li>
27+
<strong>Repositories </strong> :
28+
{{ this.userData.public_repos }}
29+
</li>
30+
</ul>
31+
<ul class="second-desc margin-bottom">
32+
<li v-if="this.userData.location">
33+
<strong>Location</strong> : {{ this.userData.location }}
34+
</li>
35+
</ul>
36+
<ul class="margin-bottom">
37+
<li v-if="this.userData.created_at">
38+
<strong>Created</strong> : {{ this.userData.created_at }}
39+
</li>
40+
</ul>
41+
<Loading
42+
v-if="this.userRepos === null"
43+
loadingComponentChoice="Dots"
44+
/>
45+
<v-chip-group v-else class="flex-row">
46+
<v-chip
47+
v-for="repo in this.userRepos"
48+
:key="repo.id"
49+
:href="repo.html_url"
50+
target="_blank"
51+
>{{ repo.name }}</v-chip
52+
>
53+
</v-chip-group>
54+
</div>
55+
<div class="external-buttons-column margin-right-auto">
56+
<v-btn
57+
variant="plain"
58+
icon="mdi-github"
59+
class="card-external-buttons"
60+
v-if="this.userData.html_url"
61+
:href="this.userData.html_url"
4862
target="_blank"
49-
class="repo"
50-
>{{ repo.name }}</a
51-
>
63+
></v-btn>
64+
<v-btn
65+
variant="plain"
66+
icon="mdi-chart-donut"
67+
class="card-external-buttons"
68+
target="_blank"
69+
@click="openPieChartModal"
70+
></v-btn>
71+
<v-btn
72+
variant="plain"
73+
icon="mdi-chart-bar"
74+
class="card-external-buttons"
75+
target="_blank"
76+
></v-btn>
77+
<v-btn
78+
variant="plain"
79+
icon="mdi-twitter"
80+
class="card-external-buttons"
81+
v-if="this.userData.twitter_username"
82+
:href="'https://twitter.com/' + this.userData.twitter_username"
83+
target="_blank"
84+
></v-btn>
5285
</div>
53-
54-
<div id="repos"></div>
5586
</div>
56-
</v-card>
87+
</div>
5788
</v-responsive>
89+
<PieChartModal
90+
v-if="this.pieChartModalOpen"
91+
:username="this.username"
92+
:reload-watcher="this.reloadWatcher"
93+
ref="pieChartModal"
94+
/>
5895
</template>
5996

6097
<script>
98+
import PieChartModal from "../modals/PieChartModal.vue";
6199
import Loading from "./Loading.vue";
62100
import moment from "moment";
63101
64102
export default {
65103
name: "user-component",
66104
components: {
67105
Loading,
106+
PieChartModal,
68107
},
69108
props: {
70109
username: {
@@ -77,7 +116,7 @@ export default {
77116
},
78117
},
79118
data: function () {
80-
return { userData: null, userRepos: null };
119+
return { userData: null, userRepos: null, pieChartModalOpen: false };
81120
},
82121
mounted() {
83122
console.log("mounted");
@@ -131,6 +170,19 @@ export default {
131170
console.error("Error fetching data:", error);
132171
}
133172
},
173+
scrollToPieChartModal() {
174+
this.$refs.pieChartModal.$el.scrollIntoView({ behavior: "smooth" });
175+
},
176+
openPieChartModal() {
177+
this.pieChartModalOpen = !this.pieChartModalOpen;
178+
179+
// Scroll to PieChartModal when opening
180+
if (this.pieChartModalOpen) {
181+
this.$nextTick(() => {
182+
this.scrollToPieChartModal();
183+
});
184+
}
185+
},
134186
},
135187
watch: {
136188
reloadWatcher() {
@@ -147,21 +199,20 @@ export default {
147199
box-sizing: border-box;
148200
}
149201
.card {
150-
max-width: 800px;
202+
max-width: min(85vw, 800px);
151203
background-color: gainsboro;
152204
color: #000;
153-
border-radius: 20px;
205+
border-radius: 30px;
154206
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
155207
0 15px 40px rgba(0, 0, 0, 0.1);
156208
display: flex;
157209
padding: 3rem;
158210
font-size: 16px;
159-
margin: auto;
160-
margin-top: 20px;
211+
margin: 20px auto;
161212
}
162213
163214
.avatar {
164-
border-radius: 10%;
215+
border-radius: 20%;
165216
border: 10px solid #2a2a72;
166217
height: 150px;
167218
width: 150px;
@@ -218,6 +269,45 @@ export default {
218269
margin-left: 1rem;
219270
}
220271
272+
.margin-bottom {
273+
margin-bottom: 0.3rem;
274+
}
275+
276+
.margin-right-auto {
277+
margin-right: auto;
278+
}
279+
280+
.external-buttons-column {
281+
position: relative;
282+
top: -40px;
283+
right: -115px;
284+
display: flex;
285+
flex-direction: column;
286+
justify-content: flex-start;
287+
padding: 0px 15px;
288+
color: white;
289+
}
290+
.card-external-buttons {
291+
margin-right: auto;
292+
margin-bottom: 10px;
293+
}
294+
295+
.flex-row {
296+
display: flex;
297+
flex-direction: row;
298+
justify-content: center;
299+
}
300+
301+
.flex-column {
302+
display: flex;
303+
flex-direction: column;
304+
justify-content: center;
305+
}
306+
307+
.no-wrap {
308+
flex-wrap: nowrap;
309+
}
310+
221311
@media (max-width: 768px) {
222312
.card {
223313
flex-direction: column;
@@ -232,6 +322,14 @@ export default {
232322
.user-form {
233323
max-width: 400px;
234324
}
325+
.external-buttons-column {
326+
flex-direction: row;
327+
color: black;
328+
margin-top: 30px;
329+
display: inline-block;
330+
top: 0;
331+
right: 0;
332+
}
235333
}
236334
237335
@media (max-width: 450px) {

0 commit comments

Comments
 (0)