Skip to content

Commit 9415a39

Browse files
sudhanshutechsudhanshutech
committed
improve ui
Signed-off-by: sudhanshu dasgupta <[email protected]>
1 parent 932d94c commit 9415a39

File tree

4 files changed

+40
-8
lines changed

4 files changed

+40
-8
lines changed

‎Lets-Learn-Github/contributors/index.html

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@
1515

1616
/* Style for each contributor item */
1717
.contributor {
18-
width: calc(
19-
30% - 10px
20-
); /* Adjust the width for three contributors in a row */
18+
width: calc(30% - 10px);
19+
/* Adjust the width for three contributors in a row */
2120
margin-bottom: 20px;
2221
padding: 20px;
2322
border: 1px solid #ccc;
@@ -37,6 +36,10 @@
3736
color: #666;
3837
width: 100%;
3938
overflow: auto;
39+
background-color: #f9f9f9;
40+
box-shadow: 0 0 5px #ccc;
41+
padding: 6px;
42+
border-radius: 5px;
4043
}
4144

4245
/* Style for contributor image */
@@ -50,20 +53,22 @@
5053

5154
@media (max-width: 750px) {
5255
.contributor {
53-
width: calc(
54-
50% - 10px
55-
); /* Adjust the width for two contributors in a row */
56+
width: calc(50% - 10px);
57+
/* Adjust the width for two contributors in a row */
5658
}
5759
}
5860

5961
@media (max-width: 400px) {
6062
.contributor {
61-
width: 100%; /* Full width for one contributor in a row */
63+
width: 100%;
64+
/* Full width for one contributor in a row */
6265
}
6366
}
6467
</style>
6568
</head>
69+
6670
<body>
71+
<div>
6772
<h1>Contributors</h1>
6873
<ul id="contributors-list">
6974
<!-- Contributors will be dynamically added here -->
@@ -90,6 +95,12 @@ <h1>Contributors</h1>
9095
const name = filteredLines[0];
9196
const details = filteredLines
9297
.slice(1)
98+
.filter(
99+
(line) =>
100+
!line.includes("LinkedIn:") &&
101+
!line.includes("GitHub:") &&
102+
!line.includes("Twitter:")
103+
)
93104
.map((line) => `<li>${line}</li>`)
94105
.join("");
95106

@@ -99,14 +110,35 @@ <h1>Contributors</h1>
99110
);
100111
const imageURL = imageURLMatch ? imageURLMatch[1] : ""; // Extracting the URL from the matched group
101112

113+
const linkedInMatch = contributor.match(
114+
/LinkedIn: \[LinkedIn\]\((.*?)\)/
115+
);
116+
const linkedInLink = linkedInMatch ? linkedInMatch[1] : "";
117+
const gitHubMatch = contributor.match(
118+
/GitHub: \[GitHub\]\((.*?)\)/
119+
);
120+
const gitHubLink = gitHubMatch ? gitHubMatch[1] : "";
121+
const twitterMatch = contributor.match(
122+
/Twitter: \[Twitter\]\((.*?)\)/
123+
);
124+
const twitterLink = twitterMatch ? twitterMatch[1] : "";
125+
102126
// Create list item for the contributor with image
103127
const li = document.createElement("li");
104128
li.classList.add("contributor");
105129
li.innerHTML = `
106130
<div class="contributor-name">
131+
<div>
107132
<img src="${imageURL}" alt="${name}'s Profile Image" class="contributor-image">
108133
${name}
134+
</div>
135+
<div class="social-icons">
136+
<a href="${linkedInLink}" target="_blank"><img height="24" src="../public/images/linkedin.png" alt="LinkedIn Icon"></a>
137+
<a href="${gitHubLink}" target="_blank"><img height="24" src="../public/images/github.png" alt="Twitter Icon"></a
138+
<a href="${twitterLink}" target="_blank"><img height="24" src="../public/images/twiiter.png" alt="GitHub Icon"></a>
139+
</div>
109140
</div>
141+
110142
<div class="contributor-details">
111143
<ul>${details}</ul>
112144
</div>
@@ -120,6 +152,6 @@ <h1>Contributors</h1>
120152

121153
fetchContributors();
122154
</script>
155+
</div>
123156
</body>
124157
</html>
125-

‎Lets-Learn-Github/public/images/github.png

2.99 KB
Loading

‎Lets-Learn-Github/public/images/linkedin.png

1.75 KB
Loading

‎Lets-Learn-Github/public/images/twiiter.png

2.98 KB
Loading

0 commit comments

Comments
 (0)