idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): floating "Import filter" dropdown button (#1102)

Browse source 
fix: incorrect z-height on "Import filter" dropdown button
This commit is contained in:
stacksmash76 2023-09-10 18:38:42 +02:00 • committed by GitHub
parent 1215036d89
commit 528405d1cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

96
web/src/screens/filters/List.tsx
View file

@ -141,55 +141,53 @@ export function Filters() {
<FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} /> <FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} />
<div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between"> <div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1> <h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
<div className="relative"> <Menu as="div" className="relative">
<Menu> {({ open }) => (
{({ open }) => ( <>
<> <button
<button className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500" onClick={(e: { stopPropagation: () => void; }) => {
onClick={(e: { stopPropagation: () => void; }) => { if (!open) {
if (!open) { e.stopPropagation();
e.stopPropagation(); toggleCreateFilter();
toggleCreateFilter(); }
} }}
}} >
> <PlusIcon className="h-5 w-5 mr-1" />
<PlusIcon className="h-5 w-5 mr-1" /> Add Filter
Add Filter </button>
</button> <Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
<Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"> <ChevronDownIcon className="h-5 w-5" />
<ChevronDownIcon className="h-5 w-5" /> </Menu.Button>
</Menu.Button> <Transition
<Transition show={open}
show={open} as={Fragment}
enter="transition ease-out duration-100 transform" enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform" leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Menu.Items className="absolute right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg"> <Menu.Items className="absolute z-10 right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg">
<Menu.Item> <Menu.Item>
{({ active }) => ( {({ active }) => (
<button <button
type="button" type="button"
className={`${active className={classNames(
? "bg-gray-50 dark:bg-gray-600" active ? "bg-gray-50 dark:bg-gray-600" : "",
: "" "w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500")}
} w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500`} onClick={() => setShowImportModal(true)}
onClick={() => setShowImportModal(true)} >
> Import Filter
Import Filter </button>
</button> )}
)} </Menu.Item>
</Menu.Item> </Menu.Items>
</Menu.Items> </Transition>
</Transition> </>
</> )}
)} </Menu>
</Menu>
</div>
</div> </div>
{showImportModal && ( {showImportModal && (