DGNum/Stirling-PDF
14
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Update: open dropdown on hover

Browse source
This commit is contained in:
Rectos VX 2024-05-08 20:21:07 +04:00
parent 1634987171
commit 72ba97a00c
2 changed files with 237 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/main/resources/static/css/navbar.css
View file

@ -277,3 +277,37 @@ span.icon-text::after {
.dropdown-mw-20 { .dropdown-mw-20 {
min-width: 200px; min-width: 200px;
} }
/* Dropdown open on hover */
.dropdown-menu {
padding-top: 0.5rem;
top: auto;
left: 0;
}
.dropdown-menu[data-bs-popper] {
top: auto;
left: 0;
margin-top: 0 !important;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu-wrapper {
padding: 1.5rem 0;
border-radius: 1rem;
color: var(--md-sys-color-on-surface);
background-color: var(--md-sys-color-surface-container);
border: 1px solid var(--md-sys-color-surface-5);
box-shadow: var(--md-sys-elevation-2);
}
.dropdown-menu-tp {
color: transparent;
background-color: transparent;
border: none;
box-shadow: none;
}

20
src/main/resources/templates/fragments/navbar.html
View file

@ -31,7 +31,8 @@
</span> </span>
<span class="icon-text" th:data-text="#{navbar.allTools}" th:text="#{navbar.allTools}"></span> <span class="icon-text" th:data-text="#{navbar.allTools}" th:text="#{navbar.allTools}"></span>
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown-1"> <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
<div class="dropdown-menu-wrapper">
<div class='mega-content px-md-4'> <div class='mega-content px-md-4'>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
@ -228,6 +229,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</li> </li>
@ -293,9 +295,11 @@
star star
</span> </span>
</a> </a>
<div class="dropdown-menu dropdown-mw-28 px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5"> <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" >
<!-- Dropdown items will be added here by JavaScript --> <!-- Dropdown items will be added here by JavaScript -->
</div> </div>
</div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="dark-mode-toggle" href="#"> <a class="nav-link" id="dark-mode-toggle" href="#">
@ -311,11 +315,13 @@
language language
</span> </span>
</a> </a>
<div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown"> <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
<div class="dropdown-menu-wrapper px-xl-2 px-2">
<div class="scrollable-y dropdown-mw-20"> <div class="scrollable-y dropdown-mw-20">
<th:block th:insert="~{fragments/languages :: langs}"></th:block> <th:block th:insert="~{fragments/languages :: langs}"></th:block>
</div> </div>
</div> </div>
</div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<!-- Settings Button --> <!-- Settings Button -->
@ -398,12 +404,12 @@
<label for="cacheInputs" th:text="#{settings.cacheInputs.name}"></label> <label for="cacheInputs" th:text="#{settings.cacheInputs.name}"></label>
</div> </div>
<a th:if="${@loginEnabled and @activSecurity}" href="account" class="btn btn-sm btn-outline-primary" role="button" <a th:if="${@loginEnabled and @activSecurity}" href="account" class="btn btn-sm btn-outline-primary"
th:text="#{settings.accountSettings}" target="_blank">Account Settings</a> role="button" th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a th:if="${@loginEnabled and @activSecurity}" class="btn btn-danger" role="button" th:text="#{settings.signOut}" <a th:if="${@loginEnabled and @activSecurity}" class="btn btn-danger" role="button"
href="logout">Sign Out</a> th:text="#{settings.signOut}" href="logout">Sign Out</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
</div> </div>
</div> </div>