mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2026-09-27 09:40:17 +01:00
Fatih Emre
ab96d78f4d
The Custom Locations tab rendered every location fully expanded, which becomes unusable once a host has more than a handful of them. Each row is now a collapsible card showing its path and forward target, collapsed by default, with the Add Location button moved to the top so it stays reachable without scrolling to the end of the list. A filter appears once there are five or more locations and matches on the path as well as the forward scheme, host and port. New locations are still appended to the end of the list, so the generated nginx config is unchanged. Also fixes two existing issues in this component: the per-location inputs shared the same DOM ids across rows, and the advanced-config toggle state was keyed by array index, so removing a location moved it onto the wrong row.
52 lines
1.2 KiB
CSS
52 lines
1.2 KiB
CSS
/* card-active points --tblr-card-border-color at --tblr-primary, which both the
|
|
card outline and the card header's bottom border are drawn from. Tabler's
|
|
stylesheet is loaded after this one, so the override needs !important. */
|
|
.locationCard {
|
|
--tblr-card-border-color: light-dark(var(--tblr-gray-200), var(--tblr-gray-700)) !important;
|
|
}
|
|
|
|
.filter {
|
|
max-width: 20rem;
|
|
}
|
|
|
|
/* The header is a plain toggle rather than a button-styled control, so that a
|
|
list of collapsed locations reads as rows instead of a stack of buttons. */
|
|
.toggle {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-self: stretch;
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.toggle:focus-visible {
|
|
outline: 2px solid var(--tblr-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Keeps the marker on one line next to the delete button, and lets it drop out
|
|
of the way before the path does when the row runs out of room. */
|
|
.marker {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.path {
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.summary {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|