optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore landing page + improve header search input
All checks were successful
Build Docker Image / build (push) Successful in 3m11s
Details

Browse Source 
- Restore full landing with How it works + Who it's for sections
- Make search input bigger and rounder (rounded-full, shadow)
- Remove border between input and chips
- Bigger badges and icons
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:27:59 +07:00
parent 584a423e86
commit 31f3c622eb
2 changed files with 132 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/navigation/MainNavigation.vue
View File

@@ -12,42 +12,42 @@
<!-- Center: Search input with tokens -->
<div class="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
<div
class="flex items-center gap-2 w-full px-3 py-1.5 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
class="flex items-center gap-3 w-full px-5 py-2.5 border border-base-300 rounded-full bg-base-100 shadow-sm hover:shadow-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
@click="focusInput"
>
<Icon name="lucide:search" size="16" class="text-base-content/50 flex-shrink-0" />
<Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
<!-- Tokens + input inline -->
<div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Active filter tokens -->
<div
v-for="token in activeTokens"
:key="token.type"
class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
class="badge badge-md gap-1.5 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
@click.stop="$emit('edit-token', token.type)"
>
<Icon :name="token.icon" size="12" />
<span class="max-w-20 truncate">{{ token.label }}</span>
<Icon :name="token.icon" size="14" />
<span class="max-w-24 truncate">{{ token.label }}</span>
<button
class="hover:text-error"
@click.stop="$emit('remove-token', token.type)"
>
<Icon name="lucide:x" size="10" />
<Icon name="lucide:x" size="12" />
</button>
</div>
<!-- Active selection mode indicator -->
<div
v-if="selectMode"
class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
class="badge badge-md badge-outline badge-primary gap-1.5 flex-shrink-0"
>
<Icon :name="selectModeIcon" size="12" />
<Icon :name="selectModeIcon" size="14" />
{{ selectModeLabel }}:
<button
class="hover:text-error"
@click.stop="$emit('cancel-select')"
>
<Icon name="lucide:x" size="10" />
<Icon name="lucide:x" size="12" />
</button>
</div>
@@ -57,7 +57,7 @@
v-model="localSearchQuery"
type="text"
:placeholder="placeholder"
class="flex-1 min-w-24 bg-transparent outline-none text-sm"
class="flex-1 min-w-32 bg-transparent outline-none"
@input="$emit('update:search-query', localSearchQuery)"
/>
</div>
@@ -181,15 +181,15 @@
<!-- Bottom row: Quick filter chips -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-2 px-4 py-1.5 border-t border-base-200"
class="flex items-center justify-center gap-3 px-4 py-2"
>
<button
v-for="chip in availableChips"
:key="chip.type"
class="btn btn-xs btn-ghost gap-1"
class="btn btn-sm btn-ghost gap-1.5"
@click="$emit('start-select', chip.type)"
>
<Icon name="lucide:plus" size="12" />
<Icon name="lucide:plus" size="14" />
{{ chip.label }}
</button>
</div>