fix(filter): Hover füllt ganzen Button, Abbrechen links / OK rechts, Alle+Keine
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s

- Trigger nimmt volle Höhe des .search-box-Containers ein
  (align-self: stretch, min-height: 0), damit der Hover-Hintergrund
  bündig ausgefüllt wird statt nur innerhalb eines 44px-Rechtecks.
- Footer: justify-content: space-between — Abbrechen sitzt jetzt links,
  OK rechts (übliche Platform-Konvention).
- Quick-Actions: zusätzlicher „Keine"-Button neben „Alle", beide setzen
  den Draft-State ohne sofortigen Commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 08:49:57 +02:00
parent d1ddd51da1
commit ab2acb6437

View File

@@ -77,6 +77,10 @@
function selectAllDraft() { function selectAllDraft() {
draft = new Set(searchFilterStore.domains.map((d) => d.domain)); draft = new Set(searchFilterStore.domains.map((d) => d.domain));
} }
function selectNoneDraft() {
draft = new Set();
}
</script> </script>
<div class="wrap" bind:this={container}> <div class="wrap" bind:this={container}>
@@ -98,7 +102,10 @@
<div class="menu" role="menu"> <div class="menu" role="menu">
<div class="menu-head"> <div class="menu-head">
<span class="head-title">Gefunden auf</span> <span class="head-title">Gefunden auf</span>
<button class="quick" type="button" onclick={selectAllDraft}>Alle</button> <div class="quicks">
<button class="quick" type="button" onclick={selectAllDraft}>Alle</button>
<button class="quick" type="button" onclick={selectNoneDraft}>Keine</button>
</div>
</div> </div>
{#if searchFilterStore.domains.length === 0} {#if searchFilterStore.domains.length === 0}
<p class="empty">Keine Domains in der Whitelist.</p> <p class="empty">Keine Domains in der Whitelist.</p>
@@ -169,13 +176,19 @@
border-color: #2b6a3d; border-color: #2b6a3d;
} }
/* In der Suchmaske: kein eigener Rahmen/Hintergrund, der Container drumherum /* In der Suchmaske: kein eigener Rahmen/Hintergrund, der Container drumherum
trägt die visuelle Form. */ trägt die visuelle Form. Hover füllt die volle Container-Höhe. */
.trigger.inline { .trigger.inline {
background: transparent; background: transparent;
border: 0; border: 0;
border-right: 1px solid #e4eae7; border-right: 1px solid #e4eae7;
border-radius: 0; border-radius: 0;
padding: 0.5rem 0.85rem 0.5rem 0.65rem; padding: 0 0.85rem 0 0.65rem;
align-self: stretch;
min-height: 0;
}
.trigger.inline:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
} }
.trigger.inline.filtered { .trigger.inline.filtered {
background: transparent; background: transparent;
@@ -294,11 +307,15 @@
.menu-foot { .menu-foot {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
justify-content: flex-end; justify-content: space-between;
padding: 0.6rem 0.5rem 0.35rem; padding: 0.6rem 0.5rem 0.35rem;
border-top: 1px solid #f0f3f1; border-top: 1px solid #f0f3f1;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.quicks {
display: inline-flex;
gap: 0.25rem;
}
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;