graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ux: show search button in header on mobile/collapsed menu state

Browse source 
Change search trigger from hidden-on-mobile to always visible, hiding
only the text label and keyboard shortcut hint on small screens.
This commit is contained in:
Graham McIntire 2026-03-12 15:42:01 -05:00
parent 6565385759
commit 0791089c18
No known key found for this signature in database
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/towerops_web/components/layouts.ex
View file

@ -406,11 +406,11 @@ defmodule ToweropsWeb.Layouts do
type="button"
id="global-search-trigger"
phx-hook="GlobalSearchTrigger"
class="hidden lg:inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 transition-colors"
class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 transition-colors"
title="Search (⌘K)"
>
<.icon name="hero-magnifying-glass" class="h-4 w-4" />
<span class="text-xs">{t("Search")}</span>
<span class="hidden lg:inline text-xs">{t("Search")}</span>
<kbd class="hidden lg:inline-flex items-center gap-0.5 rounded border border-gray-300 bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:border-white/20 dark:bg-white/10 dark:text-gray-400">
⌘K
</kbd>

3
lib/towerops_web/live/org/settings_live.html.heex
View file

@ -1158,7 +1158,8 @@
}
class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
>
<.icon name="hero-arrows-right-left" class="h-3.5 w-3.5" /> Device & Site Linking
<.icon name="hero-arrows-right-left" class="h-3.5 w-3.5" />
Device & Site Linking
</.link>
<.link
navigate={