Skip to content

#303 : updated contributor-flip.css and contributor.html #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

#303 : updated contributor-flip.css and contributor.html #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion assets/css/contributor-flip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
height: 100%;
backface-visibility: hidden;
border-radius: 1rem;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
background: #fff;
display: flex;
flex-direction: column;
Expand All @@ -53,3 +53,47 @@
font-weight: bold;
text-decoration: underline;
}

/* Dynamic CSS Grid Layout */
#contributors-container {
display: grid;
gap: 1.5rem;
justify-content: center;
/* Default for mobile: 1 column */
grid-template-columns: repeat(1, minmax(280px, 1fr));
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#contributors-container {
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#contributors-container {
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#contributors-container {
grid-template-columns: repeat(3, minmax(280px, 1fr));
}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#contributors-container {
grid-template-columns: repeat(4, minmax(280px, 1fr));
}
}

/* Extra extra large devices (larger screens, 1400px and up) */
@media (min-width: 1400px) {
#contributors-container {
grid-template-columns: repeat(5, minmax(280px, 1fr));
}
}
137 changes: 79 additions & 58 deletions contributors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,17 @@
<title>DevBlog - Blog for Developers</title>
<link rel="stylesheet" href="assets/css/style.css" id="theme-sheet" />
<link rel="stylesheet" href="assets/css/contributor-flip.css" />

</head>
<body>

<div id="navbar-placeholder"></div>

<div id="navbar-placeholder"></div>

<div class="container my-5 pt-5">
<h2 class="text-center mb-5">Our Contributors</h2>
<div id="contributors-container" class="row g-4">
<div id="contributors-container">
<!-- Contributors will be dynamically loaded here -->
</div>
</div>


<!-- Footer -->
<div class="footer-dark">
<footer>
Expand Down Expand Up @@ -86,7 +82,7 @@ <h3>DevBlog</h3>
<script type="module">
import { Octokit } from "https://cdn.pika.dev/@octokit/[email protected]";
const octokit = new Octokit();

// Function to get user details for additional info
async function getUserDetails(username) {
try {
Expand All @@ -99,7 +95,7 @@ <h3>DevBlog</h3>
return null;
}
}

octokit
.request("GET /repos/:owner/:repo/contributors", {
owner: "jineshnagori",
Expand All @@ -109,42 +105,62 @@ <h3>DevBlog</h3>
const contributorsHtml = await Promise.all(
response.data.map(async (user) => {
const userDetails = await getUserDetails(user.login);
const bio = userDetails?.bio || "Developer and open source contributor";
const bio =
userDetails?.bio || "Developer and open source contributor";
const name = userDetails?.name || user.login;
const location = userDetails?.location || "";
const company = userDetails?.company || "";

return `
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="contributor-card" onclick="toggleFlip(this)">
<div class="contributor-card-inner">
<div class="contributor-card-front">
<img src="${user.avatar_url}" class="rounded-circle p-3" style="width: 120px; height: 120px; object-fit: cover;" alt="${user.login}">
<div class="text-center p-3">
<h5 class="mb-2">${name}</h5>
<p class="text-muted mb-2">@${user.login}</p>
<p class="text-primary fw-bold">${user.contributions} contributions</p>
</div>
<div class="contributor-card" onclick="toggleFlip(this)">
<div class="contributor-card-inner">
<div class="contributor-card-front">
<img src="${
user.avatar_url
}" class="rounded-circle p-3" style="width: 120px; height: 120px; object-fit: cover;" alt="${
user.login
}">
<div class="text-center p-3">
<h5 class="mb-2">${name}</h5>
<p class="text-muted mb-2">@${user.login}</p>
<p class="text-primary fw-bold">${
user.contributions
} contributions</p>
</div>
<div class="contributor-card-back">
<div class="text-center h-100 d-flex flex-column justify-content-center">
<img src="${user.avatar_url}" class="rounded-circle mb-3 mx-auto" style="width: 80px; height: 80px; object-fit: cover;" alt="${user.login}">
<h6 class="mb-2">${name}</h6>
<p class="small text-muted mb-2">${bio}</p>
${location ? `<p class="small mb-1"><i class="fas fa-map-marker-alt me-1"></i>${location}</p>` : ''}
${company ? `<p class="small mb-2"><i class="fas fa-building me-1"></i>${company}</p>` : ''}
<a href="${user.html_url}" target="_blank" class="btn btn-primary btn-sm mt-2">
<i class="fab fa-github me-1"></i>View Profile
</a>
</div>
</div>
<div class="contributor-card-back">
<div class="text-center h-100 d-flex flex-column justify-content-center">
<img src="${
user.avatar_url
}" class="rounded-circle mb-3 mx-auto" style="width: 80px; height: 80px; object-fit: cover;" alt="${
user.login
}">
<h6 class="mb-2">${name}</h6>
<p class="small text-muted mb-2">${bio}</p>
${
location
? `<p class="small mb-1"><i class="fas fa-map-marker-alt me-1"></i>${location}</p>`
: ""
}
${
company
? `<p class="small mb-2"><i class="fas fa-building me-1"></i>${company}</p>`
: ""
}
<a href="${
user.html_url
}" target="_blank" class="btn btn-primary btn-sm mt-2">
<i class="fab fa-github me-1"></i>View Profile
</a>
</div>
</div>
</div>
</div>`;
})
);

document.getElementById("contributors-container").innerHTML = contributorsHtml.join("");

document.getElementById("contributors-container").innerHTML =
contributorsHtml.join("");
});
</script>
<script>
Expand Down Expand Up @@ -175,43 +191,48 @@ <h6 class="mb-2">${name}</h6>
function toggleFlip(card) {
// Only toggle on click for mobile devices
if (window.innerWidth <= 768) {
card.classList.toggle('flipped');
card.classList.toggle("flipped");
}
}

// Add event listeners for better mobile interaction
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener("DOMContentLoaded", function () {
// Reset flip state when clicking outside cards on mobile
document.addEventListener('click', function(e) {
if (window.innerWidth <= 768 && !e.target.closest('.contributor-card')) {
document.querySelectorAll('.contributor-card.flipped').forEach(card => {
card.classList.remove('flipped');
});
document.addEventListener("click", function (e) {
if (
window.innerWidth <= 768 &&
!e.target.closest(".contributor-card")
) {
document
.querySelectorAll(".contributor-card.flipped")
.forEach((card) => {
card.classList.remove("flipped");
});
}
});
});
</script>
<script>
window.addEventListener("scroll", function() {
const navbar = document.querySelector(".navbar-frosted");
if (window.scrollY > 50) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});
</script>
<script>
fetch("templates/navbar.html")
.then(response => response.text())
.then(data => {
document.getElementById("navbar-placeholder").innerHTML = data;
});
</script>
<script>
window.addEventListener("scroll", function () {
const navbar = document.querySelector(".navbar-frosted");
if (window.scrollY > 50) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});
</script>
<script>
fetch("templates/navbar.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("navbar-placeholder").innerHTML = data;
});
</script>

<!-- Fontawesome Script -->
<script
src="https://kit.fontawesome.com/6d2226036d.js"
crossorigin="anonymous"
></script>
</html>
</html>