Updated global search to use a window modal for better UX.

Author: tabuna

resources/views/app.blade.php

@@ -68,6 +68,6 @@
 
 @stack('scripts')
 
-
+@include('platform::partials.search-modal')
 </body>
 </html>

resources/views/partials/result-compact.blade.php

@@ -1,25 +1,30 @@
 @forelse($results as $group)
 
 @empty(!$group['label'])
-    <div class="hidden-folded padder m-t-xs mb-1 text-muted small">{{$group['label']}}</div>
+    <div class="hidden-folded text-muted small">{{$group['label']}}</div>
 @endempty
 
 @foreach($group['result'] as $item)
-    <a href="{{$item->url()}}" class="block py-2 px-3 dropdown-item" style="font-size: 0.85em;">
+    <div class="p-2 list-group-item-action d-flex gap-3 align-items-start position-relative rounded overflow-hidden">
 
         @empty(!$item->image())
-            <span class="pull-left thumb-xs rounded me-3">
-                  <img src="{{$item->image()}}" alt="{{$item->title()}}">
-                </span>
+            <div class="thumb-sm rounded overflow-hidden">
+                <img src="{{$item->image()}}" alt="{{$item->title()}}">
+            </div>
         @endempty
 
-        <span class="clear">
-                <span class="text-ellipsis">{{$item->title()}}</span>
-                <small class="text-muted clear text-ellipsis">
-                    {{$item->subTitle()}}
-                </small>
-            </span>
-    </a>
+        <div class="d-flex flex-column">
+            <div class="text-balance">
+                <a href="{{ $item->url() }}"
+                   class="stretched-link link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+                    {{$item->title()}}
+                </a>
+            </div>
+            <div class="text-muted small text-balance">
+                {{$item->subTitle()}}
+            </div>
+        </div>
+    </div>
 @endforeach
 
 @empty
@@ -32,12 +37,10 @@
 
 
 @if($total >= 5)
-
     <a href="{{ route('platform.search', $query) }}" class="block py-2 px-3 dropdown-item border-top pb-1">
         <span class="small ps-1">
             {{ __('See more results.') }}
             <span class="text-muted">({{ $total }})</span>
         </span>
     </a>
-
 @endif

resources/views/partials/search-modal.blade.php

@@ -0,0 +1,46 @@
+<div class="modal fade center-scale"
+     tabindex="-1"
+     role="dialog"
+     id="search-modal"
+>
+    <div class="modal-dialog modal-fullscreen-md-down" role="document">
+        <div class="modal-content">
+
+            <div class="modal-header align-items-baseline gap-3">
+                <h4 class="modal-title text-body-emphasis fw-light text-balance text-break"
+                    data-modal-target="title">
+                    {{ __('Search') }}
+                </h4>
+                <button type="button" class="btn-close" title="Close" data-bs-dismiss="modal"
+                        aria-label="Close">
+                </button>
+            </div>
+
+            <div class="modal-body p-4 py-4">
+                <div data-controller="search-docs">
+                    <div class="position-relative d-flex flex-column gap-3" data-controller="search">
+                        <div class="input-icon">
+                            <input
+                                data-action="keyup->search#query blur->search#blur focus->search#focus"
+                                data-search-target="query"
+                                autocomplete="off"
+                                autofocus
+                                type="text"
+                                value="@yield('search')"
+                                class="form-control"
+                                placeholder="{{ __('What to search...') }}"
+                            >
+                            <div class="input-icon-addon">
+                                <x-orchid-icon path="bs.search"/>
+                            </div>
+                        </div>
+                        <div id="search-result"
+                             class="d-flex flex-column gap-2 list-group">
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

resources/views/partials/search.blade.php

@@ -1,25 +1,21 @@
-@empty(!Dashboard::getSearch()->all())
+@if(Dashboard::getSearch()->isNotEmpty())
     <div class="p-3">
-        <div class="dropdown position-relative" data-controller="search">
+        <div class="position-relative overflow-hidden">
             <div class="input-icon">
-                <input
-                    data-action="keyup->search#query blur->search#blur focus->search#focus"
-                    data-search-target="query"
-                    type="text"
-                    value="@yield('search')"
-                       class="form-control input-sm padder bg-dark text-white"
-                       placeholder="{{ __('What to search...') }}"
-                >
+                <input class="form-control bg-dark text-white"
+                       type="text"
+                       readonly
+                       placeholder="{{ __('What to search...') }}">
                 <div class="input-icon-addon">
                     <x-orchid-icon path="bs.search"/>
                 </div>
             </div>
-            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow bg-white w-100"
-                 x-placement="start-left" id="search-result">
-            </div>
+            <a href="#"
+               data-bs-toggle="modal"
+               data-bs-target="#search-modal"
+               class="stretched-link"></a>
         </div>
     </div>
-
 @else
     <div class="divider my-2"></div>
-@endempty
+@endif