dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: search should be more visible on scroll on new resource

Browse Source
This commit is contained in:
Andras Bacsai
2024-11-25 15:46:23 +01:00
parent 504caefb8c
commit 16763372fc
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/css/app.css
View File

@@ -30,6 +30,14 @@ body {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300; @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300;
} }
.input-sticky {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400 block w-full py-1.5 rounded border-0 text-sm ring-1 ring-inset;
}
.input-sticky-active {
@apply border-2 border-coollabs focus:bg-coolgray-400 focus:border-coollabs;
}
/* Readonly */ /* Readonly */
.input { .input {
@apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200; @apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;

7
resources/views/livewire/project/new/select.blade.php
View File

@@ -12,9 +12,10 @@
<div class="pb-4">Deploy resources, like Applications, Databases, Services...</div> <div class="pb-4">Deploy resources, like Applications, Databases, Services...</div>
<div x-data="searchResources()"> <div x-data="searchResources()">
@if ($current_step === 'type') @if ($current_step === 'type')
<div class="sticky top-0 z-50 py-2"> <div x-data="{ isSticky: false }" x-init="window.addEventListener('scroll', () => isSticky = window.pageYOffset > 100)" class="sticky top-0 z-50 py-2">
<input autocomplete="off" x-ref="searchInput" class="input w-full" x-model="search" <input autocomplete="off" x-ref="searchInput" class="input-sticky"
placeholder="Type / to search..." @keydown.window.slash.prevent="$refs.searchInput.focus()"> :class="{ 'input-sticky-active': isSticky }" x-model="search" placeholder="Type / to search..."
@keydown.window.slash.prevent="$refs.searchInput.focus()">
</div> </div>
<div x-show="loading">Loading...</div> <div x-show="loading">Loading...</div>
<div x-show="!loading" class="flex flex-col gap-4 py-4"> <div x-show="!loading" class="flex flex-col gap-4 py-4">