A focused Docker Compose management web application.
feat: keybind indicator
+29
-1
+16
packages/panel/src/lib/style.scss
+16
packages/panel/src/lib/style.scss
···
199
199
font-size: 14px;
200
200
color: var(--subtext0);
201
201
}
202
+
203
+
.keybind {
204
+
border: 1px solid var(--subtext0);
205
+
background-color: transparent;
206
+
display: inline-block;
207
+
border-radius: 5px;
208
+
padding: 2px 5px;
209
+
210
+
height: fit-content;
211
+
width: fit-content;
212
+
213
+
font-family: "DejaVu Mono", monospace;
214
+
text-transform: uppercase;
215
+
color: var(--subtext0);
216
+
font-size: 10px;
217
+
}
+13
-1
packages/panel/src/routes/(authenticated)/projects/+page.svelte
+13
-1
packages/panel/src/routes/(authenticated)/projects/+page.svelte
···
41
41
<div class="flexc gap-10 full projects" {...accordion.root}>
42
42
<div class="flexr center gap-10">
43
43
<Fa icon={faMagnifyingGlass} size="lg" />
44
-
<input class="full" type="text" placeholder="Search projects..." bind:value={search} {@attach searchKeybind} />
44
+
<div class="full flex" style="align-items: center">
45
+
{#if search === ""}
46
+
<div
47
+
class="subtext flexr gap-10 center"
48
+
style="position: absolute; padding-left: 10px; pointer-events: none;"
49
+
>
50
+
Search projects
51
+
<div class="keybind">crtl + f</div>
52
+
</div>
53
+
{/if}
54
+
55
+
<input class="full" type="text" bind:value={search} {@attach searchKeybind} />
56
+
</div>
45
57
</div>
46
58
47
59
{#each groups as [status, projects] (status)}