Skip to content
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

feat:add carousel in recent event and update the js applicable for al… #137

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

feat:add carousel in recent event and update the js applicable for al… #137

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
203 changes: 146 additions & 57 deletions _includes/recent-events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,81 +9,170 @@
{% assign recent_events = site.events | where: 'completed', true | sort:
'date' | reverse %} {% assign event_count = recent_events | size %}

<!-- Carousel for mobile view -->
<div
class="lg:hidden overflow-hidden relative w-full"
id="recent-events-carousel"
>
{% if event_count == 0 %}
<div class="text-center text-gray-500 text-xl mt-16">
No recent events at the moment. Please check back later.
</div>
{% else %}
<div
class="carousel-wrapper flex transition-transform duration-500 ease-in-out"
data-current-index="0"
>
{% for event in recent_events limit: 4 %}
<div class="carousel-item min-w-full p-4">
<div
class="relative bg-[{{site.bg-colors.darkBlue}}] text-white p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer"
>
<a href="{{ event.url }}" class="absolute inset-0 block"></a>
<div class="flex flex-col md:flex-row items-start md:items-center">
<!-- Event Image -->
<div class="md:w-1/3 w-full mb-4 md:mb-0">
<img
loading="lazy"
src="{{ event.thumbnail }}"
alt="{{ event.title }}"
class="w-full h-auto md:h-60 md:w-60 rounded-lg"
/>
</div>
<!-- Event Info -->
<div class="md:w-2/3 w-full md:pl-6">
<h3 class="text-xl font-bold">{{ event.title }}</h3>
<p class="text-sm text-gray-400 italic font-semibold">
{% if event.end_date %} {{ event.date | date: "%a, %b %e, %Y" }}
- {{ event.end_date | date: "%a, %b %e, %Y" }} {% else %} {{
event.date | date: "%a, %b %e, %Y" }} {% endif %}
</p>
<p class="text-sm my-2">
{{ event.description | truncate: 120, "..." }}
</p>
<p class="text-sm mb-1 text-gray-400 font-bold">
{{ event.participants }}
</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

<!-- Carousel buttons -->
<!-- <button
onclick="moveSlide(-1, 'recent-events-carousel')"
class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-3xl"
>
&#10094;
</button>
<button
onclick="moveSlide(1, 'recent-events-carousel')"
class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white text-3xl"
>
&#10095;
</button> -->
{% endif %}
</div>

<!-- Grid for desktop view -->
{% if event_count == 0 %}
<div class="text-center text-gray-500 text-xl mt-16">
No recent events at the moment. Please check back later.
</div>

