Skip to content

fix: improve navbar responsiveness and layout across all devices (closes #512) #524

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
singhanurag0317-bit wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve navbar responsiveness and layout across all devices (closes #512) #524

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
1 change: 1 addition & 0 deletions app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ def make_session_permanent():

# ✅ Portable DB path (works on Windows/Linux/Vercel)
DB_PATH = os.path.join(os.path.dirname(__file__), "ams.db")
app.config["DB_PATH"] = DB_PATH

# Define upload folder path for certificates
UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static", "uploads")
Expand Down
70 changes: 52 additions & 18 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,31 @@ body {
transition: 0.3s;
}

.nav-right {
display: flex;
align-items: center;
gap: 1rem;
}

.navbar .nav-right {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
}

.nav-toggle.active .bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active .bar:nth-child(2) {
opacity: 0;
}

.nav-toggle.active .bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}

/* Header offset to account for fixed navbar */
.header {
height: 140px;
Expand Down Expand Up @@ -833,15 +858,12 @@ body {
}
}

@media (max-width: 768px) {
@media (max-width: 992px) {
.navbar {
flex-direction: row;
/* Restore row layout for mobile */
justify-content: space-between;
height: 80px;
/* Restore original mobile height */
padding: 1rem 70px 1rem 1rem;
/* Increase right padding to clear fixed toggle */
padding: 0 2rem;
align-items: center;
}

Expand All @@ -853,18 +875,41 @@ body {
margin-top: 80px;
}

.nav-brand {
width: auto;
text-align: left;
}

.navbar .nav-right {
position: static;
transform: none;
display: flex;
align-items: center;
gap: 1.5rem;
}

.theme-toggle {
width: 42px;
height: 42px;
font-size: 1.2rem;
}

.nav-menu {
position: fixed;
left: -100%;
top: 80px;
/* Match header height */
height: calc(100vh - 80px);
max-height: calc(100vh - 80px);
overflow-y: auto;
flex-direction: column;
background-color: var(--bg-color);
width: 100%;
text-align: center;
transition: 0.3s;
transition: left 0.3s ease-in-out;
padding: 2rem;
gap: 1.5rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
border-top: 1px solid var(--border-color);
}

.nav-menu.active {
Expand All @@ -875,17 +920,6 @@ body {
display: flex;
}

.toggle-container {
top: 15px;
right: 15px;
}

.theme-toggle {
width: 45px;
height: 45px;
font-size: 1.3rem;
}

.hero {
min-height: 80vh;
padding: 0 1rem;
Expand Down
41 changes: 22 additions & 19 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@ <h2>Achievement Management System</h2>
{% endif %}
<li><a href="#FAQ">FAQ</a></li>
</ul>
<div class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<div class="nav-right">
<button id="mode-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
<div class="nav-toggle" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
</header>
Expand Down Expand Up @@ -105,10 +108,7 @@ <h3 id="footer-contact-heading">Contact</h3>
</div>
</footer>

<!-- Theme Toggle Button -->
<div class="toggle-container">
<button id="mode-toggle" class="theme-toggle">🌙</button>
</div>


<!--Scroll to Up button-->
<button id="scrollTopBtn" aria-label="Scroll to top" title="Scroll to top">↑</button>
Expand Down Expand Up @@ -169,18 +169,21 @@ <h3 id="footer-contact-heading">Contact</h3>
});

// Mobile menu toggle
document
.querySelector(".nav-toggle")
.addEventListener("click", function () {
document.querySelector(".nav-menu").classList.toggle("active");
});
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

// Close mobile menu when a link is clicked
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
document.querySelector('.nav-menu').classList.remove('active');
});
});
navToggle.addEventListener("click", function () {
navMenu.classList.toggle("active");
navToggle.classList.toggle("active");
});

// Close mobile menu when a link is clicked
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
navToggle.classList.remove('active');
});
});

// Scroll-to-top button logic
const scrollBtn = document.getElementById("scrollTopBtn");
Expand Down
Loading
⚡