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,41 +29,52 @@ const Filters = ({ onChange, searchParams }) => {
       }, data.objects?.track || [])
       .filter((value, i, self) => self.indexOf(value) === i);
   }, [data]);
-
   return (
-    <div className="flex space-x-4">
-      <Filter
-        type="dropdown"
-        onChange={onChange}
-        options={['all', ...cameras]}
-        paramName={['camera']}
-        label="Camera"
-        searchParams={searchParams}
-      />
-      <Filter
-        type="dropdown"
-        onChange={onChange}
-        options={['all', ...zones]}
-        paramName={['zone']}
-        label="Zone"
-        searchParams={searchParams}
-      />
-      <Filter
-        type="dropdown"
-        onChange={onChange}
-        options={['all', ...labels]}
-        paramName={['label']}
-        label="Label"
-        searchParams={searchParams}
-      />
-      <Filter
-        type="datepicker"
-        onChange={onChange}
-        options={DateFilterOptions}
-        paramName={['before', 'after']}
-        label="DatePicker"
-        searchParams={searchParams}
-      />
+    <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}
+          options={['all', ...cameras]}
+          paramName={['camera']}
+          label="Camera"
+          searchParams={searchParams}
+        />
+
+        <Filter
+          type="dropdown"
+          onChange={onChange}
+          options={['all', ...zones]}
+          paramName={['zone']}
+          label="Zone"
+          searchParams={searchParams}
+        />
+
+        <Filter
+          type="dropdown"
+          onChange={onChange}
+          options={['all', ...labels]}
+          paramName={['label']}
+          label="Label"
+          searchParams={searchParams}
+        />
+
+        <Filter
+          type="datepicker"
+          onChange={onChange}
+          options={DateFilterOptions}
+          paramName={['before', 'after']}
+          label="DatePicker"
+          searchParams={searchParams}
+        />
+      </div>
     </div>
   );
 };