<!-- Conditionally set grid based on the number of events -->
{% elsif event_count == 1 %}
<div class="grid grid-cols-1 place-items-center gap-4 md:gap-8">
{% else %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
{% endif %} {% for event in recent_events limit: 4 %}
<div
class="relative bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer {% if event_count == 1 %}md:w-[810px] w-full{% endif %}"
>
<a href="{{ event.url }}" class="absolute inset-0 block"></a>
<div class="flex flex-col md:flex-row items-start md:items-center">
<!-- Event Image -->
<div class="md:w-1/3 w-full mb-4 md:mb-0">
<img loading="lazy"
src="{{ event.thumbnail }}"
alt="{{ event.title }}"
class="w-full h-auto md:h-60 md:w-60 rounded-lg"
/>
</div>
<div
class="hidden lg:grid grid grid-cols-1 place-items-center gap-4 md:gap-8"
>
{% for event in recent_events limit: 4 %}
<div
class="relative bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer md:w-[810px] w-full"
>
<a href="{{ event.url }}" class="absolute inset-0 block"></a>
<div class="flex flex-col md:flex-row items-start md:items-center">
<!-- Event Image -->
<div class="md:w-1/3 w-full mb-4 md:mb-0">
<img
loading="lazy"
src="{{ event.thumbnail }}"
alt="{{ event.title }}"
class="w-full h-auto md:h-60 md:w-60 rounded-lg"
/>
</div>

<!-- Event Info -->
<div class="md:w-2/3 w-full md:pl-6">
<h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
<!-- Event Info -->
<div class="md:w-2/3 w-full md:pl-6">
<h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>

<!-- Event Date Logic -->
<p class="text-sm text-gray-400 italic font-semibold">
<!-- Display event dates -->
{% if event.end_date %}
<!-- Multi-day event: Show start and end dates -->
{{ event.date | date: "%a, %b %e, %Y" }} - {{ event.end_date |
date: "%a, %b %e, %Y" }} {% else %}
<!-- Single-day event: Show only the start date -->
{{ event.date | date: "%a, %b %e, %Y" }} {% endif %}
</p>
<!-- Event Date Logic -->
<p class="text-sm text-gray-400 italic font-semibold">
{% if event.end_date %} {{ event.date | date: "%a, %b %e, %Y" }} -
{{ event.end_date | date: "%a, %b %e, %Y" }} {% else %} {{
event.date | date: "%a, %b %e, %Y" }} {% endif %}
</p>

<!-- Event Description with Show More/Show Less -->
<p class="text-sm my-2">
<!-- Shortened version of the description -->
<span class="event-description-short"
>{{ event.description | truncate: 120, "..." }}</span
>
<!-- Full description, hidden initially -->
<span class="event-description-full hidden"
>{{ event.description }}</span
>
<p class="text-sm my-2">
{{ event.description | truncate: 120, "..." }}
</p>
<p class="text-sm mb-1 text-gray-400 font-bold">
{{ event.participants }}
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div
class="hidden lg:grid w-full grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8"
>
{% for event in recent_events limit: 4 %}
<div
class="relative bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer"
>
<a href="{{ event.url }}" class="absolute inset-0 block"></a>
<div class="flex flex-col md:flex-row items-start md:items-center">
<!-- Event Image -->
<div class="md:w-1/3 w-full mb-4 md:mb-0">
<img
loading="lazy"
src="{{ event.thumbnail }}"
alt="{{ event.title }}"
class="w-full h-auto md:h-60 md:w-60 rounded-lg"
/>
</div>

<!-- Read More / Read Less buttons -->
<button class="text-blue-400 read-more relative z-10">
Read More
</button>
<button class="text-blue-400 read-less hidden relative z-10">
Show Less
</button>
</p>
<!-- Event Info -->
<div class="md:w-2/3 w-full md:pl-6">
<h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>

<p class="text-sm mb-1 text-gray-400 font-bold">
{{ event.participants }}
</p>
</div>
<!-- Event Date Logic -->
<p class="text-sm text-gray-400 italic font-semibold">
{% if event.end_date %} {{ event.date | date: "%a, %b %e, %Y" }} -
{{ event.end_date | date: "%a, %b %e, %Y" }} {% else %} {{
event.date | date: "%a, %b %e, %Y" }} {% endif %}
</p>

<p class="text-sm my-2">
{{ event.description | truncate: 120, "..." }}
</p>
<p class="text-sm mb-1 text-gray-400 font-bold">
{{ event.participants }}
</p>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}

<!-- See More Button -->
<div class="flex justify-center">
<div class="flex justify-center mt-8">
<a
href="/events/past-events"
class="text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] focus:ring-4 focus:outline-none focus:ring-[{{site.bg-colors.orange-button}}]/50 font-medium rounded-lg text-xs sm:text-sm md:text-base lg:text-lg px-4 sm:px-6 py-2 sm:py-3 text-center mb-2 dark:border-[{{site.bg-colors.orange-button}}] dark:text-[{{site.bg-colors.orange-button}}] dark:hover:text-white dark:hover:bg-[{{site.bg-colors.orange-button}}] dark:focus:ring-[{{site.bg-colors.orange-button}}]/80" data-aos="fade-up"
class="text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] font-medium rounded-lg text-base px-4 py-2"
data-aos="fade-up"
>
See More
</a>
Expand Down
33 changes: 4 additions & 29 deletions _layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,40 +48,15 @@
<!-- Club Banner Ends Here -->

