Skip to content

Commit a287d97

Browse files
themisk84themisk84
committed
styling for tablet view
1 parent f34d1f1 commit a287d97

9 files changed

Lines changed: 74 additions & 22 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎code/.DS_Store‎

6 KB
Binary file not shown.

‎code/assets/.DS_Store‎

6 KB
Binary file not shown.

‎code/assets/github.jpeg‎

119 KB
Loading

‎code/assets/github2.png‎

7.65 KB
Loading

‎code/chart.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@ const drawChart = (amount) => {
1212
{
1313
label: "My First Dataset",
1414
data: [amount, 20 - amount],
15-
backgroundColor: [
16-
"rgb(255, 99, 132)",
17-
"rgb(54, 162, 235)",
18-
"rgb(255, 205, 86)",
19-
],
15+
backgroundColor: ["#58a6ff", "rgb(255, 0, 0)", "rgb(255, 205, 86)"],
2016
hoverOffset: 4,
2117
},
2218
],

‎code/index.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,20 @@
99
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1010
</head>
1111
<body>
12-
<div class="profile-container" id="profileContainer">
13-
<img id="profileImage" class="profile-image" alt="profile-image" />
14-
<p id="userName" class="user-name"></p>
15-
</div>
16-
<div class="tracker">
17-
<h1>GitHub Tracker</h1>
18-
<h2>Projects:</h2>
19-
</div>
20-
<main id="projects" class="projects"></main>
12+
<img class="logo-image" src="./assets/github.jpeg" alt="github-logo">
13+
<!-- <div class="main-body"> -->
14+
<div class="upper-section">
15+
<div class="profile-container" id="profileContainer">
16+
<img id="profileImage" class="profile-image" alt="profile-image" />
17+
<p id="userName" class="user-name"></p>
18+
</div>
19+
<div class="tracker">
20+
<h2>GitHub Tracker</h1>
21+
<h4>Projects:</h2>
22+
</div>
23+
</div>
24+
<main id="projects" class="projects"></main>
25+
<!-- </div> -->
2126

2227
<!-- This will be used to draw the chart 👇 -->
2328
<canvas id="chart" class="chart"></canvas>

‎code/script.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,17 @@ const getRepos = () => {
1616
);
1717
forkedRepos.forEach(
1818
(repo) =>
19-
(projects.innerHTML += `<div class="repo" id="${repo.name}">
19+
(projects.innerHTML += `
20+
<div class="repo" id="${repo.name}">
2021
<a class="repo-item1" href="${repo.html_url}" target="_blank">${
2122
repo.name
2223
}</a>
2324
<span class="repo-item2">${repo.default_branch}</span>
2425
<h4 class="repo-item3">Last updated: ${new Date(
2526
repo.updated_at
2627
).toLocaleDateString()}</h4>
27-
</div>`)
28+
</div>
29+
`)
2830
);
2931

3032
drawChart(forkedRepos.length);
@@ -53,8 +55,6 @@ const getPullRequest = (forkedRepos) => {
5355
const commitsURL = myPulls[0].commits_url;
5456
// console.log(commitsURL);
5557
getCommits(commitsURL, repo);
56-
57-
// const myComments =
5858
});
5959
});
6060
};
@@ -63,10 +63,15 @@ const getCommits = (commitsURL, repo) => {
6363
fetch(commitsURL)
6464
.then((response) => response.json())
6565
.then((data) => {
66-
// console.log(data.length);
67-
document.getElementById(
68-
`${repo.name}`
69-
).innerHTML += `<h4 class="repo-item4"> Number of commits: ${data.length}</h4>`;
66+
console.log(data);
67+
if (data.length === undefined) {
68+
document.getElementById(
69+
`${repo.name}`
70+
).innerHTML += `Pair or group project`;
71+
} else
72+
document.getElementById(
73+
`${repo.name}`
74+
).innerHTML += `<h4 class="repo-item4"> Number of commits: ${data.length}</h4>`;
7075
});
7176
};
7277

‎code/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ body {
55
padding: 0;
66
}
77

8+
.logo-image {
9+
width: 100%;
10+
height: 40px;
11+
}
812
.profile-container {
913
width: 70px;
1014
height: 70px;
@@ -76,3 +80,45 @@ a:hover {
7680
grid-column: span 4;
7781
color: #8b949e;
7882
}
83+
84+
/* .chart {
85+
width: 225px;
86+
height: 225px;
87+
} */
88+
89+
@media (min-width: 768px) {
90+
/* .main-body {
91+
display: flex;
92+
align-items: center;
93+
} */
94+
95+
.upper-section {
96+
display: flex;
97+
flex-direction: column;
98+
width: 25%;
99+
justify-content: space-evenly;
100+
position: relative;
101+
}
102+
103+
104+
.profile-container {
105+
width: 65%;
106+
height: 120px;
107+
display: flex;
108+
flex-direction: column;
109+
}
110+
111+
.user-name {
112+
font-size: 25px;
113+
}
114+
115+
116+
.projects {
117+
grid-template-columns: 1fr 1fr;
118+
width: 65%;
119+
position: absolute;
120+
margin-left: 250px;
121+
margin-top: -200px;
122+
}
123+
124+

0 commit comments

Comments
 (0)