Added Events Hub in navbar with ripple effect by DevanshSharma351 · Pull Request #290 · IEEE-NITK/corpus

DevanshSharma351 · 2025-12-23T12:51:47Z

Description

I added the Events hub access to the events dropdown from the nav bar. Also to make it eye-catching I added ripple effect to it, it would redirect to the what's new page of events. Resources -Google for ripple effect

Fixes # (issue)

Dependencies

N/A
List any dependencies that are required for this change.
N/A

Type of Change

What types of changes does your code introduce?
Put an x in the boxes that apply

New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Added the new list element and fixed up the broken CSS due to the ripple effect eventually after testing all CSS was working fine
Put an x in the boxes that apply

Test A
Test B

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

My code follows the style guidelines of this project
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

Screen.Recording.2025-12-24.at.10.50.20.PM.mov

Copilot

Pull request overview

This PR adds an "Events Hub" link as the first item in the Events dropdown menu in the navbar. The link includes a visually distinctive wave animation effect where each letter animates independently, intended to draw user attention to the main events page.

Key Changes:

Added a new navigation link labeled "Events Hub" that redirects to the newsletter home page
Implemented a wave animation effect using character-by-character span elements with CSS custom properties
Added inline CSS styles for the animation directly in the template

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-23T12:54:43Z

corpus/templates/components/navbar_list.html

+    .wave-text span {
+        display: inline-block;
+        animation: wave 4s ease-in-out infinite;
+        animation-delay: calc(.1s * var(--i));
+        font-weight: 800;
+    }
+    .events-hub-link:hover .wave-text span {
+        animation: wave 2.5s ease-in-out infinite;
+        animation-delay: calc(.08s * var(--i));
+    }
+    @keyframes wave {
+        0%, 30%, 100% { transform: translateY(0); }
+        15% { transform: translateY(-12px); }
+    }


The wave animation runs continuously (infinite) for all users, which can be distracting and problematic for users with vestibular disorders or motion sensitivity. Consider respecting the user's motion preferences by adding a CSS media query to disable animations when users have prefers-reduced-motion enabled. Additionally, the animation should ideally only trigger on hover or focus rather than running infinitely by default.

Copilot · 2025-12-23T12:54:43Z

corpus/templates/components/navbar_list.html

+                    <span class="wave-text">
+                        <span style="--i:0">E</span><span style="--i:1">v</span><span style="--i:2">e</span><span style="--i:3">n</span><span style="--i:4">t</span><span style="--i:5">s</span><span style="--i:6">&nbsp;</span><span style="--i:7">H</span><span style="--i:8">u</span><span style="--i:9">b</span>


Splitting each character into individual span elements with inline styles creates significant HTML bloat and reduces maintainability. The text "Events Hub" is hard-coded character by character with CSS custom properties, making it difficult to update the text or reuse this pattern. Consider using a JavaScript solution or CSS that applies to the text as a whole, or at minimum, generate these spans dynamically if this pattern needs to be reused.

Copilot · 2025-12-23T12:54:44Z

corpus/templates/components/navbar_list.html

+        animation: wave 4s ease-in-out infinite;
+        animation-delay: calc(.1s * var(--i));
+        font-weight: 800;
+    }
+    .events-hub-link:hover .wave-text span {


The continuously running animation on multiple DOM elements causes unnecessary repaints and reflows, impacting page performance. This is especially noticeable on lower-end devices or when multiple dropdown menus are open. Consider removing the default infinite animation and only applying the wave effect on user interaction (hover/focus).

Suggested change

animation: wave 4s ease-in-out infinite;

animation-delay: calc(.1s * var(--i));

font-weight: 800;

}

.events-hub-link:hover .wave-text span {

font-weight: 800;

}

.events-hub-link:hover .wave-text span,

.events-hub-link:focus-visible .wave-text span {

Copilot · 2025-12-23T12:54:44Z

corpus/templates/components/navbar_list.html

+<style>
+    .wave-text { display: inline-flex; font-weight: bold; }
+    .wave-text span {
+        display: inline-block;
+        animation: wave 4s ease-in-out infinite;
+        animation-delay: calc(.1s * var(--i));
+        font-weight: 800;
+    }
+    .events-hub-link:hover .wave-text span {
+        animation: wave 2.5s ease-in-out infinite;
+        animation-delay: calc(.08s * var(--i));
+    }
+    @keyframes wave {
+        0%, 30%, 100% { transform: translateY(0); }
+        15% { transform: translateY(-12px); }
+    }
+</style>
+


The CSS styles should be moved to the existing navbar.css file instead of being embedded in the template. This follows the project's existing pattern where navbar-related styles are centralized in corpus/templates/static/css/navbar.css, improving maintainability and separation of concerns.

Suggested change

<style>

.wave-text { display: inline-flex; font-weight: bold; }

.wave-text span {

display: inline-block;

animation: wave 4s ease-in-out infinite;

animation-delay: calc(.1s * var(--i));

font-weight: 800;

}

.events-hub-link:hover .wave-text span {

animation: wave 2.5s ease-in-out infinite;

animation-delay: calc(.08s * var(--i));

}

@keyframes wave {

0%, 30%, 100% { transform: translateY(0); }

15% { transform: translateY(-12px); }

}

</style>

CodePokeX · 2025-12-25T05:15:19Z

The color fill when not hovered upon is blending with the bg, make it a darker shade so it is more visible

DevanshSharma351 · 2025-12-31T05:07:48Z

Okay, now in the later commit I have increased the density of both the colour effects when duller in the unhovered state so it does not mix with their bg , also i removed the 2 colours switching when hovered as keeping it plain make it more professional.

Screen.Recording.2025-12-31.at.10.45.52.AM.mov

…palette to make it look more professional

Added Events Hub in navbar with ripple effect

e3f41e5

Copilot AI review requested due to automatic review settings December 23, 2025 12:51

Copilot started reviewing on behalf of DevanshSharma351 December 23, 2025 12:52 View session

Copilot AI reviewed Dec 23, 2025

View reviewed changes

Made changes to the colour pallete and animation in Events Hub

76df791

Increase the unhovered coloured density and removed the multi colour …

4260cbb

…palette to make it look more professional

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Events Hub in navbar with ripple effect#290

Added Events Hub in navbar with ripple effect#290
DevanshSharma351 wants to merge 3 commits intoIEEE-NITK:mainfrom
DevanshSharma351:feature/events-management-navbar

DevanshSharma351 commented Dec 23, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

CodePokeX commented Dec 25, 2025

Uh oh!

DevanshSharma351 commented Dec 31, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		<span class="wave-text">
		<span style="--i:0">E</span><span style="--i:1">v</span><span style="--i:2">e</span><span style="--i:3">n</span><span style="--i:4">t</span><span style="--i:5">s</span><span style="--i:6"> </span><span style="--i:7">H</span><span style="--i:8">u</span><span style="--i:9">b</span>

Conversation

DevanshSharma351 commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Type of Change

How Has This Been Tested?

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

CodePokeX commented Dec 25, 2025

Uh oh!

DevanshSharma351 commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DevanshSharma351 commented Dec 23, 2025 •

edited

Loading

DevanshSharma351 commented Dec 31, 2025 •

edited

Loading