<!-- Metrics Banner Starts Here -->
<!-- <section id="metrics-banner">
<div
class="w-full p-12 bg-[{{site.bg-colors.darkBlue}}] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-10 md:gap-40"
>
<div class="text-center text-[{{site.text-colors.white}}]">
<div class="text-6xl font-bold font-montserrat mb-2">50+</div>
<div class="text-2xl font-bold font-inter">Events Organized</div>
</div>

<div class="text-center text-[{{site.text-colors.white}}]">
<div class="text-6xl font-bold font-montserrat mb-2">500+</div>
<div class="text-2xl font-bold font-inter">Students Impacted</div>
</div>

<div class="text-center text-[{{site.text-colors.white}}]">
<div class="text-6xl font-bold font-montserrat mb-2">10+</div>
<div class="text-2xl font-bold font-inter">
Industry Collaborations
</div>
</div>

<div class="text-center text-[{{site.text-colors.white}}]">
<div class="text-6xl font-bold font-montserrat mb-2">100+</div>
<div class="text-2xl font-bold font-inter">Members & Alumni</div>
</div>
</div>
</section> -->

<section
id="metrics-banner"
class="relative w-full bg-[{{site.bg-colors.darkBlue}}]"
>
<!-- Carousel for mobile view -->
<div class="flex items-center lg:hidden overflow-hidden p-6">
<div
id="metrics-carousel"
class="flex items-center lg:hidden overflow-hidden p-6"
>
<div
class="carousel-wrapper flex transition-transform duration-500 ease-in-out w-full"
>
Expand Down
63 changes: 50 additions & 13 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,48 @@ document.addEventListener("DOMContentLoaded", function () {

let currentIndex = 0;

document.addEventListener("DOMContentLoaded", () => {
let currentIndex = 0;
// document.addEventListener("DOMContentLoaded", () => {
// let currentIndex = 0;

// window.moveSlide = function (direction) {
// const items = document.querySelectorAll(".carousel-item");
// const totalItems = items.length;

// // Update the current index
// currentIndex += direction;

// // Loop back to the start or end
// if (currentIndex < 0) {
// currentIndex = totalItems - 1;
// } else if (currentIndex >= totalItems) {
// currentIndex = 0;
// }

// // Calculate the translateX value
// const offset = -currentIndex * 100; // Adjust the offset based on the current index
// document.querySelector(
// ".carousel-wrapper"
// ).style.transform = `translateX(${offset}%)`;
// };

// // Optional: Auto-slide every 3 seconds
// setInterval(() => {
// moveSlide(1);
// }, 3000);
// });

window.moveSlide = function (direction) {
const items = document.querySelectorAll(".carousel-item");
document.addEventListener("DOMContentLoaded", () => {
// Function to move carousel slides for a specific carousel
window.moveSlide = function (direction, carouselId) {
const carouselWrapper = document.querySelector(
`#${carouselId} .carousel-wrapper`
);
const items = carouselWrapper.querySelectorAll(".carousel-item");
const totalItems = items.length;

// Update the current index
currentIndex += direction;
// Get the current index for each carousel separately
let currentIndex = carouselWrapper.getAttribute("data-current-index") || 0;
currentIndex = parseInt(currentIndex) + direction;

// Loop back to the start or end
if (currentIndex < 0) {
Expand All @@ -104,15 +137,19 @@ document.addEventListener("DOMContentLoaded", () => {
currentIndex = 0;
}

// Calculate the translateX value
const offset = -currentIndex * 100; // Adjust the offset based on the current index
document.querySelector(
".carousel-wrapper"
).style.transform = `translateX(${offset}%)`;
// Calculate the translateX value based on the current index
const offset = -currentIndex * 100;
carouselWrapper.style.transform = `translateX(${offset}%)`;

// Update the current index attribute
carouselWrapper.setAttribute("data-current-index", currentIndex);
};

// Optional: Auto-slide every 3 seconds
setInterval(() => {
moveSlide(1);
moveSlide(1, "metrics-carousel"); // Metrics Banner carousel
}, 3000);

setInterval(() => {
moveSlide(1, "recent-events-carousel"); // Recent Events carousel
}, 5000);
});