Hide filters on xs, Button to show

web/src/components/DatePicker.jsx

@@ -59,7 +59,7 @@ export const DateFilterOptions = [
 
 export default function DatePicker({
   helpText,
-  keyboardType = 'date',
+  keyboardType = 'text',
   inputRef,
   label,
   leadingIcon: LeadingIcon,
@@ -123,10 +123,15 @@ export default function DatePicker({
           className="flex space-x-2 items-center"
           data-testid={`label-${label.toLowerCase().replace(/[^\w]+/g, '_')}`}
         >
+          {LeadingIcon ? (
+            <div className="w-10 h-full">
+              <LeadingIcon />
+            </div>
+          ) : null}
           <div className="relative w-full">
             <input
               className="h-6 mt-6 w-full bg-transparent focus:outline-none focus:ring-0"
-              type="text"
+              type={keyboardType}
               readOnly
               onBlur={handleBlur}
               onFocus={handleFocus}
@@ -151,6 +156,7 @@ export default function DatePicker({
           ) : null}
         </label>
       </div>
+      {helpText ? <div className="text-xs pl-3 pt-1">{helpText}</div> : null}
     </div>
   );
 }

web/src/routes/Events/components/filters.jsx

@@ -1,10 +1,12 @@
 import { h } from 'preact';
 import Filter from './filter';
 import { useConfig } from '../../../api';
-import { useMemo } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 import { DateFilterOptions } from '../../../components/DatePicker';
+import Button from '../../../components/Button';
 
 const Filters = ({ onChange, searchParams }) => {
+  const [viewFilters, setViewFilters] = useState(false);
   const { data } = useConfig();
   const cameras = useMemo(() => Object.keys(data.cameras), [data]);
 
@@ -27,9 +29,16 @@ const Filters = ({ onChange, searchParams }) => {
       }, data.objects?.track || [])
       .filter((value, i, self) => self.indexOf(value) === i);
   }, [data]);
-
   return (
-    <div className="flex space-x-4">
+    <div>
+      <Button
+        onClick={() => setViewFilters(!viewFilters)}
+        className="block xs:hidden w-full mb-4 text-center"
+        type="text"
+      >
+        Filters
+      </Button>
+      <div className={`xs:flex space-y-1 xs:space-y-0 xs:space-x-4  ${viewFilters ? 'flex-col' : 'hidden'}`}>
         <Filter
           type="dropdown"
           onChange={onChange}
@@ -38,6 +47,7 @@ const Filters = ({ onChange, searchParams }) => {
           label="Camera"
           searchParams={searchParams}
         />
+
         <Filter
           type="dropdown"
           onChange={onChange}
@@ -46,6 +56,7 @@ const Filters = ({ onChange, searchParams }) => {
           label="Zone"
           searchParams={searchParams}
         />
+
         <Filter
           type="dropdown"
           onChange={onChange}
@@ -54,6 +65,7 @@ const Filters = ({ onChange, searchParams }) => {
           label="Label"
           searchParams={searchParams}
         />
+
         <Filter
           type="datepicker"
           onChange={onChange}
@@ -63,6 +75,7 @@ const Filters = ({ onChange, searchParams }) => {
           searchParams={searchParams}
         />
       </div>
+    </div>
   );
 };
 export default Filters;