luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update dropdown styling

Browse Source
This commit is contained in:
luxick
2026-05-08 09:56:30 +02:00
parent 5a015d438b
commit 60ef401427
3 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/diary/calendar.html
+4 -4
View File
@@ -4,15 +4,15 @@
<a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a> <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
<div class="dropdown diary-cal-drop"> <div class="dropdown diary-cal-drop">
<button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button> <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu scrollable">
{{range .AllMonths}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}} {{range .AllMonths}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
</div> </div>
</div> </div>
<a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a> <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
<div class="dropdown diary-cal-drop"> <div class="dropdown diary-cal-drop">
<button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button> <button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button>
<div class="dropdown-menu align-right"> <div class="dropdown-menu align-right scrollable">
{{range .Years}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}} {{range .Years}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
</div> </div>
</div> </div>
</div> </div>
assets/diary/calendar.js
+1 -1
View File
@@ -18,7 +18,7 @@
main.parentNode.insertBefore(cal, main); main.parentNode.insertBefore(cal, main);
} }
cal.querySelectorAll(".diary-cal-drop > button").forEach(wireDropdown); cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
var pageHeader = document.querySelector("header"); var pageHeader = document.querySelector("header");
function updateTop() { function updateTop() {
assets/style.css
+10 -8
View File
@@ -335,6 +335,11 @@ main > h2 {
display: block; display: block;
} }
.dropdown-menu.scrollable {
max-height: 14rem;
overflow-y: auto;
}
/* === Floating action button === */ /* === Floating action button === */
.fab { .fab {
position: fixed; position: fixed;
@@ -364,13 +369,15 @@ main > h2 {
} }
.dropdown-item { .dropdown-item {
display: block; display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%; width: 100%;
text-align: left;
border: none; border: none;
border-radius: 0; border-radius: 0;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box;
} }
/* === Edit form === */ /* === Edit form === */
@@ -795,12 +802,7 @@ hr {
color: var(--primary-hover); color: var(--primary-hover);
} }
.diary-cal-drop .dropdown-menu { .dropdown-item.cal-current {
max-height: 14rem;
overflow-y: auto;
}
.diary-cal-drop .dropdown-item.cal-current {
color: var(--primary-hover); color: var(--primary-hover);
} }