falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: bulk bar — two-row layout, better contrast, controls only when active

Browse Source
This commit is contained in:
Falkan
2026-03-17 16:14:37 -04:00
parent ac6af9e90d
commit 10d94d676b
2 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/routes/admin/+page.svelte
View File

@@ -270,41 +270,44 @@
<aside class="admin-tree">
<!-- Persistent bulk-action bar -->
<div class="bulk-bar">
<span class="bulk-count">
<div class="bulk-bar" class:bulk-bar--active={checkedUnitIds.size > 0}>
<div class="bulk-bar-row1">
<span class="bulk-count">
{#if checkedUnitIds.size > 0}
<strong>{checkedUnitIds.size}</strong> unit{checkedUnitIds.size === 1 ? '' : 's'} selected
{:else}
No units selected
{/if}
</span>
{#if checkedUnitIds.size > 0}
{checkedUnitIds.size} selected
{:else}
0 selected
{/if}
</span>
<div class="bulk-controls">
<select
bind:value={bulkAction}
disabled={checkedUnitIds.size === 0}
aria-label="Bulk action"
>
<option value="">Action…</option>
<option value="move">Move to group</option>
</select>
{#if bulkAction === 'move'}
<select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
<option value="">Group…</option>
{#each unitsData.groups as g}
<option value={g.id}>{g.label}</option>
{/each}
<option value="__orphan__">Ungrouped</option>
</select>
{/if}
<button
class="bulk-go"
disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
onclick={executeBulkAction}
>Go</button>
{#if checkedUnitIds.size > 0}
<button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">✕</button>
<button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">Clear</button>
{/if}
</div>
{#if checkedUnitIds.size > 0}
<div class="bulk-controls">
<select
bind:value={bulkAction}
aria-label="Bulk action"
>
<option value="">Action…</option>
<option value="move">Move to group</option>
</select>
{#if bulkAction === 'move'}
<select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
<option value="">Group…</option>
{#each unitsData.groups as g}
<option value={g.id}>{g.label}</option>
{/each}
<option value="__orphan__">Ungrouped</option>
</select>
{/if}
<button
class="bulk-go"
disabled={!bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
onclick={executeBulkAction}
>Apply</button>
</div>
{/if}
</div>
<!-- Group tree -->
@@ -592,46 +595,54 @@
/* Persistent bulk-action bar */
.bulk-bar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-direction: column;
gap: 0.35rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--pico-card-border-color);
background: var(--pico-secondary-background, rgba(0,0,0,0.03));
min-height: 2.75rem;
background: var(--pico-card-background-color, #fff);
}
.bulk-bar--active {
background: var(--pico-primary-background, #e8f0fe);
border-bottom-color: var(--pico-primary-border, #c0cff8);
}
.bulk-bar-row1 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.bulk-count {
font-size: 0.8rem;
color: var(--pico-muted-color);
font-size: 0.82rem;
color: var(--pico-color);
white-space: nowrap;
min-width: 5rem;
}
.bulk-controls {
display: flex;
align-items: center;
gap: 0.35rem;
flex: 1;
}
.bulk-controls select {
flex: 1;
min-width: 0;
padding: 0.2rem 0.4rem;
font-size: 0.8rem;
font-size: 0.82rem;
margin: 0;
height: 2rem;
}
.bulk-go {
padding: 0.2rem 0.6rem;
font-size: 0.8rem;
padding: 0.2rem 0.7rem;
font-size: 0.82rem;
margin: 0;
white-space: nowrap;
height: 2rem;
}
.bulk-clear {
font-size: 0.75rem;
color: var(--pico-muted-color);
padding: 0.15rem 0.3rem;
font-size: 0.78rem;
color: var(--pico-primary);
padding: 0;
white-space: nowrap;
}
.bulk-clear:hover { color: var(--pico-color); }
.bulk-clear:hover { text-decoration: underline; }
/* Tree groups */
.tree-group {