kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-09-21 20:30:12 +02:00
Code

Update: fix dropdown text wrap

Browse Source
This commit is contained in:
Rectos VX 2024-05-08 17:42:36 +04:00
parent 34e2128a39
commit 0f43723250
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/static/css/navbar.css
View File

@ -102,7 +102,7 @@
border-radius: 1rem; border-radius: 1rem;
} }
.icon + .icon { .icon+.icon {
margin-left: -4px; margin-left: -4px;
} }
@ -111,9 +111,14 @@
margin-right: 4px; margin-right: 4px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: space-between; justify-content: space-between;
text-decoration: none; vertical-align: middle;
}
.dropdown-item .icon-text {
text-wrap: wrap;
word-break: break-word;
width: 80%;
} }
span.icon-text::after { span.icon-text::after {
@ -151,8 +156,8 @@ span.icon-text::after {
transform: translateY(-2px); transform: translateY(-2px);
} }
.navbar-toggler{ .navbar-toggler {
color: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface-variant);
} }
.dropdown-menu.scrollable-y { .dropdown-menu.scrollable-y {
@ -263,3 +268,12 @@ color: var(--md-sys-color-on-surface-variant);
color: var(--md-nav-on-section-color-advance); color: var(--md-nav-on-section-color-advance);
background-color: var(--md-nav-section-color-advance); background-color: var(--md-nav-section-color-advance);
} }
/* Dropdown min-width */
.dropdown-mw-28 {
min-width: 280px;
}
.dropdown-mw-20 {
min-width: 200px;
}

4
src/main/resources/templates/fragments/navbar.html
View File

@ -293,7 +293,7 @@
star star
</span> </span>
</a> </a>
<div class="dropdown-menu px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5"> <div class="dropdown-menu dropdown-mw-28 px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
<!-- Dropdown items will be added here by JavaScript --> <!-- Dropdown items will be added here by JavaScript -->
</div> </div>
</li> </li>
@ -312,7 +312,7 @@
</span> </span>
</a> </a>
<div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown"> <div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown">
<div class="scrollable-y"> <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>