diff --git a/app/Search.php b/app/Search.php index 0d7bdaf94..5b098f0e5 100644 --- a/app/Search.php +++ b/app/Search.php @@ -111,16 +111,31 @@ public static function form(): string 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 .= '
'; $output .= '
'; $output .= '
'; - $output .= ''; + foreach ($providers as $key => $searchprovider) { + $selected = ((string) $key === (string) $user_search_provider) ? ' selected="selected"' : ''; + $output .= ''; + } + $output .= ''; + } else { + // Hidden input for single provider + $output .= ''; } - $output .= ''; + $output .= ''; $output .= ''; $output .= '
'; diff --git a/public/css/app.css b/public/css/app.css index 6bf84244b..0b3795687 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -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; diff --git a/public/js/app.js b/public/js/app.js index 76f01756f..2e50d801b 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -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) { diff --git a/public/mix-manifest.json b/public/mix-manifest.json index a8bc3a499..3b64c4c90 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -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" } diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index c8bb53dcf..42f31c81b 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -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(); diff --git a/resources/assets/sass/_app.scss b/resources/assets/sass/_app.scss index 097115735..b80a3c625 100644 --- a/resources/assets/sass/_app.scss +++ b/resources/assets/sass/_app.scss @@ -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 {