From 14b7bc2fe25c602da2accae9196df6a7b1289004 Mon Sep 17 00:00:00 2001
From: soup <soup@r4tio.dev>
Date: Tue, 17 Jan 2023 23:37:10 +0100
Subject: [PATCH] enhancement(web): filters list mobile friendly (#648)

* Made Filters page dynamic for mobile screens

* Small corrections

Filter names
- Break very long words (Just to safe guard)
- Whitespace wrap
- w-4/5 on filter names to avoid clipping
---
 web/src/screens/Base.tsx         | 67 +++++++++++++++++++++-----------
 web/src/screens/filters/list.tsx | 20 +++++-----
 2 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/src/screens/Base.tsx b/web/src/screens/Base.tsx
index aed3b78..6f0d831 100644
--- a/web/src/screens/Base.tsx
+++ b/web/src/screens/Base.tsx
@@ -24,7 +24,7 @@ export default function Base() {
     { name: "Filters", path: "/filters" },
     { name: "Releases", path: "/releases" },
     { name: "Settings", path: "/settings" },
-    { name: "Logs", path: "/logs" }
+    { name: "Logs", path: "/logs" },
   ];
 
   return (
@@ -55,20 +55,24 @@ export default function Base() {
                     </div>
                     <div className="sm:ml-3 hidden sm:block">
                       <div className="flex items-baseline space-x-4">
-                        {nav.map((item, itemIdx) =>
+                        {nav.map((item, itemIdx) => (
                           <NavLink
                             key={item.name + itemIdx}
                             to={item.path}
-                            className={({ isActive }) => classNames(
-                              "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
-                              "transition-colors duration-200",
-                              isActive ? "text-black dark:text-gray-50 font-bold" : "text-gray-600 dark:text-gray-500"
-                            )}
+                            className={({ isActive }) =>
+                              classNames(
+                                "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
+                                "transition-colors duration-200",
+                                isActive
+                                  ? "text-black dark:text-gray-50 font-bold"
+                                  : "text-gray-600 dark:text-gray-500"
+                              )
+                            }
                             end={item.path === "/"}
                           >
                             {item.name}
                           </NavLink>
-                        )}
+                        ))}
                         <a
                           rel="noopener noreferrer"
                           target="_blank"
@@ -79,7 +83,10 @@ export default function Base() {
                           )}
                         >
                           Docs
-                          <BookOpenIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
+                          <BookOpenIcon
+                            className="inline ml-1 h-5 w-5"
+                            aria-hidden="true"
+                          />
                         </a>
                       </div>
                     </div>
@@ -98,7 +105,9 @@ export default function Base() {
                               )}
                             >
                               <span className="hidden text-sm font-medium sm:block">
-                                <span className="sr-only">Open user menu for </span>
+                                <span className="sr-only">
+                                  Open user menu for{" "}
+                                </span>
                                 {authContext.username}
                               </span>
                               <UserIcon
@@ -125,7 +134,9 @@ export default function Base() {
                                     <Link
                                       to="/settings"
                                       className={classNames(
-                                        active ? "bg-gray-100 dark:bg-gray-600" : "",
+                                        active
+                                          ? "bg-gray-100 dark:bg-gray-600"
+                                          : "",
                                         "block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
                                       )}
                                     >
@@ -138,7 +149,9 @@ export default function Base() {
                                     <Link
                                       to="/logout"
                                       className={classNames(
-                                        active ? "bg-gray-100 dark:bg-gray-600" : "",
+                                        active
+                                          ? "bg-gray-100 dark:bg-gray-600"
+                                          : "",
                                         "block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
                                       )}
                                     >
@@ -155,13 +168,18 @@ export default function Base() {
                   </div>
                   <div className="-mr-2 flex sm:hidden">
                     {/* Mobile menu button */}
-                    <Disclosure.Button
-                      className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
+                    <Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
                       <span className="sr-only">Open main menu</span>
                       {open ? (
-                        <XMarkIcon className="block h-6 w-6" aria-hidden="true"/>
+                        <XMarkIcon
+                          className="block h-6 w-6"
+                          aria-hidden="true"
+                        />
                       ) : (
-                        <Bars3Icon className="block h-6 w-6" aria-hidden="true"/>
+                        <Bars3Icon
+                          className="block h-6 w-6"
+                          aria-hidden="true"
+                        />
                       )}
                     </Disclosure.Button>
                   </div>
@@ -171,19 +189,23 @@ export default function Base() {
 
             <Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
               <div className="px-2 py-3 space-y-1 sm:px-3">
-                {nav.map((item) =>
+                {nav.map((item) => (
                   <NavLink
                     key={item.path}
                     to={item.path}
-                    className={({ isActive }) => classNames(
-                      "shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
-                      isActive ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black" : "font-medium"
-                    )}
+                    className={({ isActive }) =>
+                      classNames(
+                        "shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
+                        isActive
+                          ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black"
+                          : "font-medium"
+                      )
+                    }
                     end={item.path === "/"}
                   >
                     {item.name}
                   </NavLink>
-                )}
+                ))}
                 <Link
                   to="/logout"
                   className="shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
@@ -191,7 +213,6 @@ export default function Base() {
                   Logout
                 </Link>
               </div>
-
             </Disclosure.Panel>
           </>
         )}
diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index c2013c2..053a4fd 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -149,7 +149,7 @@ function FilterList({ toggleCreateFilter }: any) {
           </div>
 
           <div className="flex items-center gap-5">
-            <IndexerSelectFilter dispatch={dispatchFilter} />
+            <div className="hidden sm:flex"><IndexerSelectFilter dispatch={dispatchFilter} /></div>
             <SortSelectFilter dispatch={dispatchFilter} />
           </div>
         </div>
@@ -390,7 +390,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
     <li
       key={filter.id}
       className={classNames(
-        "flex items-center hover:bg-gray-100 dark:hover:bg-[#222225] rounded-b-lg",
+        "flex py-1 items-center hover:bg-gray-100 dark:hover:bg-[#222225] rounded-b-lg",
         idx % 2 === 0 ?
           "bg-white dark:bg-[#2e2e31]" :
           "bg-gray-50 dark:bg-gray-800"
@@ -417,8 +417,8 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
           />
         </Switch>
       </span>
-      <div className="flex flex-col w-full justify-center">
-        <span className="whitespace-nowrap text-sm font-bold text-gray-900 dark:text-gray-100">
+      <div className="flex flex-col overflow-hidden w-full justify-center">
+        <span className="w-4/5 break-words whitespace-wrap py-1 text-sm font-bold text-gray-900 dark:text-gray-100">
           <Link
             to={filter.id.toString()}
             className="hover:text-black dark:hover:text-gray-300"
@@ -427,7 +427,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
           </Link>
         </span>
         <div className="flex-col">
-          <span className="mr-2 whitespace-nowrap text-xs font-medium text-gray-600 dark:text-gray-400">
+          <span className="mr-2 break-words whitespace-nowrap text-xs font-medium text-gray-600 dark:text-gray-400">
             Priority: {filter.priority}
           </span>
           <span className="whitespace-nowrap text-xs font-medium text-gray-600 dark:text-gray-400">
@@ -440,10 +440,10 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
           </span>
         </div>
       </div>
-      <span className="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+      <span className="hidden sm:flex px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
         <FilterIndexers indexers={filter.indexers} />
       </span>
-      <span className="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
+      <span className="min-w-fit px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
         <FilterItemDropdown
           filter={filter}
           onToggle={toggleActive}
@@ -460,7 +460,7 @@ interface IndexerTagProps {
 const IndexerTag: FC<IndexerTagProps> = ({ indexer }) => (
   <span
     key={indexer.id}
-    className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
+    className="hidden sm:flex mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
   >
     {indexer.name}
   </span>
@@ -478,7 +478,7 @@ function FilterIndexers({ indexers }: FilterIndexersProps) {
           ? indexers.map((indexer, idx) => (
             <IndexerTag key={idx} indexer={indexer} />
           ))
-          : <span className="text-red-400 dark:text-red-800 p-1 text-xs tracking-wide rounded border border-red-400 dark:border-red-700 bg-red-100 dark:bg-red-400">NO INDEXERS SELECTED</span>
+          : <span className="hidden sm:flex text-red-400 dark:text-red-800 p-1 text-xs tracking-wide rounded border border-red-400 dark:border-red-700 bg-red-100 dark:bg-red-400">NO INDEXERS SELECTED</span>
         }
       </>
     );
@@ -521,7 +521,7 @@ const ListboxFilter = ({
     onChange={onChange}
   >
     <div className="relative">
-      <Listbox.Button className="relative w-full py-2 pr-5 text-left dark:text-gray-400 sm:text-sm">
+      <Listbox.Button className="relative w-full py-2 pr-5 text-left dark:text-gray-400 text-sm">
         <span className="block truncate">{label}</span>
         <span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
           <ChevronDownIcon