From d5b8399a01f6c6f0131b0036f34766f848760347 Mon Sep 17 00:00:00 2001
From: Thomas Piccirello <thomas@piccirello.com>
Date: Thu, 30 Apr 2020 01:20:09 -0700
Subject: [PATCH] Hide additional Web UI search filters on small screens

Closes #11386.
---
 src/webui/www/private/views/search.html | 75 ++++++++++++++++---------
 1 file changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/webui/www/private/views/search.html b/src/webui/www/private/views/search.html
index 7d753e6e9..545a73f6a 100644
--- a/src/webui/www/private/views/search.html
+++ b/src/webui/www/private/views/search.html
@@ -49,6 +49,25 @@
         float: right;
     }
 
+    #searchResultsGranularFilters {
+        display: none;
+    }
+
+    #searchResultsGranularFiltersWarning {
+        vertical-align: bottom;
+        margin-left: 10px;
+    }
+
+    @media (min-width: 1060px) {
+        #searchResultsGranularFilters {
+            display: inline-block;
+        }
+
+        #searchResultsGranularFiltersWarning {
+            display: none;
+        }
+    }
+
 </style>
 
 <div id="searchResults">
@@ -86,33 +105,37 @@
                 <option value="everywhere">QBT_TR(Everywhere)QBT_TR[CONTEXT=SearchEngineWidget]</option>
             </select>
 
-            <span style="margin-left: 15px;">QBT_TR(Seeds:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
-            <input type="number" min="0" max="1000" id="searchMinSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">
-            <span>to</span>
-            <input type="number" min="0" max="1000" id="searchMaxSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">
+            <img id="searchResultsGranularFiltersWarning" src="images/qbt-theme/dialog-warning.svg" title="QBT_TR(Increase window width to display additional filters)QBT_TR[CONTEXT=SearchEngineWidget]" alt="QBT_TR(Warning)QBT_TR[CONTEXT=SearchEngineWidget]" width="24" height="24">
 
-            <span style="margin-left: 15px;">QBT_TR(Size:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
-            <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMinSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
-            <select id="searchMinSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
-                <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
-                <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="2" selected>QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="3">QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
-            </select>
-            <span>to</span>
-            <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMaxSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
-            <select id="searchMaxSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
-                <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
-                <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="2" selected>QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="3">QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
-                <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
-            </select>
+            <div id="searchResultsGranularFilters">
+                <span style="margin-left: 15px;">QBT_TR(Seeds:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
+                <input type="number" min="0" max="1000" id="searchMinSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">
+                <span>to</span>
+                <input type="number" min="0" max="1000" id="searchMaxSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">
+
+                <span style="margin-left: 15px;">QBT_TR(Size:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
+                <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMinSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
+                <select id="searchMinSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
+                    <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
+                    <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="2" selected>QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="3">QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
+                </select>
+                <span>to</span>
+                <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMaxSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
+                <select id="searchMaxSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
+                    <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
+                    <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="2" selected>QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="3">QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
+                    <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
+                </select>
+            </div>
         </div>
     </div>