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

Made Carousel in the Events Psge Events #271

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Made Carousel in the Events Psge Events #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
031bd21
Made Carousel in the Events Psge Events
Ajayendra2705 Dec 1, 2024
780a723
updated the carousel
Ajayendra2705 Dec 2, 2024
919c14d
made the changes told. I added only the told edits till now. If I get…
Ajayendra2705 Dec 5, 2024
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
4 changes: 2 additions & 2 deletions npm-shrinkwrap.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

159 changes: 132 additions & 27 deletions templates/_event.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,31 @@
{% endblock %}

{% block customjs %}
<script>
let nextSlideTime = 2_000;

function nextSlide (slideshowContainer) {
const scrollPosition = document.documentElement.scrollTop ;
let activeSlide;
do {
activeSlide = slideshowContainer.firstChild;
slideshowContainer.removeChild(activeSlide);
slideshowContainer.append(activeSlide);
} while (activeSlide.nodeName !== 'DIV');
document.documentElement.scrollTop = scrollPosition;
nextSlideTime = 2_000;
};
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

window.addEventListener('load', () => {
const slideshowContainer = document.querySelector('.slideshow-container');
if (!slideshowContainer) return;
setInterval(() => {
nextSlideTime -= 25;
if (nextSlideTime < 0) nextSlide(slideshowContainer);
}, 25);
{# function checkForSlideChange () {
setTimeout(checkForSlideChange, 25);
};
checkForSlideChange(); #}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 3000,
},
effect: 'slide',
speed: 800,
slidesPerView: 1,
spaceBetween: 10,
});
});
</script>
{# <script>
window.addEventListener('load', () => {
[...document.querySelectorAll('.image-container')].forEach(imageContainer => {
Expand Down Expand Up @@ -160,6 +157,114 @@
left: 50%;
transform: translate(-50%, -50%);
}

.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}

.swiper-slide img {
height: 100%;
width: auto;
object-fit: cover;
}

.swiper-container {
width: 80vw;
height: 70vh;
max-width: 900px;
border-radius: 10px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
}

.image-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 20px auto;
width: 100%;
max-width: 900px;
overflow: hidden;
text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
color: black;
top: 50%;
z-index: 10;
padding : 7px 7px 7px 7px;
width: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 10px;
border-radius: 10%;
}

.swiper-button-next {
right: 10px;
height: 100px;
}

.swiper-button-prev {
left: 10px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 20px;
font-weight: bold;
color: var(--error-red);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #272727;
transform : scale(1.09);
}

@media (max-width: 768px) {
.swiper-container {
width: 90vw;
height: 50vh;
}
.swiper-button-next,
.swiper-button-prev {
width: 10px;
height: 10px;
top: 45%;
z-index:10;
}
.swiper-button-next {
margin-right:20px;
height:20px
width:20px;
}
.swiper-button-prev {
margin-left:20px;
}
.swiper-slide img {
height: 85%;
width: auto;
object-fit: contain;
display: block;
margin: auto;
align-items:center;
}
}
.swiper-pagination .swiper-pagination-bullet {
background-color: var(--error-red);
}
</style>
{% block eventCSS %}
{% endblock %}
Expand Down
55 changes: 40 additions & 15 deletions templates/event-articles/cosplay23.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,46 @@
The atmosphere was electric.<br/>
</p>
<div class="image-container">
<div class="slideshow-container">
{{ slide('cosplay23', 'ash_pika.jpg') }}
{# {{ slide('cosplay23', 'goku.jpg') }} #}
{{ slide('cosplay23', 'kitagawa.jpg') }}
{{ slide('cosplay23', 'levi.jpg') }}
{{ slide('cosplay23', 'luffy1.jpg') }}
{{ slide('cosplay23', 'luffy2.jpg') }}
{{ slide('cosplay23', 'luffy3.jpg') }}
{{ slide('cosplay23', 'naruto.jpg') }}
{{ slide('cosplay23', 'taki_mitsuha.jpg') }}
{{ slide('cosplay23', 'tanjiro.jpg') }}
{{ slide('cosplay23', 'yor_forger.jpg') }}
</div>
<p> Here are some cosplayers from that fabulous evening. </p>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/events/cosplay23/ash_pika.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/kitagawa.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/levi.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/luffy1.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/luffy2.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/luffy3.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/naruto.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/taki_mitsuha.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/tanjiro.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/cosplay23/yor_forger.jpg" alt="Anime Event Image 1">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<p>Here are some cosplayers from that fabulous evening.</p>
</div>

<h2>Highlights:</h2>
<p>
The cosplayers themselves were the highlight of the event. Cosplayers could be spotted, and attendees were glad to have their pictures taken with their favourite characters. Fans were excited to meet their favourite characters in person. The overall atmosphere of the event was very positive. Everyone was having a great time, and there was a lot of excitement in the air. The event was a great way for anime, manga, and video game fans to come together and celebrate their love of their hobbies.
Expand Down
29 changes: 21 additions & 8 deletions templates/event-articles/qatq.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,27 @@
</p>
<br>
<div class="image-container">
<div class="slideshow-container">
{{ slide('qatq', '4.jpg') }}
{{ slide('qatq', '1.jpg') }}
{{ slide('qatq', '2.jpg') }}
{{ slide('qatq', '3.jpg') }}
</div>
<p> Here are some images from the event </p>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/events/qatq/4.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/qatq/1.jpg" alt="Anime Event Image 2">
</div>
<div class="swiper-slide">
<img src="/assets/events/qatq/2.jpg" alt="Anime Event Image 3">
</div>
<div class="swiper-slide">
<img src="/assets/events/qatq/3.jpg" alt="Anime Event Image 4">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<p>Here are some images from the event</p>
</div>
<br>
<p>
Despite the last-minute venue changes and technical challenges, the organizers embraced their inner anime heroes, overcoming obstacles with unwavering enthusiasm.
Expand Down
29 changes: 21 additions & 8 deletions templates/event-articles/seekers-quest.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,27 @@
With this line of thought, we decided that it was time we let go of our online link and proceed with a completely offline event for teams. The <b>Anime Seekers' Quest</b> was a treasure hunt planned shortly after the <a href="/events/qatq" title="Quad Anime Trivia Quiz">Quad Anime Trivia Quiz</a>. Teams of upto 3 people spent 2 hours, using the clues provided and their anime knowledge (and Google... yes, we allowed it. ) around 2.2 covering various locations in a quest to claim their prizes from a treasure curated just for the anime fans.
</p>
<div class="image-container">
<div class="slideshow-container">
{{ slide('seekers-quest', '1.jpg') }}
{{ slide('seekers-quest', '2.jpg') }}
{{ slide('seekers-quest', '3.jpg') }}
{{ slide('seekers-quest', '4.jpg') }}
</div>
<p> Gallery of the winning teams </p>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/events/seekers-quest/1.jpg" alt="Anime Event Image 1">
</div>
<div class="swiper-slide">
<img src="/assets/events/seekers-quest/2.jpg" alt="Anime Event Image 2">
</div>
<div class="swiper-slide">
<img src="/assets/events/seekers-quest/3.jpg" alt="Anime Event Image 3">
</div>
<div class="swiper-slide">
<img src="/assets/events/seekers-quest/4.jpg" alt="Anime Event Image 4">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<p>Gallery of the winning teams</p>
</div>
<p>
With everything going on in the campus, we had a wonderful response from the participants. As the sun went down, the event ended as a beautiful success. We would like to congratulate those who won the event:
<ol style="padding: 5px calc(min(7vw, 60px));">
Expand Down
2 changes: 1 addition & 1 deletion test/site.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('Server', () => {
return assert(query?.name === 'MASK Society');
}).timeout(10_000);
});

console.log(PARAMS);
it('should have the right PARAMS object', () => assert.deepEqual(PARAMS, { test: true, discordless: true }));

pages.forEach(page => {
Expand Down
Loading