vole
Clone
Read only, no credentials:
https://rodent.software/vole.git
Write over SSH with a registered key:
git clone ssh://git@rodent.software:2222/vole.git
A free and open-source forge that lives in your Git repo.
Put each repository tab's filters and search on one row
6c98a2711993b1fec51af785e9ad28ced0518bf3 · Keenan Nemetz · 10d ago · parent 20442b59
Put each repository tab's filters and search on one row The filter controls had grown into two rows on the pages that also had state chips: the chips sat above, the search and dropdowns below. Where the search sat also depended on the page, so moving from issues to changes to code changed the order of the same controls. Every filter row now reads left to right: chips and labelled dropdowns on the left, the search group on the right, with the clear action in the same right group on pages that have no text search. The chips moved inside the form on issues, changes and activity so a search keeps the chosen state or kind, and an htmx swap replaces the whole row with the values the server rendered. The row is one `.filters` element with a `.filters-search` group, so code search and the global search page use the same shape rather than a second one. On a phone the row stacks and the search stays on one line with its button.
server/web/static/vole.css +18
| @@ -599,6 +599,18 @@ label > select { width: 100%; max-width: 34rem; } | |||
| 599 | 599 | align-items: center; | |
| 600 | 600 | gap: 8px; | |
| 601 | 601 | } | |
| 602 | /* Every row reads left to right: filters, then search. The search group takes | ||
| 603 | the leftover space, so it sits against the right edge whether the row is one | ||
| 604 | page's chips and two selects or another page's ref pickers. A row with no | ||
| 605 | search puts its clear action in the same slot. */ | ||
| 606 | .filters-search { | ||
| 607 | display: flex; | ||
| 608 | align-items: center; | ||
| 609 | gap: 8px; | ||
| 610 | margin-left: auto; | ||
| 611 | } | ||
| 612 | /* Inside the row the chips are one group, not a row with its own margins. */ | ||
| 613 | .filters .chips { margin: 0; } | ||
| 602 | 614 | .filters input[type="text"], | |
| 603 | 615 | .filters input[type="search"] { width: var(--search-w); max-width: 100%; } | |
| 604 | 616 | /* A label and its control stay on one line when the filter row wraps. */ | |
| @@ -622,6 +634,12 @@ label > select { width: 100%; max-width: 34rem; } | |||
| 622 | 634 | .filters form { flex-direction: column; align-items: stretch; } | |
| 623 | 635 | .filters input[type="text"], | |
| 624 | 636 | .filters input[type="search"] { width: 100%; } | |
| 637 | .filters-search { margin-left: 0; width: 100%; } | ||
| 638 | /* The search stays one line on a phone: a full-width field and its button, | ||
| 639 | not the stacked label/control shape the ref pickers need. */ | ||
| 640 | .filters-search form { flex-direction: row; align-items: center; } | ||
| 641 | .filters-search input[type="text"], | ||
| 642 | .filters-search input[type="search"] { flex: 1 1 auto; width: auto; } | ||
| 625 | 643 | /* A phone stacks the label above its control: a label and an 18rem select | |
| 626 | 644 | cannot share a 20rem-wide row without the control overflowing it. */ | |
| 627 | 645 | .filter-field { flex-direction: column; align-items: stretch; gap: 4px; } | |