Merge pull request #1524 from KodeStar/remove_dropdown_on_single_provider
Some checks failed
Mark stale issues and pull requests / stale (push) Has been cancelled

Remove search provider dropdown when there's only a single provider
This commit is contained in:
KodeStar
2025-11-11 12:05:43 +00:00
committed by GitHub
6 changed files with 55 additions and 9 deletions

View File

@@ -111,16 +111,31 @@ abstract class Search
if ((bool) $user_search_provider) {
$name = 'app.options.'.$user_search_provider;
$provider = self::providerDetails($user_search_provider);
$providers = self::providers();
$providerCount = count($providers);
// If there's only one provider, use its key instead of the user's setting
if ($providerCount === 1) {
$user_search_provider = $providers->keys()->first();
}
$output .= '<div class="searchform">';
$output .= '<form action="'.url('search').'"'.getLinkTargetAttribute().' method="get">';
$output .= '<div id="search-container" class="input-container">';
$output .= '<select name="provider">';
foreach (self::providers() as $key => $searchprovider) {
$selected = ((string) $key === (string) $user_search_provider) ? ' selected="selected"' : '';
$output .= '<option value="'.$key.'"'.$selected.'>'.$searchprovider['name'].'</option>';
// Only show dropdown if there's more than one provider
if ($providerCount > 1) {
$output .= '<select name="provider">';
foreach ($providers as $key => $searchprovider) {
$selected = ((string) $key === (string) $user_search_provider) ? ' selected="selected"' : '';
$output .= '<option value="'.$key.'"'.$selected.'>'.$searchprovider['name'].'</option>';
}
$output .= '</select>';
} else {
// Hidden input for single provider
$output .= '<input type="hidden" name="provider" value="'.$user_search_provider.'" />';
}
$output .= '</select>';
$output .= '<input type="text" name="q" value="'.e(Input::get('q') ?? '').'" class="homesearch" autofocus placeholder="'.__('app.settings.search').'..." />';
$output .= '<button type="submit">'.ucwords(__('app.settings.search')).'</button>';
$output .= '</div>';

11
public/css/app.css vendored
View File

@@ -1130,6 +1130,9 @@ a.settinglink {
position: relative;
z-index: 4;
}
.searchform:has(input[name=provider][type=hidden]) {
max-width: 520px;
}
.searchform form {
width: 100%;
}
@@ -1147,6 +1150,10 @@ a.settinglink {
width: 100%;
background: transparent;
}
.searchform input[name=q]:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.searchform button {
position: absolute;
right: 0px;
@@ -1170,6 +1177,10 @@ a.settinglink {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.searchform select ~ input[name=q] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#search-autocomplete {
position: absolute;

3
public/js/app.js vendored
View File

@@ -4166,7 +4166,8 @@ $.when($.ready).then(function () {
$("#search-container").on("input", "input[name=q]", function () {
var search = this.value;
var items = $("#sortable").find(".item-container");
var provider = $("#search-container select[name=provider]").val();
// Get provider from either select or hidden input
var provider = $("#search-container select[name=provider]").val() || $("#search-container input[name=provider]").val();
if (provider === "tiles") {
hideAutocomplete();
if (search.length > 0) {

View File

@@ -1,4 +1,4 @@
{
"/css/app.css": "/css/app.css?id=18678c7bd2dc9b9f1d75e1aff3b7ea8e",
"/js/app.js": "/js/app.js?id=427b8a731c1bc78d363961ff85a33ee3"
"/css/app.css": "/css/app.css?id=271cb5f5a1f91d0a6dfbc65e374ffc14",
"/js/app.js": "/js/app.js?id=2ebeb753597d1cbbf88d8bc652e4af5b"
}

View File

@@ -185,7 +185,10 @@ $.when($.ready).then(() => {
.on("input", "input[name=q]", function () {
const search = this.value;
const items = $("#sortable").find(".item-container");
const provider = $("#search-container select[name=provider]").val();
// Get provider from either select or hidden input
const provider =
$("#search-container select[name=provider]").val() ||
$("#search-container input[name=provider]").val();
if (provider === "tiles") {
hideAutocomplete();

View File

@@ -926,6 +926,12 @@ div.create {
max-width: 620px;
position: relative;
z-index: 4;
// Reduce width when there's no select dropdown (only has hidden input)
&:has(input[name="provider"][type="hidden"]) {
max-width: 520px;
}
form {
width: 100%;
}
@@ -944,6 +950,11 @@ div.create {
width: 100%;
background: transparent;
}
// When there's no select dropdown, round the input's left corners
input[name="q"]:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
position: absolute;
right: 0px;
@@ -967,6 +978,11 @@ div.create {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
// When select exists, remove input's left border radius
select ~ input[name="q"] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
#search-autocomplete {