mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
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
This commit is contained in:
soup
GitHub
parent
a6c1944df8
commit
14b7bc2fe2
2 changed files with 54 additions and 33 deletions
|
|
@ -24,7 +24,7 @@ export default function Base() {
|
||||||
{ name: "Filters", path: "/filters" },
|
{ name: "Filters", path: "/filters" },
|
||||||
{ name: "Releases", path: "/releases" },
|
{ name: "Releases", path: "/releases" },
|
||||||
{ name: "Settings", path: "/settings" },
|
{ name: "Settings", path: "/settings" },
|
||||||
{ name: "Logs", path: "/logs" }
|
{ name: "Logs", path: "/logs" },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -55,20 +55,24 @@ export default function Base() {
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:ml-3 hidden sm:block">
|
<div className="sm:ml-3 hidden sm:block">
|
||||||
<div className="flex items-baseline space-x-4">
|
<div className="flex items-baseline space-x-4">
|
||||||
{nav.map((item, itemIdx) =>
|
{nav.map((item, itemIdx) => (
|
||||||
<NavLink
|
<NavLink
|
||||||
key={item.name + itemIdx}
|
key={item.name + itemIdx}
|
||||||
to={item.path}
|
to={item.path}
|
||||||
className={({ isActive }) => classNames(
|
className={({ isActive }) =>
|
||||||
"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",
|
classNames(
|
||||||
"transition-colors duration-200",
|
"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",
|
||||||
isActive ? "text-black dark:text-gray-50 font-bold" : "text-gray-600 dark:text-gray-500"
|
"transition-colors duration-200",
|
||||||
)}
|
isActive
|
||||||
|
? "text-black dark:text-gray-50 font-bold"
|
||||||
|
: "text-gray-600 dark:text-gray-500"
|
||||||
|
)
|
||||||
|
}
|
||||||
end={item.path === "/"}
|
end={item.path === "/"}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
)}
|
))}
|
||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|
@ -79,7 +83,10 @@ export default function Base() {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
Docs
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -98,7 +105,9 @@ export default function Base() {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span className="hidden text-sm font-medium sm:block">
|
<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}
|
{authContext.username}
|
||||||
</span>
|
</span>
|
||||||
<UserIcon
|
<UserIcon
|
||||||
|
|
@ -125,7 +134,9 @@ export default function Base() {
|
||||||
<Link
|
<Link
|
||||||
to="/settings"
|
to="/settings"
|
||||||
className={classNames(
|
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"
|
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
@ -138,7 +149,9 @@ export default function Base() {
|
||||||
<Link
|
<Link
|
||||||
to="/logout"
|
to="/logout"
|
||||||
className={classNames(
|
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"
|
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
@ -155,13 +168,18 @@ export default function Base() {
|
||||||
</div>
|
</div>
|
||||||
<div className="-mr-2 flex sm:hidden">
|
<div className="-mr-2 flex sm:hidden">
|
||||||
{/* Mobile menu button */}
|
{/* Mobile menu button */}
|
||||||
<Disclosure.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">
|
||||||
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>
|
<span className="sr-only">Open main menu</span>
|
||||||
{open ? (
|
{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>
|
</Disclosure.Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -171,19 +189,23 @@ export default function Base() {
|
||||||
|
|
||||||
<Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
|
<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">
|
<div className="px-2 py-3 space-y-1 sm:px-3">
|
||||||
{nav.map((item) =>
|
{nav.map((item) => (
|
||||||
<NavLink
|
<NavLink
|
||||||
key={item.path}
|
key={item.path}
|
||||||
to={item.path}
|
to={item.path}
|
||||||
className={({ isActive }) => classNames(
|
className={({ isActive }) =>
|
||||||
"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",
|
classNames(
|
||||||
isActive ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black" : "font-medium"
|
"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 === "/"}
|
end={item.path === "/"}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
)}
|
))}
|
||||||
<Link
|
<Link
|
||||||
to="/logout"
|
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"
|
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
|
Logout
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Disclosure.Panel>
|
</Disclosure.Panel>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ function FilterList({ toggleCreateFilter }: any) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-5">
|
<div className="flex items-center gap-5">
|
||||||
<IndexerSelectFilter dispatch={dispatchFilter} />
|
<div className="hidden sm:flex"><IndexerSelectFilter dispatch={dispatchFilter} /></div>
|
||||||
<SortSelectFilter dispatch={dispatchFilter} />
|
<SortSelectFilter dispatch={dispatchFilter} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -390,7 +390,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
|
||||||
<li
|
<li
|
||||||
key={filter.id}
|
key={filter.id}
|
||||||
className={classNames(
|
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 ?
|
idx % 2 === 0 ?
|
||||||
"bg-white dark:bg-[#2e2e31]" :
|
"bg-white dark:bg-[#2e2e31]" :
|
||||||
"bg-gray-50 dark:bg-gray-800"
|
"bg-gray-50 dark:bg-gray-800"
|
||||||
|
|
@ -417,8 +417,8 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
|
||||||
/>
|
/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-col w-full justify-center">
|
<div className="flex flex-col overflow-hidden w-full justify-center">
|
||||||
<span className="whitespace-nowrap text-sm font-bold text-gray-900 dark:text-gray-100">
|
<span className="w-4/5 break-words whitespace-wrap py-1 text-sm font-bold text-gray-900 dark:text-gray-100">
|
||||||
<Link
|
<Link
|
||||||
to={filter.id.toString()}
|
to={filter.id.toString()}
|
||||||
className="hover:text-black dark:hover:text-gray-300"
|
className="hover:text-black dark:hover:text-gray-300"
|
||||||
|
|
@ -427,7 +427,7 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
<div className="flex-col">
|
<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}
|
Priority: {filter.priority}
|
||||||
</span>
|
</span>
|
||||||
<span className="whitespace-nowrap text-xs font-medium text-gray-600 dark:text-gray-400">
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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} />
|
<FilterIndexers indexers={filter.indexers} />
|
||||||
</span>
|
</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
|
<FilterItemDropdown
|
||||||
filter={filter}
|
filter={filter}
|
||||||
onToggle={toggleActive}
|
onToggle={toggleActive}
|
||||||
|
|
@ -460,7 +460,7 @@ interface IndexerTagProps {
|
||||||
const IndexerTag: FC<IndexerTagProps> = ({ indexer }) => (
|
const IndexerTag: FC<IndexerTagProps> = ({ indexer }) => (
|
||||||
<span
|
<span
|
||||||
key={indexer.id}
|
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}
|
{indexer.name}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -478,7 +478,7 @@ function FilterIndexers({ indexers }: FilterIndexersProps) {
|
||||||
? indexers.map((indexer, idx) => (
|
? indexers.map((indexer, idx) => (
|
||||||
<IndexerTag key={idx} indexer={indexer} />
|
<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}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<div className="relative">
|
<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="block truncate">{label}</span>
|
||||||
<span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
|
<span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
|
||||||
<ChevronDownIcon
|
<ChevronDownIcon
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue