mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-09-13 04:08:22 +02:00
Nav Bar Fixes for Mobile Devices (#3927)
# Description of Changes <!-- Please provide a summary of the changes, including: - Nav bar was changed to be more responsive to mobile - DPR was disabled on mobile devices < 1200 pixels wide - Chevron up/down icons added to collapsable menu items on mobile - I changes bg-card styling to add a liltle bit of a margin to the bg-card components on mobile. - Changed from hover to open -> click to open on nav bar items, I feel this is more intuitive, let me know what you think Closes #(issue_number) --> --- ## Checklist ### General - [x ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ x] I have performed a self-review of my own code - [ x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Ethan <[email protected]>
This commit is contained in:
EthanHealy01
Ethan
@@ -29,8 +29,40 @@
|
||||
|
||||
// Determine if this is actually a high DPI screen at page load
|
||||
const isHighDPI = systemDPR > 1.4;
|
||||
|
||||
// Reset all navbar and dropdown scaling styles
|
||||
function resetNavScaling() {
|
||||
const navbarElement = document.querySelector('.navbar');
|
||||
if (navbarElement) {
|
||||
navbarElement.style.transform = '';
|
||||
navbarElement.style.transformOrigin = '';
|
||||
navbarElement.style.width = '';
|
||||
navbarElement.style.left = '';
|
||||
navbarElement.style.right = '';
|
||||
navbarElement.style.marginBottom = '';
|
||||
navbarElement.classList.remove('navbar-expand-lg');
|
||||
navbarElement.classList.remove('navbar-expand-xl');
|
||||
}
|
||||
// Reset dropdown scaling
|
||||
const dropdowns = document.querySelectorAll('.dropdown-menu');
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.style.transform = '';
|
||||
dropdown.style.transformOrigin = '';
|
||||
});
|
||||
// Reset CSS custom property
|
||||
document.documentElement.style.setProperty('--navbar-height', '');
|
||||
}
|
||||
|
||||
function scaleNav() {
|
||||
resetNavScaling();
|
||||
if (window.innerWidth < 1200) {
|
||||
const navbarElement = document.querySelector('.navbar');
|
||||
if (navbarElement) {
|
||||
navbarElement.classList.remove('navbar-expand-lg');
|
||||
navbarElement.classList.add('navbar-expand-xl');
|
||||
}
|
||||
return;
|
||||
}
|
||||
const currentDPR = window.devicePixelRatio || 1;
|
||||
const browserZoom = currentDPR / systemDPR;
|
||||
|
||||
|
||||
@@ -45,9 +45,10 @@
|
||||
apps
|
||||
</span>
|
||||
<span class="icon-text" th:data-text="#{navbar.allTools}" th:text="#{navbar.allTools}"></span>
|
||||
<span class="material-symbols-rounded chevron-icon">expand_more</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
|
||||
<div class="dropdown-menu-wrapper" style="justify-content: center; display:flex">
|
||||
<div class="dropdown-menu-wrapper scroll-lock-y" style="max-width: 95vw !important;">
|
||||
<div class="feature-rows">
|
||||
|
||||
<th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
|
||||
@@ -117,9 +118,10 @@
|
||||
star
|
||||
</span>
|
||||
<span class="icon-text icon-hide" th:data-text="#{navbar.favorite}" th:text="#{navbar.favorite}"></span>
|
||||
<span class="material-symbols-rounded chevron-icon">expand_more</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-tp dropdown-mw-28" aria-labelledby="navbarDropdown-5">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2" id="favoritesDropdown">
|
||||
<div class="dropdown-menu dropdown-menu-tp dropdown-mw-28" role="menu" aria-labelledby="navbarDropdown-5">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" id="favoritesDropdown" style="max-width: 95vw !important; ">
|
||||
<!-- Dropdown items will be added here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,9 +142,10 @@
|
||||
language
|
||||
</span>
|
||||
<span class="icon-text icon-hide" th:data-text="#{navbar.language}" th:text="#{navbar.language}"></span>
|
||||
<span class="material-symbols-rounded chevron-icon">expand_more</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" style="max-width: 95vw !important;">
|
||||
<div id="languageSelection" class="scrollable-y lang_dropdown-mw scalable-languages-container">
|
||||
<th:block th:insert="~{fragments/languages :: langs}"></th:block>
|
||||
</div>
|
||||
@@ -157,15 +160,16 @@
|
||||
search
|
||||
</span>
|
||||
<span class="icon-text icon-hide">Search</span>
|
||||
<span class="material-symbols-rounded chevron-icon">expand_more</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="searchDropdown">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2">
|
||||
<div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" style="max-width: 95vw !important;">
|
||||
<form th:action="@{''}" class="d-flex p-2 search-form" id="searchForm">
|
||||
<input class="form-control search-input" type="search" th:placeholder="#{navbar.search}"
|
||||
aria-label="Search" id="navbarSearchInput">
|
||||
</form>
|
||||
<!-- Search Results -->
|
||||
<div id="searchResults" class="search-results scrollable-y dropdown-mw-20"></div>
|
||||
<div id="searchResults" class="search-results scroll-lock-y dropdown-mw-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -30,10 +30,6 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<meta name="google" content="notranslate">
|
||||
<title>PDF.js viewer</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
|
||||
<script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
|
||||
|
||||
<link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
|
||||
<link rel="stylesheet" th:href="@{'/css/navbar.css'}">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user