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
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:
@@ -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>
|
||||||
|
<div class="quicks">
|
||||||
<button class="quick" type="button" onclick={selectAllDraft}>Alle</button>
|
<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;
|
||||||
|
|||||||
Reference in New Issue
Block a user