Fix responsive navbar overlapping content on smaller screens
Added dynamic padding adjustment that measures the actual navbar height and applies it to the main content padding-top. This prevents the navbar from overlapping page content when it becomes taller on narrow screens. Changes: - Removed fixed padding-top: 80px from main content - Added id="main-content" to main element for JavaScript targeting - Added JavaScript function that measures navbar.offsetHeight - Function applies dynamic padding-top with 20px buffer for spacing - Triggers on: page load, window load, window resize (debounced), navbar collapse toggle - Includes fallback to 80px if measurement fails - Updated changelog Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
26848998e1
commit
9197c311f2
@ -197,7 +197,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="{% block main_class %}container content-container{% endblock %}" style="padding-top: 80px;">
|
<main class="{% block main_class %}container content-container{% endblock %}" id="main-content">
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||||
{% if messages %}
|
{% if messages %}
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
@ -216,6 +216,58 @@
|
|||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Dynamic navbar height adjustment
|
||||||
|
(function () {
|
||||||
|
function adjustContentPadding() {
|
||||||
|
try {
|
||||||
|
var navbar = document.querySelector('.navbar.fixed-top');
|
||||||
|
var mainContent = document.getElementById('main-content');
|
||||||
|
if (!navbar || !mainContent) return;
|
||||||
|
|
||||||
|
// Get actual navbar height
|
||||||
|
var navbarHeight = navbar.offsetHeight;
|
||||||
|
|
||||||
|
// Add small buffer (20px) for visual spacing
|
||||||
|
var paddingTop = navbarHeight + 20;
|
||||||
|
|
||||||
|
// Apply padding to main content
|
||||||
|
mainContent.style.paddingTop = paddingTop + 'px';
|
||||||
|
} catch (e) {
|
||||||
|
// Fallback to 80px if something goes wrong
|
||||||
|
var mainContent = document.getElementById('main-content');
|
||||||
|
if (mainContent) {
|
||||||
|
mainContent.style.paddingTop = '80px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run on page load
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', adjustContentPadding);
|
||||||
|
} else {
|
||||||
|
adjustContentPadding();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run after navbar is fully rendered
|
||||||
|
window.addEventListener('load', adjustContentPadding);
|
||||||
|
|
||||||
|
// Run on window resize
|
||||||
|
var resizeTimeout;
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(adjustContentPadding, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Run when navbar collapse is toggled
|
||||||
|
var navbarCollapse = document.getElementById('navbarNav');
|
||||||
|
if (navbarCollapse) {
|
||||||
|
navbarCollapse.addEventListener('shown.bs.collapse', adjustContentPadding);
|
||||||
|
navbarCollapse.addEventListener('hidden.bs.collapse', adjustContentPadding);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
function isOverflowing(el) {
|
function isOverflowing(el) {
|
||||||
|
|||||||
@ -14,6 +14,7 @@ This file documents all changes made to this project via Claude Code.
|
|||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
- Fixed Autotask ticket description being set to NULL when resolving tickets via `update_ticket_resolution_safe` by adding "description" to the optional_fields list, ensuring the original description is preserved during PUT operations
|
- Fixed Autotask ticket description being set to NULL when resolving tickets via `update_ticket_resolution_safe` by adding "description" to the optional_fields list, ensuring the original description is preserved during PUT operations
|
||||||
|
- Fixed responsive navbar overlapping page content on smaller screens by implementing dynamic padding adjustment (JavaScript measures actual navbar height and adjusts main content padding-top automatically on page load, window resize, and navbar collapse toggle events)
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
- Updated `docs/changelog.md` with comprehensive v0.1.23 release notes consolidating all changes from 2026-02-06 through 2026-02-08 (Documentation System, Audit Logging, Timezone-Aware Display, Autotask Improvements, Environment Identification, Bug Fixes)
|
- Updated `docs/changelog.md` with comprehensive v0.1.23 release notes consolidating all changes from 2026-02-06 through 2026-02-08 (Documentation System, Audit Logging, Timezone-Aware Display, Autotask Improvements, Environment Identification, Bug Fixes)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user