mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-08-14 02:27:09 -07:00
WebUI: Improve search page experience on mobile
This change better handles resizing of elements on the search page to ensure no controls are hidden at typical mobile screen sizes. Improvements seen below: - "Search" button is now accessible - Content no longer overflows w/ "Search plugins..." button pushed offscreen - Tabs overflow horizontally and are scrollable, rather than pushing down the search results table PR #22916.
This commit is contained in:
parent
f8d44b5073
commit
15b8a81f92
1 changed files with 26 additions and 3 deletions
|
@ -1,6 +1,6 @@
|
|||
<style>
|
||||
#searchPattern {
|
||||
width: 300px;
|
||||
width: 180px;
|
||||
background-image: url("images/edit-find.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em;
|
||||
|
@ -70,6 +70,25 @@
|
|||
margin: 0 5px -3px 0;
|
||||
}
|
||||
|
||||
#searchResultsHeader {
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#searchResultsHeaderContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-top: 4px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
#searchPattern {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1060px) {
|
||||
#searchResultsGranularFilters {
|
||||
display: inline-block;
|
||||
|
@ -82,13 +101,17 @@
|
|||
#searchPattern {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#searchResultsHeaderContainer {
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="searchResults">
|
||||
<div style="overflow: hidden; height: 60px;">
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;">
|
||||
<div id="searchResultsHeader">
|
||||
<div id="searchResultsHeaderContainer">
|
||||
<input type="search" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
|
||||
<select id="categorySelect" class="searchInputField" aria-label="QBT_TR(Select category)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.categorySelected()"></select>
|
||||
<select id="pluginsSelect" class="searchInputField" aria-label="QBT_TR(Select plugins)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.pluginSelected()"></select>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue